flutter - 如何在 ListView 中重叠项目？

Question

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

Answer 1

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

我找到的最佳解决方案(无需借助手动管理的堆栈)是使用 Align widget高度因子小于 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,
    );
  },
);

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