Question

我希望每个项目都具有阴影，并且每个项目都应与下一个兄弟的顶部重叠。

Answer 1

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

我为此找到的最佳解决方案（不求助于手动管理的堆栈）是使用高度因子小于1的Align widget。这将导致下一项与上一项重叠。

以下是完成这项工作的关键要素：

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

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

Answer 2

用 OverflowBox 包裹您的元素并赋予 maxHeight 值将实现此效果。

 return SizedBox(
            height: 35, //--> list children will be 35 in height
            child: OverflowBox(
              maxHeight: 50, // --> allowing the child to overflow will cause overlap between elements
              child: Container(
                height: 50,
                child: Text((index + 1).toString()),
              ),
            ),
          );

Answer 3

您可以使用elevation和padding顶部来达到想要的效果：

             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的

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

如何在ListView中重叠项目？

3 个答案: