Flutter ThemeData尝试 2022-11-28 周

简介

自定义的颜色系统存在更新的问题，暂时还没有很好的接近方案。
那么，相对应的，使用系统提供的ThemeData也是一种方案。

自定义颜色

ThemeExtensions 是在Flutter 3.0 中ThemeData类中新增的对象，通过它可以扩展自己想自定义的属性字段。

• 定义一些字符串，作为map的key

class ColorSring {
  static String colffffff = "ffffff";
  static String col000000 = "000000";
  static String colefedf3 = "efedf3";
  static String col333333 = "333333";
}

• 自定义一个类，分为浅色和深色两套，统一通过字符串的key取颜色

/// 自定义的颜色
class CustomColor extends ThemeExtension<CustomColor> {
  final bool isDarkMode;

  CustomColor(this.isDarkMode);

  /// 这两个方法都不实现，简单返回自身
  @override
  ThemeExtension<CustomColor> copyWith() {
    return this;
  }

  @override
  ThemeExtension<CustomColor> lerp(
      ThemeExtension<CustomColor>? other, double t) {
    return this;
  }

  /// 自定义的颜色
  Map<String, Color> lightInfo = {
    ColorSring.colffffff: const Color(0xffffffff),
    ColorSring.col000000: const Color(0xff000000),
    ColorSring.colefedf3: const Color(0xffefedf3),
    ColorSring.col333333: const Color(0xff333333),
  };
  Map<String, Color> darkInfo = {
    ColorSring.colffffff: const Color(0xff000000),
    ColorSring.col000000: const Color(0xffffffff),
    ColorSring.colefedf3: const Color(0xff151515),
    ColorSring.col333333: const Color(0xffD8D8D8),
  };

  /// 根据key，得到响应的颜色；key不存在，默认给黑色
  Color confgColor(String colkey) {
    Map colorinfo = isDarkMode ? darkInfo : lightInfo;
    return colorinfo[colkey] ?? Colors.black;
  }
}

之所以这样设计的原因，就是为了统一名字，在用的时候，只要关注浅色模式一种就可以了。比如ColorSring.colefedf3就对应UI设计图上的#efedf3；切换为深色模式的时候，自动改为对应的颜色#151515（浅色模式对应的深色模式颜色值可以让UI给出）

• 创建两个ThemeData分别代表浅色和深色模式，把自定义的颜色类CustomColor放入对应的ThemeExtensions字段就可以了。

/// 白天模式
ThemeData lightTheme = ThemeData.light().copyWith(
  extensions: <ThemeExtension<dynamic>>[
    CustomColor(false),
  ],
);

/// 夜间模式
ThemeData darkTheme = ThemeData.dark().copyWith(
  extensions: <ThemeExtension<dynamic>>[
    CustomColor(true),
  ],
);

• 使用的时候，直接使用Theme.of就可以了

CustomColor customColor =
          Theme.of(Get.context!).extension<CustomColor>()!;

customColor.confgColor(PandaColorSring. colffffff),
customColor.confgColor(PandaColorSring. col000000),
customColor.confgColor(PandaColorSring. colefedf3),
customColor.confgColor(PandaColorSring. col333333),

• 如果想再包一层，要注意用普通的对象，不能用静态属性，也不能用单例。

class ColorConfig {
  /// 取当前的主题色
  CustomColor customColor = Theme.of(Get.context!).extension<CustomColor>()!;
  Color get colffffff => customColor.confgColor(PandaColorSring.colffffff);
  Color get col000000 => customColor.confgColor(PandaColorSring.col000000);
  Color get colefedf3 => customColor.confgColor(PandaColorSring.colefedf3);
  Color get col333333 => customColor.confgColor(PandaColorSring.col333333);


/// 使用的地方
ColorConfig().confgColor(PandaColorSring. colffffff),
ColorConfig().confgColor(PandaColorSring. col000000),
ColorConfig().confgColor(PandaColorSring. colefedf3),
ColorConfig().confgColor(PandaColorSring. col333333),
}

如果封装为静态属性，或者单例，会导致theme切换的时候无法更新，千万注意

参考文章

Flutter ~ ThemeData通过ThemeExtension扩展自定义属性

另外一种思路

通过字典存储，通过定义key来获取是一种方案。
另外，通过三目运算符，利用get属性（其实就是函数），也是一种方案。

/// 自定义颜色
class CustomColor extends ThemeExtension<CustomColor> {
  final bool isDarkMode;
  CustomColor(this.isDarkMode);

  /// 这两个方法都不实现，简单返回自身
  @override
  ThemeExtension<CustomColor> copyWith() {
    return this;
  }

  @override
  ThemeExtension<CustomColor> lerp(
      ThemeExtension<CustomColor>? other, double t) {
    return this;
  }

  /// 颜色定义，分为深色，浅色两套
  Color get backgrouderDefault => isDarkMode
      ? ColorUtil.hexStringColor('#000000')
      : ColorUtil.hexStringColor('#FFFFFF');
  Color get backgrouderCard => isDarkMode
      ? ColorUtil.hexStringColor('#1C1C1E')
      : ColorUtil.hexStringColor('#FFFFFF');
  Color get backgrouderNavigationBar => isDarkMode
      ? ColorUtil.hexStringColor('#262728')
      : ColorUtil.hexStringColor('#FFFFFF');
  Color get backgrouderBottomSheet => isDarkMode
      ? ColorUtil.hexStringColor('#2C2C2E')
      : ColorUtil.hexStringColor('#FFFFFF');
  Color get backgrouder5 => isDarkMode
      ? ColorUtil.hexStringColor('#3A3A3C')
      : ColorUtil.hexStringColor('#FFFFFF');
}