草庐IT

flutter - 带圆边的 ListView

coder 2023-07-23 原文

在 Flutter 中实现以下带角边缘的 ListView 的最佳方法是什么？

由于我需要在圆角上重叠，是否有使用 Stack 和 Positioned 的特定实现？

最佳答案

我找到了一种不使用 Stack 和 Positioned 的方法。

我使用 ListView.builder() 创建了一个 ListView，其中每一行都是两个容器(父容器和子容器)。底部容器(父级)从数组 (index+1) 中获取下一行颜色的背景。然后我添加一个带有圆形边缘的容器，根据其索引采用它的颜色。如果是最后一行，底部容器将是透明的。这将给出预期的结果。

  List<Color> colours = [
    Colors.red,
    Colors.green,
    Colors.blue,
    Colors.amber,
    Colors.brown,
    Colors.deepPurple,
  ];

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Hello"),
      ),
      body: ListView.builder(
        itemCount: colours.length,
        itemBuilder: (context, index) {
           return Container( // This is the back container which will show next cell colour on the rounded edge
              color: index + 1 < colours.length
                  ? colours[index + 1] // get next row background as back container background
                  : Colors.transparent, // Otherwise keep it transparent to prevent out of bounds error
              child: Container(
                height: 180,
                decoration: BoxDecoration(
                  borderRadius:
                  const BorderRadius.only(bottomLeft: Radius.circular(85.0)),
                  color: colours[index],
                ),
                child: Center(
                  child: Text(
                    index.toString(),
                    style: const TextStyle(color: Colors.white, fontSize: 50),
                  ),
                ),
              ),
           );
        },
      ),
    );
  }
}

关于flutter - 带圆边的 ListView，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56673446/

ListViewfluttersectionColors容器flutter-layout

有关flutter - 带圆边的 ListView的更多相关文章

  1. Flutter 环境变量配置和flutter doctor中的错误解决 - 2

    一、环境变量右键点击我的电脑-属性：然后找到环境变量 1.Android的SDK不在C盘的话需要额外配这个到用户环境变量：ANDROID_HOMED:\AndroidSDK2.然后在系统变量：Path中添加一条这样的值        D:\Flutter\flutter\bin             这个值写flutter包解压的实际地址即可 3.在系统变量中添加两个镜像变量：        变量名：FLUTTER_STORAGE_BASE_URL      变量值：https://storage.flutter-io.cn        变量名：PUB_HOSTED_URL      变量

  2. javascript - 支持标记边的 JS Graph 库 - 2

    我正在寻找用于javascript的图形(不是图表)库。我只需要绘制不到10个节点，因此性能不是大问题。需要的功能:应该能够与jQuery共存/使用jQuery有向图自动对齐图形(我认为没有碰撞就足够了)标记边缘的能力理想情况下它是免费的，就像免费啤酒和言论自由我找到了一个很好的threadhere有很多库。但它们似乎都不支持边缘标签。有什么提示吗？ 最佳答案 我认为arbor.js可以完成这项工作>http://arborjs.org/.它基于jQuery，自动对齐图形并制作有向图。您还可以标记边缘。看看这个帖子:Addlabel

  3. javascript - 如何在 ListView React-native 中过滤数据？ - 2

    我正在尝试过滤我的数组对象列表，然后尝试使用新数据源在ListView中显示。但是，该列表未被过滤。我知道我的过滤器功能正常工作。(我在console.log里查过了)我正在使用Redux将我的状态映射到prop。然后尝试过滤Prop。这是错误的方法吗？这是我的代码:/*globalfetch:false*/import_from'lodash';importReact,{Component}from'react';import{ListView,TextasNText}from'react-native';import{connect}from'react-redux';import

  4. javascript - react native ListView onEndReached 多次调用 - 2

    我在使用ReactNative中的ListViewonEndReached组件时遇到了一些问题。渲染代码:@autobind_fetchMoreHistory(){console.log("Fetchmorehistorycalled");}我打开屏幕的那一刻_fetchMoreHistory被调用了两次并且在到达onEndReached之后正常工作。有人可以帮助调试吗？ 最佳答案 我遇到了同样的问题并进行了很多搜索但没有找到任何答案，所以我使用了一个条件来检查第一个请求是否得到了我再次触发的数据，否则我没有例子//onEndRea

  5. javascript - win-listview的高度是怎么设置的？ - WinJS - 2

    这让我难以自拔。我不知道如何使ListView的高度自动。即扩展ListView的高度以占据它需要的所有空间，并让外部容器提供溢出滚动功能。不幸的是，我似乎找不到任何关于此的文档。帮助会很大。谢谢! 最佳答案 默认情况下，ListView控件的高度为400像素。那是在ui-light.css文件的第1421行。您可以通过在页面上添加规则来覆盖它，例如:.win-listview{高度:100%；/*(或者你可以用'600px'之类的绝对指定)*/关于thispage在开发中心它说...SettingtheListViewcontro

  6. javascript - 在 d3.js 中有 child 朝向多边的树(类似于家谱) - 2

    vartreeData=[{"name":"Device","parent":"null"}];vartreeData2=[{"name":"Device","parent":"null"}];$(document).ready(function(){varmargin={top:20,right:120,bottom:20,left:120},width=1260-margin.right-margin.left,height=500-margin.top-margin.bottom;vari=0,duration=750,root;vartree=d3.layout.tree().

  7. javascript - react native : ListView not displaying all rows - 2

    我试图在ReactNativeListView中显示行列表，但它只显示适合单个屏幕的条目，即我无法向下滚动以查看更多行。样式如下:styles=StyleSheet.create({container:{flex:1,marginTop:60},rowContainer:{flexDirection:'row',justifyContent:'space-around'}})ListView:return({this.getHeader()})行:return({text})我做错了什么？ 最佳答案 我有同样的问题，发现外面有包装V

  8. javascript - 如何在 React-Native 中选择 ListView 的一项？ - 2

    我是React-Native的新手。我想使用ListView选择一项。当我第一次按下item时，调用了ListView的renderRow()，但是终究还是不行!这个bug怎么解决？我的问题在哪里？我在here写了一个demo 最佳答案 我最初设置了空数据源，然后将其设置为使用componentDidMount中的数据变量进行克隆。然后，在onPressRow方法中，我对数据状态变量的副本进行了必要的更改，然后通过setState方法将其设置回数据。不确定您的问题是什么，但现在可以使用了。importReact,{Component

  9. javascript - 带圆 Angular 的 Canvas drawimage - 2

    我正在使用thiscoverflow我网站上的脚本，但我不知道如何输出带圆Angular的Canvas。这是绘制图像的代码ctx.drawImage(image,cropLeft,cropTop,wid-2*cropLeft,hei-2*cropTop,0,0,newWidth,newHeight);我阅读了一些使用arc()或arcTo()函数的教程，但没有一个是我们使用图像作为对象。更新1:我看到drawimage()只有以下绘图参数:•与原件尺寸和构图相同的图像•根据原始图像调整大小•从原始图像裁剪的图像所以，我猜，不可能通过Canvas绘制圆Angular的图像..

  10. javascript - 如何在 QML 中访问 ListView 的 ListModel 的 ListElement 的映射委托(delegate)数据？ - 2

    本质上，我有一个普通的ListView:Rectangle{id:mylistListModel{id:mylistModelListElement{text:"blah1"}ListElement{text:"blah2"}ListElement{text:"blah3"}}Component{id:mylistDelegateText{id:mylistDelegateTexttext:textpropertyboolmylistDelegateTextEnabled:false}}ListView{id:mylistViewmodel:mylistModeldelegate:my

随机推荐