盒子阴影出现在其他小部件后面。

Question

我有一个页面顶部带有 BoxShadow 装饰的 Container，在这个 Container 下是一个包含多个 Card 的 ListView。我想要让顶部的 Container 有一个投影效果，且该效果显示在 ListView 中的元素前面，但实际结果如下：

投影似乎出现在了 Card 后面而不是前面。以下是代码：

Widget _buildBody(BuildContext context, ChecklistModel model){
    return Container(
        child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
                Container(
                    decoration: BoxDecoration(
                        color: Colors.red.shade200,
                        boxShadow: [BoxShadow(
                            color: Colors.red.shade200,
                            offset: Offset(0, 10),
                            blurRadius: 10,
                            spreadRadius: 10
                        )]
                    ),
                    child: ListTile(
                        title: Text(''),
                    )
                ),
                Expanded(child: Padding(
                    padding: const EdgeInsets.all(10),
                    child: _buildCheckpointListView(context, model))
                )
            ],
        )
    );
}

我还尝试用Card替换Container，但那也行不通。

- Magnus

---

我的情况是顶部小部件。因此，我通过将Container作为AppBar，并将ListView作为脚手架主体来解决问题。因此，容器阴影可以正常显示。 - omega_mi

Answer 1

这是因为您在Column中使用了一个Expanded小部件，它占据了屏幕上所有可用的空间，因此看起来似乎重叠了Container，但实际上只是重叠了阴影。

请改用Stack来显示ListView上方的Container。您可以使用Positioned小部件来定位Stack的子小部件。

但在这种情况下，请确保将Container代码放在ListView代码之后，以便始终处于顶部。 示例：

Stack(
  children: <Widget>[
    Padding(
      padding: const EdgeInsets.all(10),
      child: _buildCheckpointListView(context, model)
    ),
    Positioned(
      top: 0.0, //To align Container at the top of screen
      left: 0.0,
      right: 0.0,
      child: Container(
        decoration: BoxDecoration(
          color: Colors.red.shade200,
          boxShadow: [
            BoxShadow(
              color: Colors.red.shade200,
              offset: Offset(0, 10),
              blurRadius: 10,
              spreadRadius: 10
          )]
        ),
        child: ListTile(
          title: Text(''),
        )
     ),
    ),
  ]
)

你也可以将你的ListView包裹在一个Positioned小部件中，以便从顶部提供一定的边距。"最初的回答"

- thedarthcoder

---

不错！但是ListView肯定需要与顶部偏移，否则顶部列表项将被容器覆盖，从而无法访问。如果容器的高度未知，有什么想法可以实现这一点吗？ - Magnus

Answer 2

给容器添加底部边距，以在容器和底部兄弟元素之间引入一些空白。像这样：

        Container(
        margin: EdgeInsets.only(bottom: 20),
          decoration: BoxDecoration(
              color: Colors.red.shade200,
              boxShadow: [BoxShadow(
                  color: Colors.red.shade200,
                  offset: Offset(0, 10),
                  blurRadius: 10,
                  spreadRadius: 10
              )]
          ),
          child: ListTile(
            title: Text(''),
          )
      ),

- Ryosuke

---

这确实让它看起来更好，但它并没有真正将其他小部件放在投影后面，它只是把它们放在下面。 - Magnus

这可能有点复杂，因为在两个重叠的小部件中，布局代码中下方的小部件会覆盖前面的小部件。您可以给列表项设置小于1的不透明度。 - Ryosuke