带有圆角边缘的 ListView

Question

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

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

Answer 1

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

我使用 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),
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}