Flutter框架适配鸿蒙：Icon颜色设置

你大也

623人浏览 · 2026-01-21 23:16:07

你大也 · 2026-01-21 23:16:07 发布

在这里插入图片描述

一、Icon颜色概述

通过color属性设置图标的颜色，支持多种颜色表示方式。颜色是图标设计中最富表现力的元素之一，能够传递情感、状态和品牌特色。

颜色的作用

合理使用图标颜色可以带来以下效果：

情感传达：不同颜色激发不同的情绪反应
状态表示：用颜色区分正常、警告、错误等状态
品牌强化：使用品牌色增强品牌识别度
视觉引导：通过颜色对比引导用户注意力
无障碍友好：为色盲用户提供多重识别方式

颜色体系分类

二、基础颜色使用

常用色系

Material Design提供了一套预定义的颜色调色板，开发者可以直接使用：

色系	颜色值	应用场景	情感暗示
红色系	Colors.red	错误、删除、重要	警告、紧急
绿色系	Colors.green	成功、完成、通过	积极、肯定
蓝色系	Colors.blue	信息、链接、科技	信任、专业
黄色系	Colors.yellow	警告、注意、待办	谨慎、提醒
橙色系	Colors.orange	通知、提醒、活动	活力、温暖
紫色系	Colors.purple	特殊、高级、创意	神秘、优雅
灰色系	Colors.grey	禁用、次要点、辅助	中性、低调
黑色系	Colors.black	主要内容、重要文本	权威、正式

颜色选择流程

三、透明度与层次

透明度应用场景

透明度是营造层次感和视觉深度的有效手段：

透明度	视觉效果	使用场景	示例
1.0	完全不透明	正常状态	默认图标颜色
0.8-0.9	轻微透明	次要元素	背景图标
0.5-0.7	中等透明	禁用状态	未激活功能
0.3-0.5	明显透明	背景装饰	空状态插图
0.1-0.3	极度透明	淡化元素	水印、占位

透明度使用原则

保持可识别性：即使降低透明度，图标应该仍然清晰可辨
避免过度透明：透明度过低会影响可访问性
考虑背景对比：透明图标应该与背景有足够对比
状态一致性：相同状态的图标透明度应该保持一致

四、主题颜色集成

主题颜色类型

Flutter的主题系统提供了丰富的颜色属性供图标使用：

主题属性	说明	使用场景	适用范围
primaryColor	主色调	主要操作、强调内容	应用全局
accentColor	强调色	次要操作、浮动按钮	特定元素
scaffoldBackgroundColor	背景色	与背景对比的图标	大面积背景
cardColor	卡片色	卡片内图标	卡片容器
dividerColor	分隔线色	辅助信息图标	分隔区域

主题颜色优势

使用主题颜色有以下优势：

自动适配：切换主题时自动更新颜色
一致性：保持应用颜色统一
易维护：修改主题一处，全局生效
暗色模式：支持暗色模式自动切换
品牌一致：强化品牌色彩识别

五、状态颜色编码

语义颜色规范

为了提升用户体验，应该遵循通用的颜色语义规范：

状态	颜色	色值示例	触发条件
正常	主色/默认	Colors.blue	标准操作状态
成功	绿色	Colors.green	操作完成、验证通过
警告	黄色/橙色	Colors.orange	注意事项、待确认
错误	红色	Colors.red	操作失败、验证错误
信息	蓝色	Colors.blue	提示消息、帮助信息
禁用	灰色	Colors.grey	不可用状态
加载	蓝色/主题色	Colors.blue	数据加载中
离线	灰色	Colors.grey	网络未连接

状态切换流程

六、颜色对比度

对比度标准

为了确保可访问性，图标与背景的对比度需要符合WCAG 2.1标准：

对比度级别	最小对比度	适用场景	用户群体
AA级	4.5:1	标准内容	大多数用户
AAA级	7:1	增强内容	视力障碍用户
大文本AA级	3:1	18pt以上文本	大多数用户
大文本AAA级	4.5:1	18pt以上文本	视力障碍用户

背景适配建议

背景颜色	推荐图标颜色	避免使用的颜色
白色	黑色、深灰	浅灰、淡色
黑色	白色、浅灰	深灰、深色
主题色	白色、黑色	同色系浅色
图片背景	白色+阴影	同色系颜色

七、品牌色应用

品牌色的定义

品牌色是应用独特的颜色标识，通常包括：

主品牌色：用于最重要的UI元素
辅助品牌色：用于次要元素和强调
品牌渐变：用于特殊装饰效果

品牌色使用规范

元素类型	颜色建议	使用原则
核心图标	主品牌色	强化品牌识别
次要图标	辅助品牌色	保持品牌一致性
装饰图标	品牌渐变	营造视觉层次
功能图标	语义颜色	优先功能语义
禁用图标	灰色	表示不可用状态

八、完整示例

class IconColorExample extends StatelessWidget {
  const IconColorExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Icon颜色')),
      body: ListView(
        padding: const EdgeInsets.all(16),
        children: [
          _buildColorPaletteCard(),
          const SizedBox(height: 16),
          _buildOpacityCard(),
          const SizedBox(height: 16),
          _buildStatusCard(),
          const SizedBox(height: 16),
          _buildThemeCard(),
        ],
      ),
    );
  }

  Widget _buildColorPaletteCard() {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text(
              '基础色系',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 16),
            Wrap(
              spacing: 16,
              runSpacing: 16,
              children: const [
                _ColorIcon(Icons.favorite, '红色', Colors.red),
                _ColorIcon(Icons.thumb_up, '绿色', Colors.green),
                _ColorIcon(Icons.info, '蓝色', Colors.blue),
                _ColorIcon(Icons.warning, '黄色', Colors.yellow),
                _ColorIcon(Icons.error, '橙色', Colors.orange),
                _ColorIcon(Icons.star, '紫色', Colors.purple),
                _ColorIcon(Icons.circle, '灰色', Colors.grey),
                _ColorIcon(Icons.dark_mode, '黑色', Colors.black),
              ],
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildOpacityCard() {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text(
              '透明度层次',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 16),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: const [
                _OpacityIcon(Icons.favorite, '100%', 1.0),
                _OpacityIcon(Icons.favorite, '75%', 0.75),
                _OpacityIcon(Icons.favorite, '50%', 0.5),
                _OpacityIcon(Icons.favorite, '25%', 0.25),
              ],
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildStatusCard() {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text(
              '状态颜色',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 16),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: const [
                _StatusIcon(Icons.check_circle, '成功', Colors.green),
                _StatusIcon(Icons.warning, '警告', Colors.orange),
                _StatusIcon(Icons.error, '错误', Colors.red),
                _StatusIcon(Icons.info, '信息', Colors.blue),
              ],
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildThemeCard() {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text(
              '主题颜色',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 16),
            Builder(
              builder: (context) {
                final theme = Theme.of(context);
                return Column(
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: [
                        _ThemeIcon(Icons.star, '主色', theme.primaryColor),
                        _ThemeIcon(Icons.favorite, '次要色', theme.colorScheme.secondary),
                        _ThemeIcon(Icons.brightness_4, '表面色', theme.cardColor),
                      ],
                    ),
                  ],
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

class _ColorIcon extends StatelessWidget {
  final IconData icon;
  final String label;
  final Color color;

  const _ColorIcon(this.icon, this.label, this.color);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(12),
      decoration: BoxDecoration(
        color: color.withOpacity(0.1),
        borderRadius: BorderRadius.circular(12),
      ),
      child: Column(
        children: [
          Icon(icon, size: 32, color: color),
          const SizedBox(height: 8),
          Text(label, style: const TextStyle(fontSize: 12)),
        ],
      ),
    );
  }
}

class _OpacityIcon extends StatelessWidget {
  final IconData icon;
  final String label;
  final double opacity;

  const _OpacityIcon(this.icon, this.label, this.opacity);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Icon(
          icon,
          size: 48,
          color: Colors.blue.withOpacity(opacity),
        ),
        const SizedBox(height: 8),
        Text(label, style: const TextStyle(fontSize: 12)),
        Text(
          '${(opacity * 100).toInt()}%',
          style: const TextStyle(fontSize: 10, color: Colors.grey),
        ),
      ],
    );
  }
}

class _StatusIcon extends StatelessWidget {
  final IconData icon;
  final String label;
  final Color color;

  const _StatusIcon(this.icon, this.label, this.color);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          padding: const EdgeInsets.all(16),
          decoration: BoxDecoration(
            color: color.withOpacity(0.1),
            borderRadius: BorderRadius.circular(16),
          ),
          child: Icon(icon, size: 48, color: color),
        ),
        const SizedBox(height: 8),
        Text(
          label,
          style: const TextStyle(fontSize: 12, fontWeight: FontWeight.bold),
        ),
      ],
    );
  }
}

class _ThemeIcon extends StatelessWidget {
  final IconData icon;
  final String label;
  final Color color;

  const _ThemeIcon(this.icon, this.label, this.color);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          padding: const EdgeInsets.all(12),
          decoration: BoxDecoration(
            color: color,
            borderRadius: BorderRadius.circular(12),
          ),
          child: Icon(icon, size: 32, color: Colors.white),
        ),
        const SizedBox(height: 8),
        Text(label, style: const TextStyle(fontSize: 12)),
      ],
    );
  }
}