阅读 487

Flutter改变状态栏字体、状态栏背景颜色、Appbar背景颜色的方式

1. 改变状态栏字体颜色

有2种方式,注意这里只能改变状态栏字体颜色为白色或者黑色

void main() {
  runApp(
    MaterialApp(
      home: App(),
    ),
  );
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Theme(
      data: ThemeData(
        appBarTheme: AppBarTheme.of(context).copyWith(
          // 方式1
          brightness: Brightness.light,
        ),
      ),
      child: Scaffold(
        appBar: AppBar(
          // 方式2,在这里设置的话会覆盖上面的方式1
          brightness: Brightness.dark,
        ),
        body: Container(),
      ),
    );
  }
}
复制代码

2. 单独改变状态栏背景颜色

单独改变状态栏颜色很简单


SystemUiOverlayStyle uiStyle = SystemUiOverlayStyle.light.copyWith(
  statusBarColor: Colors.red,
);

void main() {
  // 单独改变状态栏颜色
  SystemChrome.setSystemUIOverlayStyle(uiStyle);
  runApp(
    MaterialApp(
      home: App(),
    ),
  );
}
复制代码

3. 同时改变状态栏背景颜色和AppBar背景颜色

void main() {
  runApp(
    MaterialApp(
      home: App(),
    ),
  );
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Theme(
      data: ThemeData(
        appBarTheme: AppBarTheme.of(context).copyWith(
          // 方式1
          color: Colors.yellow,
        ),
      ),
      child: Scaffold(
        appBar: AppBar(
          // 方式2,在这里设置的话会覆盖上面的方式1
          backgroundColor: Colors.deepPurpleAccent,
        ),
        body: Container(),
      ),
    );
  }
}
复制代码

总结

在这里强调一下,为什么会有属性被覆盖的情况,其实看源码就知道,在_AppBarStatebuild方法里,如果brightnessnull,就会使用appBarTheme.brightness,而appBarTheme是通过AppBarTheme.of(context)获取的,而该方法的实现实际是Theme.of(context).appBarThemebackgroundColor同理,如果该属性为null,就会使用theme.primaryColor,而themeTheme.of(context)获取的。

还有一个地方要注意,如果同时使用SystemChrome.setSystemUIOverlayStyle(uiStyle)方法和3. 同时改变状态栏背景颜色和AppBar背景颜色,则SystemChrome.setSystemUIOverlayStyle(uiStyle)设置的颜色会覆盖3. 同时改变状态栏背景颜色和AppBar背景颜色方法中设置的状态栏颜色,所以如果同时使用的话就可以达到单独设置状态栏颜色和AppBar背景颜色的效果了。

  /// The [ThemeData.appBarTheme] property of the ambient [Theme].
  static AppBarTheme of(BuildContext context) {
    return Theme.of(context).appBarTheme;
  }
复制代码