Boxshadow出现在其他小部件的后面 [英] Boxshadow appears behind other widgets

问题描述

我有一个Container，在页面顶部带有BoxShadow装饰，在Container之下是一个ListView，其中包含许多Cards.我希望顶部Container有一个阴影出现在ListView中各项的前面，但这就是我得到的:

I have a Container with a BoxShadow decoration at the top of a page, and below the Container is a ListView with a number of Cards in it. I want the top Container to have a drop shadow that appears in front of the items in the ListView, but this is what I get:

投影阴影似乎出现在Cards后面而不是前面.这是代码:

The drop shadow seems to appear behind the Cards instead of in front of it. This is the code:

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，但这也不起作用.

I also tried replacing the Container with a Card, but that didn't work either.

推荐答案

之所以会这样，是因为由于您在Column中使用了Expanded小部件，因此它占用了屏幕上的所有可用空间，因此看起来就像它与Container重叠，但实际上它只是与阴影重叠.

It is happening because since you are using an Expanded widget inside Column, it is taking up all the available space on the screen and hence it looks like it is overlapping the Container but actually it's just overlapping the shadow.

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

Instead of a Column widget, use a Stack to show the Container above the ListView. You can use Positioned widget to position the child widgets of the Stack.

但是在这种情况下，请确保将Container代码放在ListView代码之后，以使其始终位于顶部.

But in this case, make sure you put the Container code after the ListView code so that it would always be on top.

示例:

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小部件中.

You can also wrap you ListView inside a Positioned widget if you want to provide a certain margin from top.

这篇关于Boxshadow出现在其他小部件的后面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！