在其他小部件上飘动阴影

Question

我的基本小部件是一个列。第一个元素是具有 BoxShadow 的 Container。第二个元素是一个 ListView，它根据上下文构建多个 Card。如果滚动为 0，则显示阴影。然而，当开始滚动时，卡片“超过”阴影（较高的 z-index）并将其隐藏。

展开

滚动

阴影应始终位于卡片上方。这是怎么做的？

Answer 1

根据你的问题，这是这里出了问题的概念。

的第一个孩子Column是Container with shadow。Shadow渲染超出定义的尺寸。如果在此之后不提供任何空间，Container我们将无法看到阴影。这个空间可以通过Container margin,SizedBox或wrapping our list with Padding . But now our main question is how we get shadow while index=0 . I believe it is coming from ListChildren` 来完成。它们包含上部空间，这就是为什么我们只能第一次看到。

在 Ui 上，渲染优先级从下到上开始。

如何解决这个问题：我们可以在容器底部提供空间或分配margin（不是填充），或者在提供与 相同的高度SizedBox 后使用 a 。containershadow

1. margin在容器上提供底部。
2. 添加一个带有阴影高度的 SizedBox。
3. 用 包装我们的列表并Padding提供top:.

在这张图片中，我们的shadow: white, background:amber.

演示代码：

import 'package:flutter/material.dart';

class ColumnWithContainerShadow extends StatelessWidget {
  const ColumnWithContainerShadow({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.amber,
      body: Column(
        children: [
          Container(
            height: 50,
            width: double.infinity,
            ////* we dont need margin if we have padding on ListView
            // margin: EdgeInsets.only(bottom: 12),
            decoration: BoxDecoration(
              color: Colors.green,
              boxShadow: [
                BoxShadow(
                  offset: Offset(0, 12),
                  color: Colors.white,
                )
              ],
            ),
            child: Center(child: Text("Container A")),
          ),
          Expanded(
            child: Padding(
              padding: const EdgeInsets.only(top: 12),
              child: ListView(
                children: [
                  ...List.generate(
                    333,
                    (index) => Container(
                      /// enable this margine and remove other spaces to see 1st child shadow.(shadow depend on children position)
                      // margin: EdgeInsets.only(top: 12),
                      height: 60,
                      color: Colors.deepPurple,
                      child: Text("$index"),
                    ),
                  )
                ],
              ),
            ),
          ),
          Container(
            height: 50,
            width: double.infinity,
            alignment: Alignment.center,
            decoration: BoxDecoration(
              color: Colors.green,
              boxShadow: [
                BoxShadow(
                  offset: Offset(0, 12),
                  color: Colors.white,
                )
              ],
            ),
            child: Text("Bottom Container"),
          ),
          // Comment to close shadow
          SizedBox(
            height: 20,
          )
        ],
      ),
    );
  }
}