Flutter 中使用 Color 的最优方案

zhifanxu2025-09-25 9:22

在 Flutter 中使用 Color 的最优方案，核心是统一管理 + 按需扩展，既保证代码可维护性，又兼顾灵活性。

基础：统一颜色管理（核心方案）

避免在 UI 中硬写Color(0xFFxxxxxx)，通过专门的类集中管理颜色，是最关键的优化。

推荐实现：创建AppColors工具类

Dart 复制代码

class AppColors {
  // 主色调（品牌色）
  static const Color primary = Color(0xFF2196F3); // 蓝色主色
  static const Color primaryDark = Color(0xFF1976D2); // 主色深色
  static const Color primaryLight = Color(0xFFBBDEFB); // 主色浅色

  // 辅助色（功能色：成功、警告、错误等）
  static const Color success = Color(0xFF4CAF50);
  static const Color warning = Color(0xFFFFC107);
  static const Color error = Color(0xFFF44336);

  // 中性色（文本、背景、边框等）
  static const Color textPrimary = Color(0xFF333333); // 主要文本
  static const Color textSecondary = Color(0xFF666666); // 次要文本
  static const Color bgMain = Color(0xFFFFFFFF); // 主背景
  static const Color border = Color(0xFFE0E0E0); // 边框色
}

使用场景：UI 中直接调用，如 Text("内容", style: TextStyle(color: AppColors.textPrimary))，后续修改颜色只需改AppColors，无需全局搜索。