在Flutter中进入黑暗模式时,改变系统导航和状态栏的颜色

imzjd6km  于 2023-05-19  发布在  Flutter
关注(0)|答案(3)|浏览(174)

我想在进入黑暗模式时更改系统导航和状态栏的颜色。
这是我的代码:

void main() async {
SystemChrome.setSystemUIOverlayStyle(
SystemUiOverlayStyle(
  statusBarBrightness: Brightness.dark,
  statusBarColor: Colors.white,
  statusBarIconBrightness: Brightness.dark,
  systemNavigationBarColor: Colors.white,
  systemNavigationBarDividerColor: Colors.white,
  systemNavigationBarIconBrightness: Brightness.dark,
),
);
...
}

我使用SystemChrome,它工作得很好。但我的问题是,我只能通过代码改变颜色手册,而不是当切换到黑暗或光明模式或当我使用系统设置。

gcxthw6b

gcxthw6b1#

你可以像这样改变主题。

MaterialApp(
    themeMode: ThemeMode.light, // Change it as you want
    theme: ThemeData(
        primaryColor: Colors.white,
        primaryColorBrightness: Brightness.light,
        brightness: Brightness.light,
        primaryColorDark: Colors.black,
        canvasColor: Colors.white,
        // next line is important!
        appBarTheme: AppBarTheme(brightness: Brightness.light)),
    darkTheme: ThemeData(
        primaryColor: Colors.black,
        primaryColorBrightness: Brightness.dark,
        primaryColorLight: Colors.black,
        brightness: Brightness.dark,
        primaryColorDark: Colors.black,      
        indicatorColor: Colors.white,
        canvasColor: Colors.black,
        // next line is important!
        appBarTheme: AppBarTheme(brightness: Brightness.dark)),
...
bn31dyow

bn31dyow2#

在尝试了很多事情之后,我找到了以下解决问题的方法。我不知道这是不是最干净的解决方案,但它确实有效。对于那些不像我这样使用AppBar的人来说,这个解决方案很有趣。
诀窍如下。。

@override
Widget build(BuildContext context) {
 Theme.of(context).scaffoldBackgroundColor == Colors.white
    ? _lightStatusAndNavigationBar()
    : _darkStatusAndNavigationBar();
return Scaffold(
      backgroundColor: Theme.of(context).scaffoldBackgroundColor,
...
}

这个查询在我的类的构建中,在这个类中我有我的应用程序的NavigationBar。所有其他屏幕都连接在那里。
使用Theme.of(context).scaffoldBackgroundColor,我询问状态栏和导航栏应该使用哪种设计。
以下是不同颜色的两个函数:

void _darkStatusAndNavigationBar() {
SystemChrome.setSystemUIOverlayStyle(
  SystemUiOverlayStyle(
    statusBarBrightness: Brightness.light,
    statusBarColor: Colors.grey.shade900,
    statusBarIconBrightness: Brightness.light,
    systemNavigationBarColor: Colors.grey.shade900,
    systemNavigationBarDividerColor: Colors.grey.shade900,
    systemNavigationBarIconBrightness: Brightness.light,
  ),
);
}

 void _lightStatusAndNavigationBar() {
SystemChrome.setSystemUIOverlayStyle(
  SystemUiOverlayStyle(
    statusBarBrightness: Brightness.dark,
    statusBarColor: Colors.white,
    statusBarIconBrightness: Brightness.dark,
    systemNavigationBarColor: Colors.white,
    systemNavigationBarDividerColor: Colors.white,
    systemNavigationBarIconBrightness: Brightness.dark,
  ),
);
}

如果还有什么不明白的,就问吧。:)

zaq34kh6

zaq34kh63#

考虑使用AnnotatedRegion小部件。

@override
Widget build(BuildContext context) {
    return AnnotatedRegion<SystemUiOverlayStyle>(
        value: getSystemUIOverlayStyle(context),
        child: Scaffold(
            appBar: _appBar(context),
            body: _body(context),
        ),
    );
}

以及基于上下文的getSystemUIOverlayStyle方法。

SystemUiOverlayStyle getSystemUIOverlayStyle(BuildContext context) {
    final theme = Theme.of(context);
    return SystemUiOverlayStyle(
      systemNavigationBarColor: theme.colorScheme.surface,
      systemNavigationBarDividerColor: theme.colorScheme.surface,
      systemNavigationBarIconBrightness: theme.brightness == Brightness.light ? Brightness.dark : Brightness.light,
    );
}

更多详情https://api.flutter.dev/flutter/services/SystemChrome/setSystemUIOverlayStyle.html

相关问题