Flutter如何实现树形层级结构的自定义颜色常量调用

平铺实现方式的合理性分析 #

你现在用的平铺声明方式在配色数量极少的场景下可以正常运行，但存在明显的局限性：

• 命名冗余：配色层级越深，变量名越长，比如backgroundLightPrimary这类命名可读性会越来越差
• 分类不清晰：所有颜色混在同一个类里，后续新增文字、按钮、边框等分类的颜色时，很难快速筛选对应分类的色值
• 扩展能力弱：如果后续要适配多主题切换、批量调整某类配色的属性，平铺的结构很难实现批量操作

树形层级调用实现方案 #

你可以通过嵌套常量类的方式实现和你原有JSON结构完全匹配的调用方式，所有实例都用const构造保证性能，具体实现代码如下：
首先定义各层级的配色结构类：

import 'dart:ui';

// 复用的通用三色组结构，适配light、dark分类下的主/次/三级色
class CommonToneColors {
  final Color primary;
  final Color secondary;
  final Color tertiary;

  const CommonToneColors({
    required this.primary,
    required this.secondary,
    required this.tertiary,
  });
}

// solid分类下的明暗配色结构
class SolidBackgroundColors {
  final Color light;
  final Color dark;

  const SolidBackgroundColors({
    required this.light,
    required this.dark,
  });
}

// background层级的总结构
class BackgroundColors {
  final SolidBackgroundColors solid;
  final CommonToneColors light;
  final CommonToneColors dark;

  const BackgroundColors({
    required this.solid,
    required this.light,
    required this.dark,
  });
}

// 顶层配色总入口
class AppColors {
  final BackgroundColors background;
  // 后续新增text、button、border等其他分类，直接在此处加属性即可

  const AppColors({
    required this.background,
  });
}

然后在AppTheme中初始化常量实例：

class AppTheme {
  static const colors = AppColors(
    background: BackgroundColors(
      solid: SolidBackgroundColors(
        light: Color.fromRGBO(255, 255, 255, 1),
        dark: Color.fromRGBO(0, 0, 0, 1),
      ),
      light: CommonToneColors(
        primary: Color.fromRGBO(255, 255, 255, 0.84),
        secondary: Color.fromRGBO(240, 240, 248, 0.84),
        tertiary: Color.fromRGBO(224, 224, 232, 0.84),
      ),
      dark: CommonToneColors(
        primary: Color.fromRGBO(0, 0, 0, 0.84),
        secondary: Color.fromRGBO(32, 32, 40, 0.84),
        tertiary: Color.fromRGBO(64, 64, 72, 0.84),
      ),
    ),
  );
}

实现后你就可以用预期的方式调用配色：

// 获取背景实色亮色模式色值
Color bgSolidLight = AppTheme.colors.background.solid.light;
// 获取背景浅色透明次等级色值
Color bgLightSecondary = AppTheme.colors.background.light.secondary;

这种实现方式的优势：

• 调用路径完全匹配你原有树形配色体系的记忆习惯
• 相同结构的色组可以复用类定义，减少重复代码
• IDE代码提示更友好，选中对应层级只会展示该分类下的配色，查找效率更高
• 后续扩展多主题时，只需要定义多个AppColors常量实例即可，切换成本极低

内容的提问来源于stack exchange，提问作者Walrus