如何在 ListView.builder Flutter 中的容器上方放置阴影？

Question

我有一个 ListView.builder，我想在其中显示带阴影的容器。我想要一个容器的影子覆盖另一个容器。 Example of how it should looks。使用 Stack 小部件很容易做到，但我不知道如何在 ListView.builder.

中做到这一点

适合我的解决方案

我决定使用 CustomScrollView 而不是使用 ListView，它以 slivers 作为参数。在 slivers 中，我正在映射一个项目列表和 return 我的容器用 SliverToBoxAdapter 包裹。我不知道它到底是如何工作的，但它对我来说很好用。

CustomScrollView(
  slivers: [
    ...names.map(
      (e) => SliverToBoxAdapter(
        child: Center(
          child: CustomContainer(
            child: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text('Container #${e['name']}'),
                  Text('Age is ${e['age']} y.o.')
                ],
              ),
            ),
          ),
        ),
      ),
    ),
  ],
),

Answer 1

可以使用listview的index，根据index给不同的card elevation

 ListView.builder(
          itemCount:10,
          shrinkWrap: true,
          itemBuilder: (ctx, i) {
            return Card(
              elevation: (i%2 == 1)?10 :0,
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Row(
                  crossAxisAlignment:CrossAxisAlignment.center,
                  mainAxisAlignment:MainAxisAlignment.center,
                  children: [
                    Text("Container $i"),
                  ],
                ),
              ),
            );
          }),

Answer 2

// 如果滚动视图在其他小部件上溢出，则使用 ClipRRect With Expanded。

ClipRRect(
child: Expanded(
child: CustomScrollView(
clipBehavior: Clip.none, //add this line inside CustomScrollView
  slivers: [
    ...names.map(
      (e) => SliverToBoxAdapter(
        child: Center(
          child: CustomContainer(
            child: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text('Container #${e['name']}'),
                  Text('Age is ${e['age']} y.o.')
                ],
              ),
            ),
          ),
        ),
      ),
    ),
  ],
),),),

我遇到了同样的问题，我用这个技巧解决了。

如何在 ListView.builder Flutter 中的容器上方放置阴影？

How to put a shadow above containers inside ListView.builder Flutter?

layout

dart

flutter