Flutter 具有圆角边的ListView

在颤振中使用角边实现以下ListView的最佳方法是什么

由于我需要在圆角上重叠，是否有使用堆栈的特定实现，并为此进行了定位

---

使用堆栈，然后计算每个项目的位置

List<Color> colorsList = [Colors.red, Colors.green, Colors.blue];


  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Stack(
        children: colorsList.reversed
            .map(
              (color) => Positioned(
                    top: colorsList.indexOf(color).toDouble() * 60,
                    child: ListItem(
                      color: color,
                      text: "Animation",
                      onTap: _goToAnimationPage,
                    ),
                  ),
            )
            .toList(),
      ),
    );
  }

}

结果是：

---

我找到了一种不用堆栈和定位的方法

我使用ListView.builder（）创建了一个ListView，每行是两个容器（父容器和子容器）。底部容器（父容器）从数组（索引+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: new BoxDecoration(
                borderRadius:
                    BorderRadius.only(bottomLeft: Radius.circular(85.0)),
                color: colours[index],
              ),
              child: Center(
                child: Text(
                  index.toString(),
                  style: TextStyle(color: Colors.white, fontSize: 50),
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}

列出颜色=[
颜色，红色，
颜色，绿色，
颜色，蓝色，
颜色，琥珀色，
颜色，棕色，
颜色，深紫色，
];
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar(
标题：文本（“你好”），
),
正文：ListView.builder(
物品数量：颜色、长度、，
itemBuilder：（上下文，索引）{
返回容器（//这是后容器，它将在圆边上显示下一个单元格颜色
颜色：索引+1

---

嗨@Assim，到目前为止你都试过什么？是的，可以用Stack和positioned来实现这一点，但这不是ListView。你需要卷轴吗？惰性加载？您好@gaborandx，我正在阅读有关堆栈和定位的文章，因为我还没有练习过。是的，我很想知道如何做到这一点，并使它与延迟加载滚动请。这是一个非常好的实现，但问题是它的列表中的固定数量的项目。是否有一种方法可以用于未知数量的项目。假设数据来自API，我希望它动态显示更多的项。当然，您也可以动态显示。只需计算高度并使用地图功能。

  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: new BoxDecoration(
                borderRadius:
                    BorderRadius.only(bottomLeft: Radius.circular(85.0)),
                color: colours[index],
              ),
              child: Center(
                child: Text(
                  index.toString(),
                  style: TextStyle(color: Colors.white, fontSize: 50),
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}