繁体   English   中英

如何更改 AppBar 的阴影颜色?

[英]How to change shadow color of AppBar?

我正在尝试更改AppBar阴影高度颜色,但找不到任何属性。 我也去了原来的实现,但找不到任何属性来改变阴影颜色。

AppBar(
        title: Image.asset(
          "images/toolbar_logo.webp",
          width: 80,
          height: 50,
        ),
        centerTitle: true,
        backgroundColor: white,
      ),

我无法将AppBar包裹在Material Widget 我知道我可以避免使用 app bar 属性并创建一个自定义类并将其添加到我的Scaffold主体中,但是是否可以使用AppBar阴影颜色进行更改?

没有办法改变默认阴影的颜色,但你可以通过将你的AppBar包装在一个位于PreferredSize小部件内的Container中来解决它:

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: PreferredSize(
          child: Container(
            decoration: BoxDecoration(boxShadow: [
              BoxShadow(
                color: Colors.red,
                offset: Offset(0, 2.0),
                blurRadius: 4.0,
              )
            ]),
            child: AppBar(
              elevation: 0.0,
              title: Text("Test"),
            ),
          ),
          preferredSize: Size.fromHeight(kToolbarHeight),
        ),
        body: Container(),
      ),
    );
  }
}

您可以使用 Appbar 的 shadowColor 属性为应用栏下方的阴影着色。

接受的答案有点过期。 您可以通过两种方式执行此操作:

直接通过AppBar属性更改:

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(shadowColor: Colors.green),
        body: Container(),
      ),
    );
  }
}

或者通过使用Theme

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        appBarTheme: AppBarTheme(
          shadowColor: Colors.white,
        ),
      ),
      home: Scaffold(
        appBar: AppBar(),
        body: Container(),
      ),
    );
  }
}

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM