Question

我在页面顶部有一个Container装饰为BoxShadow，在Container下方是一个ListView，其中有多个Cards在里面。我希望顶部Container的阴影出现在ListView中各项的前面，但这是我得到的：

阴影似乎出现在Cards后面而不是前面。这是代码：

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

我还尝试将Container替换为Card，但这也不起作用。

Answer 1

在容器的底部留出一定的空白，以在容器和底部兄弟姐妹之间引入一些空白空间。像这样：

        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(''),
          )
      ),

Answer 2

之所以发生这种情况，是因为由于您在Expanded内使用Column小部件，它占用了屏幕上的所有可用空间，因此看起来好像与Container重叠但实际上它只是与阴影重叠。

使用Column代替Stack小部件，在Container上方显示ListView。您可以使用Positioned小部件来放置堆栈的子小部件。

但是在这种情况下，请确保将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小部件中。

Boxshadow出现在其他小部件的后面

2 个答案: