如何重叠 ListView 中的项目？

Question

我想在每个项目上有一个阴影，并且每个项目应该与下一个同级项目的顶部重叠。

Answer 1

对于原始海报来说可能为时已晚，但也许它会帮助其他人寻找这个：

我发现的最佳解决方案（不诉诸手动管理的堆栈）是使用高度系数小于 1 的对齐小部件。这将导致下一个项目与前一个项目重叠。

以下是实现这项工作的关键要素：

final elements = ['A', 'B', 'C'];
final padExtend = 16.0;

final media = MediaQuery.of(context);

return ListView.builder(
  itemCount: elements.length,
  itemBuilder: (BuildContext context, int index) {
    final String content = elements[index];
  
    return Align(
      child: Container(
        width: media.size.width - padExtend / 2.0,
        padding: EdgeInsets.all(padExtend),
        decoration: BoxDecoration(
          boxShadow: [
            BoxShadow(color: Colors.grey, spreadRadius: 3, blurRadius: 3, offset: Offset(2, 1)),
          ],
          color: Colors.white,
        ),
        child: Text(content),
      ),
      alignment: Alignment.topCenter,
      heightFactor: 0.9,
    );
  },
);

由于对齐会使元素居中，因此使用媒体查询来设置固定宽度。

Answer 2

您可以使用 aelevation和paddingtop 来达到您想要的效果：

             ListView.builder(
                      itemCount: 5,
                      itemBuilder: (BuildContext content, int index) {
                        return Padding(
                          padding: const EdgeInsets.only(top: 8.0),
                          child: Material(
                            elevation: 5.0,
                            child: new Container(
                              height: 100.0,
                            ),
                          ),
                        );
                      })

如果你想重叠你的项目，只需使用低于 1.0 的 heightFactor

           return Align(
                    alignment: Alignment.topLeft,
                    heightFactor: 0.9,
                    child: your item...