flutter - 带圆边的 ListView

Question

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

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

Answer 1

我找到了一种不使用 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),
                  ),
                ),
              ),
           );
        },
      ),
    );
  }
}