二维码美化器应用

---

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

一、项目概述

运行效果图

1.1 应用简介

二维码美化器是一款创意工具应用，将普通二维码变成艺术品。支持嵌入图片、渐变色彩、形状变换等多种美化功能，让扫码也变得时尚。应用内置多种样式风格和设计模板，支持自定义颜色、渐变效果、定位点样式、边框样式，打造独一无二的个性化二维码。

应用以清新的青色为主色调，象征科技与创新。涵盖二维码生成、设计模板、生成历史、关于信息四大模块。用户可以输入内容、选择样式、调整参数、嵌入Logo，快速生成美观的二维码。

1.2 核心功能

功能模块	功能描述	实现方式
样式风格	6种二维码样式	枚举定义
渐变效果	6种渐变类型	Shader绘制
颜色设置	自定义主色副色	颜色选择器
定位点样式	5种定位点风格	枚举定义
边框样式	6种边框效果	自定义绘制
Logo嵌入	支持嵌入Logo图片	位置选择

1.3 样式风格定义

序号	样式名称	Emoji	描述
1	经典方块	⬛	传统方块样式
2	圆角方块	🔘	圆润柔和风格
3	圆点样式	⚫	时尚圆点风格
4	菱形样式	🔷	几何菱形风格
5	爱心样式	❤️	浪漫爱心风格
6	星形样式	⭐	闪耀星形风格

1.4 渐变类型定义

序号	渐变名称	Emoji	描述
1	无渐变	⬜	纯色填充
2	线性渐变	📏	平滑过渡效果
3	径向渐变	🎯	中心向外扩散
4	扫描渐变	🌀	旋转扫描效果
5	彩虹渐变	🌈	七彩绚丽效果
6	日落渐变	🌅	温暖夕阳色调

1.5 定位点样式定义

序号	样式名称	Emoji	描述
1	方形	⬛	传统方形定位点
2	圆角	🔲	圆角方形定位点
3	圆形	⚫	圆形定位点
4	叶形	🍃	叶子形状定位点
5	菱形	💎	菱形定位点

1.6 边框样式定义

序号	边框名称	Emoji	描述
1	无边框	🖼️	无边框效果
2	简约边框	⬜	简约线条边框
3	圆角边框	🔘	圆角矩形边框
4	双边框	⏹️	双层线条边框
5	装饰边框	🎨	装饰性边框
6	复古边框	📜	复古风格边框

1.7 技术栈

技术领域	技术选型	版本要求
开发框架	Flutter	>= 3.0.0
编程语言	Dart	>= 2.17.0
设计规范	Material Design 3	-
自定义绘制	CustomPainter	-
渐变效果	Shader	-
目标平台	鸿蒙OS / Web	API 21+

1.8 项目结构

lib/
└── main_qrcode_beautifier.dart
    ├── QRCodeBeautifierApp           # 应用入口
    ├── QRStyle                       # 样式风格枚举
    ├── GradientType                  # 渐变类型枚举
    ├── EyeStyle                      # 定位点样式枚举
    ├── FrameStyle                    # 边框样式枚举
    ├── LogoPosition                  # Logo位置枚举
    ├── QRCodeDesign                  # 二维码设计模型
    ├── GeneratedQRCode               # 生成二维码模型
    ├── QRCodeBeautifierHomePage      # 主页面（底部导航）
    ├── _buildEditorPage              # 生成页面
    ├── _buildDesignsPage             # 设计页面
    ├── _buildHistoryPage             # 历史页面
    └── QRCodePreviewPainter          # 二维码预览绘制器

---

二、系统架构

2.1 整体架构图

2.2 类图设计

2.3 页面导航流程

2.4 二维码生成流程

---

三、核心模块设计

3.1 数据模型设计

3.1.1 样式风格枚举 (QRStyle)

enum QRStyle {
  classic(label: '经典方块', emoji: '⬛', description: '传统方块样式'),
  rounded(label: '圆角方块', emoji: '🔘', description: '圆润柔和风格'),
  dots(label: '圆点样式', emoji: '⚫', description: '时尚圆点风格'),
  diamond(label: '菱形样式', emoji: '🔷', description: '几何菱形风格'),
  heart(label: '爱心样式', emoji: '❤️', description: '浪漫爱心风格'),
  star(label: '星形样式', emoji: '⭐', description: '闪耀星形风格');

  final String label;
  final String emoji;
  final String description;
}

3.1.2 渐变类型枚举 (GradientType)

enum GradientType {
  none(label: '无渐变', emoji: '⬜'),
  linear(label: '线性渐变', emoji: '📏'),
  radial(label: '径向渐变', emoji: '🎯'),
  sweep(label: '扫描渐变', emoji: '🌀'),
  rainbow(label: '彩虹渐变', emoji: '🌈'),
  sunset(label: '日落渐变', emoji: '🌅');

  final String label;
  final String emoji;
}

3.1.3 二维码设计模型 (QRCodeDesign)

class QRCodeDesign {
  final String id;              // 设计ID
  final String name;            // 设计名称
  final QRStyle style;          // 样式风格
  final GradientType gradient;  // 渐变类型
  final Color primaryColor;     // 主色
  final Color secondaryColor;   // 副色
  final EyeStyle eyeStyle;      // 定位点样式
  final FrameStyle frameStyle;  // 边框样式
  final LogoPosition logoPosition; // Logo位置
  final double cornerRadius;    // 圆角大小
  final DateTime createdAt;     // 创建时间
}

3.1.4 生成二维码模型 (GeneratedQRCode)

class GeneratedQRCode {
  final String id;              // 二维码ID
  final String content;         // 二维码内容
  final QRCodeDesign design;    // 应用的设计
  final DateTime generatedAt;   // 生成时间
}

3.1.5 样式风格分布

3.2 页面结构设计

3.2.1 主页面布局

3.2.2 生成页结构

3.2.3 二维码预览结构

3.2.4 设计页结构

3.3 样式绘制逻辑

3.4 渐变处理逻辑

---

四、UI设计规范

4.1 配色方案

应用以清新的青色为主色调，象征科技与创新：

颜色类型	色值	用途
主色	#00BCD4 (Cyan)	导航、主题元素
辅助色	#26C6DA	设计页面
第三色	#4DD0E1	历史页面
强调色	#80DEEA	关于页面
背景色	#FAFAFA	页面背景
卡片背景	#FFFFFF	设计卡片

4.2 渐变色方案

渐变名称	颜色组合	视觉效果
科技蓝	#2196F3 → #00BCD4	清新科技
浪漫粉	#E91E63 → #FF4081	浪漫温馨
彩虹风	七彩渐变	绚丽多彩
日落橙	#FF512F → #F09819	温暖夕阳

4.3 字体规范

元素	字号	字重	颜色
页面标题	24px	Bold	主色
设计名称	16px	Bold	#000000
样式标签	12px	Regular	白色
参数数值	12px	Regular	灰色
统计数字	20px	Bold	白色

4.4 组件规范

4.4.1 内容输入框

┌─────────────────────────────────────┐
│  二维码内容                          │
│  ┌─────────────────────────────┐   │
│  │ https://example.com      ✕  │   │
│  │                             │   │
│  └─────────────────────────────┘   │
└─────────────────────────────────────┘

4.4.2 样式选择卡片

┌─────────────────────────────────────┐
│  二维码样式                          │
│                                     │
│  ┌──────┐ ┌──────┐ ┌──────┐        │
│  │  ⬛  │ │  🔘  │ │  ⚫  │        │
│  │经典  │ │圆角  │ │圆点  │        │
│  │方块  │ │方块  │ │样式  │        │
│  └──────┘ └──────┘ └──────┘        │
└─────────────────────────────────────┘

4.4.3 颜色设置区域

┌─────────────────────────────────────┐
│  颜色设置                            │
│                                     │
│  主色        副色        渐变类型    │
│  ┌────┐    ┌────┐    ┌────────┐   │
│  │    │    │    │    │📏 线性▼│   │
│  └────┘    └────┘    └────────┘   │
│                                     │
│  圆角大小  ────────●────────  4.0   │
└─────────────────────────────────────┘

4.4.4 二维码预览区域

┌─────────────────────────────────────┐
│  ┌─────────────────────────────┐   │
│  │  ⬛⬛⬛⬛⬛    ⬛⬛⬛⬛⬛  │   │
│  │  ⬛    ⬛    ⬛    ⬛        │   │
│  │  ⬛ ⬛ ⬛    ⬛ ⬛ ⬛        │   │
│  │  ⬛    ⬛    ⬛    ⬛        │   │
│  │  ⬛⬛⬛⬛⬛    ⬛⬛⬛⬛⬛  🔘圆角│
│  │              ┌─────┐        │   │
│  │              │LOGO │        │   │
│  │              └─────┘        │   │
│  └─────────────────────────────┘   │
└─────────────────────────────────────┘

4.4.5 Logo选项区域

┌─────────────────────────────────────┐
│  嵌入Logo                    [开关] │
│                                     │
│  Logo位置                           │
│  [🎯] [↖️] [↗️] [↙️] [↘️]          │
└─────────────────────────────────────┘

---

五、核心功能实现

5.1 样式绘制实现

void _drawModule(Canvas canvas, double x, double y, double size, Paint paint, int row, int col) {
  final rect = Rect.fromLTWH(x, y, size, size);
  final rrect = RRect.fromRectAndRadius(rect, Radius.circular(cornerRadius));

  switch (style) {
    case QRStyle.classic:
      canvas.drawRect(rect, paint);
      break;
    case QRStyle.rounded:
      canvas.drawRRect(rrect, paint);
      break;
    case QRStyle.dots:
      canvas.drawCircle(Offset(x + size / 2, y + size / 2), size / 2, paint);
      break;
    case QRStyle.diamond:
      final path = Path()
        ..moveTo(x + size / 2, y)
        ..lineTo(x + size, y + size / 2)
        ..lineTo(x + size / 2, y + size)
        ..lineTo(x, y + size / 2)
        ..close();
      canvas.drawPath(path, paint);
      break;
    case QRStyle.heart:
      _drawHeart(canvas, x, y, size, paint);
      break;
    case QRStyle.star:
      _drawStar(canvas, x, y, size, paint);
      break;
  }
}

5.2 渐变创建实现

Shader _createGradient(Rect rect) {
  switch (gradient) {
    case GradientType.none:
      return LinearGradient(colors: [primaryColor, primaryColor]).createShader(rect);
    case GradientType.linear:
      return LinearGradient(
        colors: [primaryColor, secondaryColor],
        begin: Alignment.topLeft,
        end: Alignment.bottomRight,
      ).createShader(rect);
    case GradientType.radial:
      return RadialGradient(
        colors: [primaryColor, secondaryColor],
      ).createShader(rect);
    case GradientType.sweep:
      return SweepGradient(
        colors: [primaryColor, secondaryColor, primaryColor],
      ).createShader(rect);
    case GradientType.rainbow:
      return LinearGradient(
        colors: [
          const Color(0xFFFF0000),
          const Color(0xFFFF7F00),
          const Color(0xFFFFFF00),
          const Color(0xFF00FF00),
          const Color(0xFF0000FF),
          const Color(0xFF4B0082),
          const Color(0xFF9400D3),
        ],
      ).createShader(rect);
    case GradientType.sunset:
      return LinearGradient(
        colors: [const Color(0xFFFF512F), const Color(0xFFF09819)],
        begin: Alignment.topCenter,
        end: Alignment.bottomCenter,
      ).createShader(rect);
  }
}

5.3 爱心绘制实现

void _drawHeart(Canvas canvas, double x, double y, double size, Paint paint) {
  final path = Path();
  final center = Offset(x + size / 2, y + size / 2);
  final scale = size / 30;

  path.moveTo(center.dx, center.dy + 8 * scale);
  path.cubicTo(
    center.dx - 10 * scale, center.dy - 5 * scale,
    center.dx - 10 * scale, center.dy - 15 * scale,
    center.dx, center.dy - 8 * scale,
  );
  path.cubicTo(
    center.dx + 10 * scale, center.dy - 15 * scale,
    center.dx + 10 * scale, center.dy - 5 * scale,
    center.dx, center.dy + 8 * scale,
  );

  canvas.drawPath(path, paint);
}

5.4 星形绘制实现

void _drawStar(Canvas canvas, double x, double y, double size, Paint paint) {
  final path = Path();
  final center = Offset(x + size / 2, y + size / 2);
  final outerRadius = size / 2;
  final innerRadius = size / 4;

  for (int i = 0; i < 10; i++) {
    final radius = i.isEven ? outerRadius : innerRadius;
    final angle = (i * 36 - 90) * 3.14159 / 180;
    final px = center.dx + radius * cos(angle);
    final py = center.dy + radius * sin(angle);

    if (i == 0) {
      path.moveTo(px, py);
    } else {
      path.lineTo(px, py);
    }
  }
  path.close();

  canvas.drawPath(path, paint);
}

5.5 二维码生成实现

void _generateQRCode() {
  if (_contentController.text.isEmpty) {
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(
        content: Text('请输入二维码内容'),
        backgroundColor: Colors.orange,
      ),
    );
    return;
  }

  setState(() {
    _isGenerating = true;
  });

  Future.delayed(const Duration(seconds: 2), () {
    final design = QRCodeDesign(
      id: 'design_${DateTime.now().millisecondsSinceEpoch}',
      name: '自定义设计 ${_savedDesigns.length + 1}',
      style: _selectedStyle,
      gradient: _selectedGradient,
      primaryColor: _primaryColor,
      secondaryColor: _secondaryColor,
      eyeStyle: _selectedEyeStyle,
      frameStyle: _selectedFrameStyle,
      logoPosition: _selectedLogoPosition,
      cornerRadius: _cornerRadius,
    );

    final qrCode = GeneratedQRCode(
      id: 'qr_${DateTime.now().millisecondsSinceEpoch}',
      content: _contentController.text,
      design: design,
    );

    setState(() {
      _history.insert(0, qrCode);
      _isGenerating = false;
    });
  });
}

---

六、交互设计

6.1 生成流程

6.2 设计应用流程

6.3 历史管理流程

---

七、扩展功能规划

7.1 后续版本规划

7.2 功能扩展建议

7.2.1 真实二维码生成

生成功能：

• 集成二维码生成库
• 支持多种编码格式
• 错误纠正级别设置
• 高分辨率导出

7.2.2 动态二维码

动态功能：

• GIF动画效果
• 渐变动画
• 粒子效果
• 交互式二维码

7.2.3 社交分享

分享功能：

• 一键分享到社交平台
• 批量导出
• 水印添加
• 云端备份

---

八、注意事项

8.1 开发注意事项

1. 可识别性：美化后的二维码必须保证可被扫描识别

2. 对比度：颜色搭配需保证足够的对比度

3. Logo大小：嵌入Logo不能遮挡过多二维码区域

4. 性能优化：复杂样式需优化绘制性能

5. 导出质量：导出图片需保证足够分辨率

8.2 常见问题

问题	原因	解决方案
无法扫描	对比度不足	调整颜色对比度
Logo遮挡过多	Logo尺寸过大	减小Logo尺寸
渐变效果异常	渐变范围错误	检查Shader设置
样式显示异常	绘制参数错误	检查路径计算
导出模糊	分辨率不足	提高导出分辨率

8.3 使用技巧

📱 二维码美化技巧 📱

样式选择建议

• 圆角方块：适合商务场景，专业大气
• 圆点样式：适合时尚品牌，潮流前卫
• 爱心样式：适合浪漫主题，温馨甜蜜
• 星形样式：适合娱乐活动，闪耀夺目

颜色搭配建议

• 科技蓝渐变：适合科技产品
• 浪漫粉渐变：适合女性品牌
• 彩虹渐变：适合创意活动
• 日落渐变：适合温暖主题

Logo嵌入技巧

• Logo不宜过大，建议不超过二维码面积的15%
• Logo周围留白，避免遮挡关键信息
• 选择与二维码风格协调的Logo

---

九、运行说明

9.1 环境要求

环境	版本要求
Flutter SDK	>= 3.0.0
Dart SDK	>= 2.17.0
鸿蒙OS	API 21+
Web浏览器	Chrome 90+

9.2 运行命令

# 查看可用设备
flutter devices

# 运行到Web服务器
flutter run -d web-server -t lib/main_qrcode_beautifier.dart --web-port 8140

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

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

---

十、总结

二维码美化器应用通过二维码生成、设计模板、生成历史、关于信息四大模块，为用户提供了一个便捷的二维码美化平台。应用支持6种样式风格、6种渐变效果、5种定位点样式、6种边框样式，让用户轻松打造独一无二的个性化二维码。

核心功能涵盖样式选择、颜色设置、渐变效果、Logo嵌入四大模块。样式风格从经典方块到星形样式，满足不同场景需求；渐变效果支持线性、径向、扫描、彩虹、日落等多种类型；颜色设置支持自定义主色副色和圆角调节；Logo嵌入支持5种位置选择。

应用采用 Material Design 3 设计规范，以清新的青色为主色调，象征科技与创新。通过本应用，希望能够帮助用户将普通二维码变成艺术品，让扫码也变得时尚。

二维码美化器——把二维码变成艺术品

---

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