Question

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

由于我需要在圆角处重叠，因此是否有使用堆栈和定位的某种实现方式？

Answer 1

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

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(),
      ),
    );
  }

ListItem的代码

Widget build(BuildContext context) {
return Container(
  height: 100,
  width: MediaQuery.of(context).size.width,
  child: Material(
    color: color,
    borderRadius: BorderRadius.only(bottomLeft: Radius.circular(40.0)),
    child: InkWell(
      onTap: onTap,
      child: Align(
        alignment: Alignment.bottomCenter,
        child: Padding(
          padding: EdgeInsets.only(bottom: 10),
          child: Text(
            text,
            style: TextStyle(color: Colors.white, fontSize: 20),
          ),
        ),
      ),
    ),
  ),
);

}

结果：

Answer 2

我找到了一种无需使用堆栈和定位的方法。

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

具有圆角的ListView

2 个答案: