Flutter 3带有透明阴影的透明AppBar颜色仍然可见

f3temu5u  于 2023-05-29  发布在  Flutter
关注(0)|答案(4)|浏览(424)

我正试图用一个透明的AppBar来做一个屏幕布局,AppBar必须滚动它下面的内容。
问题是,当滚动内容时,AppBar显示阴影shadowColor,但它被设置为透明色。
编辑:我注意到这是因为在我的应用程序主题中将useMaterial 3设置为true。
我用的是Flutter 3.0.2。
这是我的代码:

Stack(
        fit: StackFit.expand,
        children: [
          //AuthBackground(),
          Container(color: Colors.brown,),
          Theme(
            data: AppStyles.mainDarkTheme.copyWith(
              textTheme: AppStyles.mainDarkTheme.textTheme.apply(
                bodyColor: Colors.blue,
                displayColor: Colors.blue,
              )
            ),
            child: Scaffold(
              backgroundColor: Colors.transparent,
              extendBodyBehindAppBar: true,
              appBar: AppBar(
                backgroundColor: Colors.transparent,
                shadowColor: Colors.transparent,
                elevation: 0.0,
                bottomOpacity: 0.0,
              ),
              body: _content(),
            ),
          ),
        ],
      )

这里有一张图片,当内容滚动时,你可以注意到AppBar上的阴影:

先谢谢你了!

axr492tv

axr492tv1#

我终于明白了。
我在post上回答自己:
我也有同样的问题。
在我的例子中,我有一个透明背景的AppBar和一个Scaffold,其中extendBodyBehindAppBar设置为true。
我尝试使用shadowColor和surfaceTintColor与Colors.transparent值,但阴影仍然可见。
然后我注意到AppBar的scrolledUnderElevation属性。将其设置为0.0是解决方案。

brqmpdu1

brqmpdu12#

设置高程= 0对我有效

appBar: AppBar(
    elevation: 0,
    backgroundColor: Colors.transparent,
    shadowColor: Colors.transparent,
cngwdvgl

cngwdvgl3#

这是因为默认的elevation属性设置为appbar。因此,简单的解决方案是设置elevation属性。如下所示

elevation: 0,

就这样了。

bweufnob

bweufnob4#

必须将AppBar的scrolledUnderElevation属性设置为0

AppBar(
  elevation: 0,
  shadowColor: Colors.transparent,
  backgroundColor: Colors.transparent,
  scrolledUnderElevation: 0,
)

相关问题