Flutter 框架跨平台鸿蒙开发 - 鸿蒙渐变效果生成器应用

欢迎加入开源鸿蒙跨平台社区：
https://openharmonycrossplatform.csdn.net

一、项目概述

运行效果图

1.1 应用简介

渐变生成器是一款面向UI设计师和前端开发者的专业渐变设计工具。通过直观的可视化界面，用户可以轻松创建线性、径向、扫描三种类型的渐变效果，实时预览并一键生成CSS或Flutter代码。无论是按钮背景、卡片装饰还是页面背景，都能快速生成理想的渐变方案。

应用内置12种精选预设渐变，涵盖日落、海洋、森林、紫霞等经典配色。支持最多10个颜色停止点的精细控制，角度和半径参数可精确调节。生成的代码格式规范，直接复制即可使用，大幅提升设计开发效率。

1.2 核心功能

功能模块	功能描述	实现方式
渐变预览	实时显示渐变效果	Container + Gradient
类型切换	线性/径向/扫描渐变	SegmentedButton
预设渐变	12种精选渐变方案	GradientPreset模型
颜色停止点	多色渐变控制	GradientStop模型
角度调节	线性渐变方向控制	Slider组件
半径调节	径向渐变范围控制	Slider组件
颜色选择	HSL色彩模式选择	自定义颜色对话框
代码生成	CSS/Flutter代码输出	字符串模板
一键复制	复制代码到剪贴板	Clipboard API

1.3 渐变类型说明

类型	说明	应用场景
线性渐变	沿直线方向过渡	按钮、卡片背景
径向渐变	从中心向外扩散	聚光灯效果、圆形元素
扫描渐变	环绕中心旋转	雷达效果、进度环

1.4 技术栈

技术领域	技术选型	版本要求
开发框架	Flutter	>= 3.0.0
编程语言	Dart	>= 2.17.0
设计规范	Material Design 3	-
状态管理	setState	-
目标平台	鸿蒙OS	API 21+

1.5 项目结构

复制代码

lib/
└── main_gradient_generator.dart
    ├── GradientGeneratorApp       # 应用入口
    ├── GradientType               # 渐变类型枚举
    ├── GradientStop               # 颜色停止点模型
    ├── GradientPreset             # 预设渐变模型
    ├── GradientGeneratorPage      # 主页面
    │   ├── _buildPreviewSection()     # 预览区域
    │   ├── _buildPresetsSection()     # 预设区域
    │   ├── _buildTypeSection()        # 类型选择区
    │   ├── _buildStopsSection()       # 停止点管理区
    │   └── _buildCodeSection()        # 代码生成区
    └── _ColorPickerDialog         # 颜色选择对话框
        ├── _buildHueSlider()          # 色相滑块
        ├── _buildSaturationSlider()   # 饱和度滑块
        ├── _buildLightnessSlider()    # 亮度滑块
        └── _buildAlphaSlider()        # 透明度滑块

二、系统架构

2.1 整体架构图

Business Logic
Presentation Layer
Data Layer
GradientType

渐变类型
GradientStop

停止点模型
GradientPreset

预设模型
预览区域
渐变效果展示
预设区域
预设渐变列表
类型区域
渐变类型选择
角度/半径调节
停止点区域
颜色停止点列表
停止点编辑器
代码区域
CSS代码
Flutter代码
渐变计算

_currentGradient
角度对齐转换

_updateAlignmentFromAngle
停止点管理

add/remove/update
代码生成

_cssCode/_flutterCode

2.2 类图设计

contains
uses
manages
manages
shows
GradientGeneratorApp
+Widget build()
<<enumeration>>
GradientType
linear
radial
sweep
GradientStop
+String id
+Color color
+double position
+copyWith()
GradientPreset
+String name
+List<Color> colors
+GradientType type
+double angle
GradientGeneratorPage
-GradientType _gradientType
-double _angle
-double _radius
-List<GradientStop> _stops
-List<GradientPreset> _presets
-Gradient _currentGradient
-String _cssCode
-String _flutterCode
+Widget build()
-void _applyPreset()
-void _addStop()
-void _removeStop()
-void _updateStopColor()
-void _updateStopPosition()
_ColorPickerDialog
-double _hue
-double _saturation
-double _lightness
-double _alpha
-Color _currentColor
+Widget build()

2.3 数据流程图

选择预设
切换类型
调节角度
添加停止点
修改颜色
复制代码
用户操作
操作类型
应用预设参数
更新渐变类型
计算对齐方向
新增颜色节点
更新停止点颜色
写入剪贴板
重建渐变
更新预览
生成代码

2.4 渐变生成流程

代码区域预览区域参数状态控制面板用户代码区域预览区域参数状态控制面板用户选择渐变类型更新类型重建Gradient 显示新渐变添加颜色停止点新增GradientStop 更新颜色列表显示多色渐变调节角度计算对齐方向生成CSS/Flutter代码展示可复制代码

三、核心模块设计

3.1 数据模型设计

3.1.1 渐变类型枚举 (GradientType)

dart 复制代码

enum GradientType {
  linear,   // 线性渐变
  radial,   // 径向渐变
  sweep,    // 扫描渐变
}

3.1.2 颜色停止点模型 (GradientStop)

dart 复制代码

class GradientStop {
  final String id;      // 唯一标识
  Color color;          // 颜色值
  double position;      // 位置(0.0-1.0)
}

3.1.3 预设渐变模型 (GradientPreset)

dart 复制代码

class GradientPreset {
  final String name;           // 预设名称
  final List<Color> colors;    // 颜色列表
  final GradientType type;     // 渐变类型
  final double angle;          // 角度
}

3.2 渐变计算算法

3.2.1 角度到对齐方向转换

角度值 angle
转换为弧度
计算起始点坐标
计算结束点坐标
创建Alignment对象
radians = angle × π / 180
begin = (-cos(radians + π), -sin(radians + π))
end = (cos(radians + π), sin(radians + π))

3.2.2 渐变对象构建

dart 复制代码

Gradient get _currentGradient {
  final colors = _stops.map((s) => s.color).toList();
  final stops = _stops.map((s) => s.position).toList();

  switch (_gradientType) {
    case GradientType.linear:
      return LinearGradient(
        begin: _beginAlignment,
        end: _endAlignment,
        colors: colors,
        stops: stops.length > 1 ? stops : null,
      );
    case GradientType.radial:
      return RadialGradient(
        center: Alignment.center,
        radius: _radius,
        colors: colors,
        stops: stops.length > 1 ? stops : null,
      );
    case GradientType.sweep:
      return SweepGradient(
        center: Alignment.center,
        startAngle: 0,
        endAngle: pi * 2,
        colors: colors,
        stops: stops.length > 1 ? stops : null,
      );
  }
}

3.3 代码生成算法

3.3.1 CSS代码生成

线性
径向
扫描
获取停止点列表
遍历生成颜色字符串
格式: rgba(r,g,b,a) pos%
渐变类型
linear-gradient(angle, colors)
radial-gradient(circle, colors)
conic-gradient(from 0deg, colors)
返回CSS代码

3.3.2 Flutter代码生成

dart 复制代码

String get _flutterCode {
  final colors = _stops.map((s) {
    final r = s.color.r.toInt();
    final g = s.color.g.toInt();
    final b = s.color.b.toInt();
    return 'Color.fromRGBO($r, $g, $b, ${s.color.a.toStringAsFixed(2)})';
  }).join(',\n      ');

  switch (_gradientType) {
    case GradientType.linear:
      return '''LinearGradient(
  begin: Alignment(${_beginAlignment.x}, ${_beginAlignment.y}),
  end: Alignment(${_endAlignment.x}, ${_endAlignment.y}),
  colors: [$colors],
  stops: [${_stops.map((s) => s.position).join(', ')}],
)''';
    // ... 其他类型
  }
}

3.4 页面结构设计

3.4.1 界面布局

主页面
预览区域
预设渐变区域
类型选择区域
停止点管理区域
代码生成区域
渐变预览框
预设渐变卡片列表
类型分段按钮
角度/半径滑块
停止点颜色列表
停止点编辑器
添加/删除按钮
CSS代码块
Flutter代码块

3.4.2 停止点编辑器布局

复制代码

┌─────────────────────────────────────────────────────────────┐
│  颜色 [■]                    #667EEA                        │
│                                                             │
│  位置  ═══════════════════════════════○═════════      0.50  │
└─────────────────────────────────────────────────────────────┘

3.5 状态管理

3.5.1 核心状态变量

dart 复制代码

class _GradientGeneratorPageState extends State<GradientGeneratorPage> {
  // 渐变类型
  GradientType _gradientType = GradientType.linear;
  
  // 线性渐变参数
  double _angle = 135;
  Alignment _beginAlignment = Alignment.topLeft;
  Alignment _endAlignment = Alignment.bottomRight;
  
  // 径向渐变参数
  double _radius = 0.5;
  
  // 颜色停止点
  List<GradientStop> _stops = [];
  int _selectedStopIndex = 0;
  
  // 预设相关
  List<GradientPreset> _presets = [];
  int _selectedPreset = -1;
}

3.5.2 状态更新流程

dart 复制代码

// 更新停止点颜色
void _updateStopColor(int index, Color color) {
  setState(() {
    _stops[index] = _stops[index].copyWith(color: color);
    _selectedPreset = -1; // 清除预设选中状态
  });
}

// 更新停止点位置
void _updateStopPosition(int index, double position) {
  setState(() {
    _stops[index] = _stops[index].copyWith(position: position);
    _selectedPreset = -1;
  });
}

四、UI设计规范

4.1 配色方案

应用采用深紫色主题风格：

颜色类型	色值	用途
主色	DeepPurple	AppBar、按钮
预览背景	白色	渐变预览容器
代码背景	Grey.shade900	代码块背景
代码文字	GreenAccent	代码高亮显示
分割线	Divider	区域分隔

4.2 预设渐变样式

4.2.1 预设渐变列表

预设名称	颜色组合	类型
日落	#FF512F → #F09819	线性
海洋	#2193b0 → #6dd5ed	线性
森林	#134E5E → #71B280	线性
紫霞	#667eea → #764ba2	线性
火焰	#FF416C → #FF4B2B	线性
极光	#00c6ff → #0072ff	线性
彩虹	七色彩虹色	线性
金属	#bdc3c7 → #2c3e50	线性
糖果	#FF6B6B → #556270	线性
霓虹	#00f260 → #0575E6	线性
黄昏	#f12711 → #f5af19	线性
深空	#0f0c29 → #302b63 → #24243e	线性

4.2.2 预设卡片样式

复制代码

┌─────────────────────┐
│                     │
│    渐变背景效果      │
│      预设名称        │
│                     │
└─────────────────────┘

4.3 组件规范

4.3.1 类型选择按钮

复制代码

┌─────────────────────────────────────────────────────────────┐
│  [线性] [径向] [扫描]                                        │
│   ↑      ↑       ↑                                          │
│  图标   图标    图标                                         │
└─────────────────────────────────────────────────────────────┘

4.3.2 停止点颜色卡片

复制代码

┌──────────┐
│   50%    │  ← 位置百分比
│    ✕     │  ← 删除按钮(可选)
└──────────┘
    ↑
  颜色背景

4.4 交互设计

4.4.1 操作方式

操作	手势	效果
选择预设	点击预设卡片	应用预设渐变
切换类型	点击分段按钮	切换渐变类型
调节参数	拖动滑块	实时更新渐变
选择停止点	点击颜色卡片	选中编辑
修改颜色	点击色块	打开颜色选择器
复制代码	点击按钮	复制到剪贴板

4.4.2 视觉反馈

选择预设
卡片边框高亮
渐变参数更新
预览刷新
选中停止点
卡片边框加粗
显示编辑器
复制成功
显示SnackBar提示

五、核心功能实现

5.1 预设渐变初始化

dart 复制代码

void _initPresets() {
  _presets.addAll([
    GradientPreset(
      name: '日落',
      colors: [const Color(0xFFFF512F), const Color(0xFFF09819)],
      angle: 135,
    ),
    GradientPreset(
      name: '海洋',
      colors: [const Color(0xFF2193b0), const Color(0xFF6dd5ed)],
      angle: 135,
    ),
    // ... 更多预设
  ]);
}

5.2 角度对齐转换

dart 复制代码

void _updateAlignmentFromAngle(double angle) {
  final radians = angle * pi / 180;
  setState(() {
    _angle = angle;
    _beginAlignment = Alignment(
      -cos(radians + pi),
      -sin(radians + pi),
    );
    _endAlignment = Alignment(
      cos(radians + pi),
      sin(radians + pi),
    );
  });
}

5.3 停止点管理

dart 复制代码

// 添加停止点
void _addStop() {
  if (_stops.length >= 10) return;

  final newPosition = _stops.isEmpty ? 0.5 : (_stops.last.position + 0.1).clamp(0.0, 1.0);
  final newColor = Colors.primaries[Random().nextInt(Colors.primaries.length)];

  setState(() {
    _stops.add(GradientStop(
      id: DateTime.now().millisecondsSinceEpoch.toString(),
      color: newColor,
      position: newPosition,
    ));
    _selectedStopIndex = _stops.length - 1;
  });
}

// 移除停止点
void _removeStop(int index) {
  if (_stops.length <= 2) return;

  setState(() {
    _stops.removeAt(index);
    if (_selectedStopIndex >= _stops.length) {
      _selectedStopIndex = _stops.length - 1;
    }
  });
}

5.4 颜色选择对话框

dart 复制代码

class _ColorPickerDialog extends StatefulWidget {
  final Color initialColor;
  // ...
}

class _ColorPickerDialogState extends State<_ColorPickerDialog> {
  late double _hue;
  late double _saturation;
  late double _lightness;
  late double _alpha;

  Color get _currentColor {
    return HSLColor.fromAHSL(_alpha, _hue, _saturation, _lightness).toColor();
  }

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      title: const Text('选择颜色'),
      content: Column(
        children: [
          Container(color: _currentColor),
          _buildHueSlider(),
          _buildSaturationSlider(),
          _buildLightnessSlider(),
          _buildAlphaSlider(),
          Wrap(children: _presetColors.map(...).toList()),
        ],
      ),
      actions: [
        TextButton(onPressed: () => Navigator.pop(context), child: const Text('取消')),
        FilledButton(onPressed: () => Navigator.pop(context, _currentColor), child: const Text('确定')),
      ],
    );
  }
}

5.5 复制到剪贴板

dart 复制代码

void _copyCode(String code, String type) {
  Clipboard.setData(ClipboardData(text: code));
  ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(
      content: Text('$type 代码已复制到剪贴板'),
      duration: const Duration(seconds: 2),
      behavior: SnackBarBehavior.floating,
    ),
  );
}

六、渐变设计知识

6.1 渐变基本原理

6.1.1 线性渐变

起点颜色
终点颜色
角度0°
从下到上
角度90°
从左到右
角度180°
从上到下
角度270°
从右到左

6.1.2 径向渐变

中心点
扩散半径
颜色过渡
radius = 0.5 (默认)
radius = 1.0 (边缘)

6.1.3 扫描渐变

中心点
起始角度 0°
结束角度 360°
环绕一周

6.2 渐变设计原则

原则	说明
颜色和谐	使用相邻或互补色
过渡自然	避免突兀的颜色跳跃
对比适度	确保文字可读性
性能考虑	多色渐变增加渲染开销

6.3 常见渐变效果

6.3.1 单色渐变

复制代码

深色 → 浅色
#333333 → #666666

6.3.2 双色渐变

复制代码

暖色 → 冷色
#FF6B6B → #4ECDC4

6.3.3 多色渐变

复制代码

彩虹效果
红 → 橙 → 黄 → 绿 → 蓝 → 靛 → 紫

七、扩展功能规划

7.1 后续版本规划

2024-01-07 2024-01-14 2024-01-21 2024-01-28 2024-02-04 2024-02-11 2024-02-18 2024-02-25 2024-03-03 2024-03-10 核心渐变功能预设渐变库代码生成功能渐变角度可视化自定义预设保存渐变图片导出渐变动画效果渐变叠加混合 CSS变量导出 V1.0 基础版本 V1.1 增强版本 V1.2 进阶版本渐变生成器开发计划

7.2 功能扩展建议

7.2.1 渐变角度可视化

dart 复制代码

// 角度指示器组件
class AngleIndicator extends StatelessWidget {
  final double angle;
  // 显示角度方向的箭头
}

功能	说明
方向箭头	显示渐变方向
角度刻度	0°-360°刻度盘
拖拽调节	直接拖拽箭头

7.2.2 自定义预设保存

功能	说明
保存预设	保存当前渐变为预设
预设管理	编辑、删除预设
导入导出	分享预设配置

7.2.3 渐变图片导出

功能	说明
PNG导出	导出为PNG图片
SVG导出	导出为SVG矢量图
尺寸设置	自定义导出尺寸

八、注意事项

8.1 开发注意事项

颜色精度：HSL与RGB转换精度问题
停止点数量：限制最多10个停止点
角度计算：注意角度与对齐方向的映射
代码格式：生成的代码要格式化美观

8.2 用户体验优化

💡 用户体验建议 💡

实时预览渐变效果
提供丰富的预设选择
支持颜色值多种格式
代码一键复制功能

8.3 常见问题

问题	原因	解决方案
渐变方向错误	角度计算错误	检查角度转换逻辑
颜色显示异常	HSL转换错误	检查转换公式
代码复制失败	权限问题	检查剪贴板权限
停止点无法添加	数量限制	检查最大数量

九、运行说明

9.1 环境要求

环境	版本要求
Flutter SDK	>= 3.0.0
Dart SDK	>= 2.17.0
鸿蒙OS	API 21+

9.2 运行命令

bash 复制代码

# 查看可用设备
flutter devices

# 运行到鸿蒙设备
flutter run -d 127.0.0.1:5555 lib/main_gradient_generator.dart

# 运行到Windows
flutter run -d windows -t lib/main_gradient_generator.dart

# 代码分析
flutter analyze lib/main_gradient_generator.dart

十、总结

渐变生成器应用通过直观的可视化界面，让用户能够轻松创建各种渐变效果。应用支持线性、径向、扫描三种渐变类型，角度和半径参数可精确调节。内置12种精选预设渐变，涵盖从暖色到冷色的各种风格。

颜色停止点管理功能支持最多10个颜色节点的精细控制，每个节点可独立设置颜色和位置。颜色选择器采用HSL色彩模式，支持色相、饱和度、亮度、透明度四个维度的精确调节。生成的CSS和Flutter代码格式规范，一键复制功能大幅提升开发效率。

界面设计采用深紫色主题风格，预设渐变卡片直观展示效果，类型选择使用分段按钮清晰明了。停止点编辑器支持实时预览和快速调整。应用采用Material Design 3设计规范，遵循Flutter最佳实践，代码结构清晰，易于维护和扩展。

渐变之美，一键生成，设计无限！