美文网首页Flutter
flutter 完全使用GetX 主题切换 以及 自创建Widg

flutter 完全使用GetX 主题切换 以及 自创建Widg

作者: 帅气的阿斌 | 来源:发表于2021-08-06 17:04 被阅读0次
    序:原生的主题切换只能切换属性对应的固定部件,自己继承创建的文字颜色或者背景色无法跟随主题切换而切换

    这篇将会解决手动切换主题以及跟随手机切换主题来更新UI(包括自己创建的Widget)

    一、原生主题支持的属性切换主题

    factory ThemeData({
        Brightness brightness, // 应用主题亮度,可选(dark、light)
        VisualDensity visualDensity, // 视觉密度
        MaterialColor primarySwatch, // 主要样式,设置primaryColor后该背景色会被覆盖
        Color primaryColor, // 主要部分背景颜色(导航和tabBar等)
        Brightness primaryColorBrightness, // primaryColor的亮度
        Color primaryColorLight, // primaryColor的浅色版
        Color primaryColorDark, // primaryColor的深色版
        Color accentColor, // 前景色(文本,按钮等)
        Brightness accentColorBrightness, // accentColor的亮度
        Color canvasColor, // MaterialType.canvas 的默认颜色
        Color shadowColor, // 阴影颜色
        Color scaffoldBackgroundColor, // Scaffold的背景颜色。典型Material应用程序或应用程序内页面的背景颜色
        Color bottomAppBarColor, // BottomAppBar的默认颜色
        Color cardColor, // Card的颜色
        Color dividerColor, // Divider和PopupMenuDivider的颜色,也用于ListTile之间、DataTable的行之间等。
        Color focusColor, // 突出颜色
        Color hoverColor, //  hoverColor
        Color highlightColor, // 高亮颜色,选中在泼墨动画期间使用的突出显示颜色,或用于指示菜单中的项。
        Color splashColor, // 墨水飞溅的颜色。InkWell
        InteractiveInkFeatureFactory splashFactory, // 定义由InkWell和InkResponse反应产生的墨溅的外观。
        Color selectedRowColor, // 用于突出显示选定行的颜色。
        Color unselectedWidgetColor, // 用于处于非活动(但已启用)状态的小部件的颜色。例如,未选中的复选框。通常与accentColor形成对比。也看到disabledColor。
        Color disabledColor, // 禁用状态下部件的颜色,无论其当前状态如何。例如,一个禁用的复选框(可以选中或未选中)。
        Color buttonColor, // RaisedButton按钮中使用的Material 的默认填充颜色。
        ButtonThemeData buttonTheme, // 定义按钮部件的默认配置,
        ToggleButtonsThemeData toggleButtonsTheme, // 切换按钮的主题
        Color secondaryHeaderColor, // 选定行时PaginatedDataTable标题的颜色。
        Color textSelectionColor, // 文本框中文本选择的颜色,如TextField
        Color cursorColor, // 文本框中光标的颜色,如TextField
        Color textSelectionHandleColor, // 调整当前选定的文本部分的句柄的颜色。
        Color backgroundColor, // 与主色形成对比的颜色,例如用作进度条的剩余部分。
        Color dialogBackgroundColor, // Dialog元素的背景颜色
        Color indicatorColor, // 选项卡中选定的选项卡指示器的颜色。
        Color hintColor, // 用于提示文本或占位符文本的颜色,例如在TextField中。
        Color errorColor, // 用于输入验证错误的颜色,例如在TextField中
        Color toggleableActiveColor, // 用于突出显示Switch、Radio和Checkbox等可切换小部件的活动状态的颜色。
        String fontFamily, // 文本字体
        TextTheme textTheme, // 文本的颜色与卡片和画布的颜色形成对比。
        TextTheme primaryTextTheme, // 与primaryColor形成对比的文本主题
        TextTheme accentTextTheme, // 与accentColor形成对比的文本主题。
        InputDecorationTheme inputDecorationTheme, // 基于这个主题的 InputDecorator、TextField和TextFormField的默认InputDecoration值。
        TabBarTheme tabBarTheme, // 用于自定义选项卡栏指示器的大小、形状和颜色的主题。
        TooltipThemeData tooltipTheme, // tooltip主题
        CardTheme cardTheme, // Card的颜色和样式
        AppBarTheme appBarTheme, // appBar主题
        ColorScheme colorScheme, // 拥有13种颜色,可用于配置大多数组件的颜色。
        NavigationRailThemeData navigationRailTheme, // 导航边栏主题
        // ...
      })
    
    

    代码

    import 'dart:ui';
    
    import 'package:flutter/material.dart';
    import 'package:get/get.dart';
    
    // //国际化
    // return GetMaterialApp(
    // .......
    // .......
    //设置默认主题 深色主题 通过 Get.changeThemeMode 直接来切换
    // theme: appLightThemeData,
    // darkTheme: appDarkThemeData,
    //themeMode: ThemeMode.light,
    
    //创建Dark ThemeData对象
    final ThemeData appDarkThemeData = ThemeData(
        brightness: Brightness.dark,
        primaryColor: Colors.red, // 主要部分背景颜色(导航和tabBar等)
        scaffoldBackgroundColor:
            Colors.red, //Scaffold的背景颜色。典型Material应用程序或应用程序内页面的背景颜色
        textTheme: TextTheme(headline1: TextStyle(color: Colors.yellow, fontSize: 15)),
        appBarTheme: AppBarTheme(iconTheme: IconThemeData(color: Colors.yellow)));
    
    //创建light ThemeData对象
    final ThemeData appLightThemeData = ThemeData(
        brightness: Brightness.light,
        primaryColor: Colors.white, // 主要部分背景颜色(导航和tabBar等)
        scaffoldBackgroundColor:
            Colors.white, //Scaffold的背景颜色。典型Material应用程序或应用程序内页面的背景颜色
        textTheme: TextTheme(headline1: TextStyle(color: Colors.blue, fontSize: 15)),
        appBarTheme: AppBarTheme(iconTheme: IconThemeData(color: Colors.black)));
    
    class GetXThemes extends StatelessWidget {
      const GetXThemes({Key? key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text("主题"),
          ),
          body: Center(
            child: TextButton(
              onPressed: () {
                //直接设置Theme
                Get.changeTheme(
                    Get.isDarkMode ? appLightThemeData : appDarkThemeData);
                //设置ThemeMode
                // Get.changeThemeMode(ThemeMode.dark);
              },
              child: Text(
                  "更换主题",
                  style: Get.textTheme.headline1,//这里有个问题,就是主题切换,这里的Text并不会更新
                ),
            ),
          ),
        );
      }
    }
    
    

    二、自创建Widget的颜色随主题变化方案

    主题切换有个问题,就是如果是我们自定义或者在build()自己创建的部件是不会随着系统的主题切换而发生主题色变化的(实际测试中,如果页面在顶层(没有被push)切换主题并不会触发build()方法,(push之后的页面切换系统主题是可以触发build()的,而且会频繁触发好多次...),既然无法通过重新build更新组件的主题色,那么我们在切换主题后,强制触发整个app的build()就可以了)

    • 1.Get.forceAppUpdate();强制触发build()
      这个方法是从Getx国际化更换语言里找到的Get.updateLocale(Locale("en"));
    //手动切换主题
      Get.changeThemeMode( Get.isDarkMode ? ThemeMode.light : ThemeMode.dark);
      //这里要设置个延迟,在调用切换主题后并不能立刻生效,会有点延迟,
      // 如果不设置延迟会导致取的还是上个主题状态
      Future.delayed(Duration(milliseconds: 250), () {
      //强制触发 build
        Get.forceAppUpdate();
          if (Get.isDarkMode) {
            print("转换后 darkMode");
          } else {
            print("转换后 lightMode");
          }
        });
    
    • 2.小尾巴-到了这里看似已经没问题了,但是还有一个忽略的地方,就是在设置主题时,还有一个选项就是跟随系统themeMode: ThemeMode.system,,就是用户在手机上设置了主题,app的主题跟随手机设置走,那我们自定义的组件就又不能够跟随切换主题色了.解决办法就是监听手机的主题切换,如下创建一个单例,这个单例只要在WidgetsFlutterBinding.ensureInitialized();后初始化即可,否则WidgetsBinding.instance可能为null
    void main() {
      //确保 WidgetsBinding.instance 后续使用没有问题
      WidgetsFlutterBinding.ensureInitialized();
      runApp(MyApp());
    }
    
    class AppLifeCycleDelegate with WidgetsBindingObserver {
      static final AppLifeCycleDelegate _appLifeCycleDelegate =
          AppLifeCycleDelegate._inital();
      AppLifeCycleDelegate._inital() {
        print("初始化生命周期代理");
        WidgetsBinding.instance?.addObserver(this);
      }
      factory AppLifeCycleDelegate() {
        return _appLifeCycleDelegate;
      }
    
      @override
      void didChangePlatformBrightness() {
        // TODO: implement didChangePlatformBrightness
        super.didChangePlatformBrightness();
        print("手机主题发生变化");
        //强制触发 build
        Get.forceAppUpdate();
      }
    }
    

    相关文章

      网友评论

        本文标题:flutter 完全使用GetX 主题切换 以及 自创建Widg

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