调色板示例颜色数据获取-基于 Flutter × OpenHarmony

文章目录

调色板示例颜色数据获取-基于 Flutter × OpenHarmony
- 前言
- 背景
- Flutter × Harmony OpenHarmony 跨端开发介绍
- 开发核心代码
- - 代码解析
- 心得
- 总结

调色板示例颜色数据获取-基于 Flutter × OpenHarmony

前言

在移动端开发中，颜色调色板是 UI 设计和视觉一致性的核心元素。无论是主题配色、图表展示还是动态界面渲染，都离不开对颜色的有效管理。在跨端开发环境中，如 Flutter × OpenHarmony 平台，如何高效获取并组织示例颜色数据，是实现灵活 UI 的关键。

本文将围绕调色板构建与示例颜色获取，介绍一个完整的 Flutter × OpenHarmony 跨端实现方案，包含详细代码解析与开发心得。

背景

在传统的单端开发中，颜色通常硬编码在界面中，或者通过主题文件进行统一管理。然而在跨端开发中，尤其是需要兼顾 HarmonyOS 设备和 Android/iOS 设备时，统一颜色数据管理和动态分类就显得尤为重要。

Flutter 提供了高度可复用的 Widget 系统，而 OpenHarmony 的跨端能力使得同一套代码可运行于手机、平板甚至 IoT 设备上。因此，通过构建一个分类调色板，不仅可以统一颜色风格，还能在多个终端快速复用。

Flutter × Harmony OpenHarmony 跨端开发介绍

Flutter × OpenHarmony 的跨端开发模式，核心特点如下：

单代码多平台
使用 Dart 语言和 Flutter 框架，通过 OpenHarmony 的 DevEco Studio 构建，支持 Android、HarmonyOS 手机和平板、IoT 设备等多端运行。
Widget 化 UI
所有界面元素都可以封装为 Widget，包括调色板项。通过_getSampleColors()方法返回的数据列表，可以直接用GridView或ListView渲染。
数据驱动 UI
Flutter 推荐使用数据驱动界面，即通过对象列表动态生成 UI，而不是硬编码每个颜色。ColorPaletteItem 类是调色板数据结构的核心。

开发核心代码

下面是获取示例颜色数据的核心实现：

/// 获取分类名称String_getCategoryName(ColorCategorycategory){switch(category){caseColorCategory.red:return'红色系';caseColorCategory.orange:return'橙色系';caseColorCategory.yellow:return'黄色系';caseColorCategory.green:return'绿色系';caseColorCategory.blue:return'蓝色系';caseColorCategory.purple:return'紫色系';caseColorCategory.pink:return'粉色系';caseColorCategory.neutral:return'中性色系';}}/// 获取示例颜色数据List<ColorPaletteItem>_getSampleColors(){return[// 红色系ColorPaletteItem(id:'1',name:'中国红',hexCode:'#E53E3E',color:constColor(0xFFE53E3E),category:ColorCategory.red,),ColorPaletteItem(id:'2',name:'番茄红',hexCode:'#FC8181',color:constColor(0xFFFC8181),category:ColorCategory.red,),// 橙色系ColorPaletteItem(id:'3',name:'橙色',hexCode:'#ED8936',color:constColor(0xFFED8936),category:ColorCategory.orange,),ColorPaletteItem(id:'4',name:'深橙色',hexCode:'#DD6B20',color:constColor(0xFFDD6B20),category:ColorCategory.orange,),// 黄色系ColorPaletteItem(id:'5',name:'黄色',hexCode:'#F6E05E',color:constColor(0xFFF6E05E),category:ColorCategory.yellow,),ColorPaletteItem(id:'6',name:'金色',hexCode:'#D69E2E',color:constColor(0xFFD69E2E),category:ColorCategory.yellow,),// 绿色系ColorPaletteItem(id:'7',name:'绿色',hexCode:'#48BB78',color:constColor(0xFF48BB78),category:ColorCategory.green,),ColorPaletteItem(id:'8',name:'深绿色',hexCode:'#2F855A',color:constColor(0xFF2F855A),category:ColorCategory.green,),// 蓝色系ColorPaletteItem(id:'9',name:'蓝色',hexCode:'#4299E1',color:constColor(0xFF4299E1),category:ColorCategory.blue,),ColorPaletteItem(id:'10',name:'深蓝色',hexCode:'#2B6CB0',color:constColor(0xFF2B6CB0),category:ColorCategory.blue,),// 紫色系ColorPaletteItem(id:'11',name:'紫色',hexCode:'#9F7AEA',color:constColor(0xFF9F7AEA),category:ColorCategory.purple,),ColorPaletteItem(id:'12',name:'深紫色',hexCode:'#6B46C1',color:constColor(0xFF6B46C1),category:ColorCategory.purple,),// 粉色系ColorPaletteItem(id:'13',name:'粉色',hexCode:'#F687B3',color:constColor(0xFFF687B3),category:ColorCategory.pink,),ColorPaletteItem(id:'14',name:'深粉色',hexCode:'#D53F8C',color:constColor(0xFFD53F8C),category:ColorCategory.pink,),// 中性色系ColorPaletteItem(id:'15',name:'白色',hexCode:'#FFFFFF',color:constColor(0xFFFFFFFF),category:ColorCategory.neutral,),ColorPaletteItem(id:'16',name:'黑色',hexCode:'#000000',color:constColor(0xFF000000),category:ColorCategory.neutral,),ColorPaletteItem(id:'17',name:'灰色',hexCode:'#718096',color:constColor(0xFF718096),category:ColorCategory.neutral,),ColorPaletteItem(id:'18',name:'浅灰色',hexCode:'#E2E8F0',color:constColor(0xFFE2E8F0),category:ColorCategory.neutral,),];}

代码解析

颜色分类枚举
```
enumColorCategory{red,orange,yellow,green,blue,purple,pink,neutral}
```
通过枚举定义颜色类型，保证类型安全，并方便后续分类筛选。
获取分类名称方法_getCategoryName
将枚举类型映射为中文分类名称，便于界面显示。例如ColorCategory.red映射为红色系。
示例颜色数据结构ColorPaletteItem
包含id、name、hexCode、color、category五个属性：
- id唯一标识
- name中文名称
- hexCode16 进制色值
- colorFlutterColor对象，用于直接渲染
- category分类枚举
获取示例颜色列表_getSampleColors
返回一个List<ColorPaletteItem>，每个元素都包含完整的颜色信息。可直接用于 GridView 或 ListView 渲染，实现调色板展示和筛选。