美文网首页iOS 技巧
Flutter 学习 之 修改 状态栏( StatusBar)

Flutter 学习 之 修改 状态栏( StatusBar)

作者: 半城半离人 | 来源:发表于2022-04-23 23:31 被阅读0次

    最近写项目发现android的状态栏默认是灰色半透明的这个和主题颜色不太符合 所以找到了几种方法修改

    1. 如果你 只有一种固定颜色 那么可以直接在Main函数下面修改你需要的颜色

    • 注意修改的颜色必须是Matrial风格的颜色
    void main() {
      runApp(MyApp());
      SystemChrome.setSystemUIOverlayStyle(
        SystemUiOverlayStyle.light.copyWith(
          statusBarColor: Colors.transparent,//这里替换你选择的颜色
        ),
      );
    }
    

    你可以通过以下方法创造Matrial风格颜色

      ///创建Material风格的color
      static MaterialColor createMaterialColor(Color color) {
        List strengths = <double>[.05];
        Map swatch = <int, Color>{};
        final int r = color.red, g = color.green, b = color.blue;
    
        for (int i = 1; i < 10; i++) {
          strengths.add(0.1 * i);
        }
        for (var strength in strengths) {
          final double ds = 0.5 - strength;
          swatch[(strength * 1000).round()] = Color.fromRGBO(
            r + ((ds < 0 ? r : (255 - r)) * ds).round(),
            g + ((ds < 0 ? g : (255 - g)) * ds).round(),
            b + ((ds < 0 ? b : (255 - b)) * ds).round(),
            1,
          );
        }
        return MaterialColor(color.value, swatch as Map<int, Color>);
      }
    

    2.如果你有换肤的需求,但是页面都有使用AppBar 那你可以将StatusBar的颜色修改为透明 这样做切换主题不会变色有先后顺序

    ///将这段文字放置在MyApp 页面的Builder下
      SystemChrome.setSystemUIOverlayStyle(
        SystemUiOverlayStyle.light.copyWith(
          statusBarColor: Colors.transparent,//这里替换你选择的颜色
        ),
      );
    

    3. 如果你有使用SafeArea来包裹组件你会发现上面的设置会让status变成白色你可以这样设置:

      return Scaffold(
        backgroundColor: Colors.blue,//这里是你期望的颜色
        body: SafeArea(child: ,),
      )
    

    4.当然有更优雅的解决方法就是在设置万主题颜色后执行上面的方法就不用Scaffold包裹了,但是会出现statusBar先变色 主题后变色的问题..

    //设置主题
      set theme(ThemeMode themeMode) {
        CacheUtil().setString(SPName.themeModel, themeMode.value);
        _themeMode = themeMode;
        bottomNavigatorColor(isChangeBottomNavigatorColor);
        notifyListeners();
      }
    

    5. 当然也可以设置底部android 的导航栏颜色

      void bottomNavigatorColor(bool isTrue) {
        CacheUtil().setBool(SPName.bottomNavigatorChange, isTrue);
    
        //跟随改变的
        Brightness brightness;
        //不跟随改变
        Brightness notChaneBrightness;
        if (Platform.isIOS) {
          brightness = isDark() ? Brightness.dark : Brightness.light;
          notChaneBrightness = Brightness.dark;
        } else {
          brightness = isDark() ? Brightness.light : Brightness.dark;
          notChaneBrightness = Brightness.light;
        }
        SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light.copyWith(
          statusBarColor: primaryColor,
          statusBarBrightness: brightness,
          systemNavigationBarColor: isTrue ? Colors.black : primaryColor,
          systemNavigationBarIconBrightness:
              isTrue ? notChaneBrightness : brightness,
        ));
      }
    

    相关文章

      网友评论

        本文标题:Flutter 学习 之 修改 状态栏( StatusBar)

        本文链接:https://www.haomeiwen.com/subject/doezertx.html