🚀运行效果展示

前言

随着移动互联网的快速发展，二维码作为一种便捷的信息载体，已广泛应用于支付、社交、营销等多个领域。同时，跨平台开发技术也在不断演进，Flutter凭借其高性能、跨平台一致性等优势，成为移动开发的热门选择。而鸿蒙操作系统作为华为自主研发的分布式操作系统，正逐步构建起完整的生态体系。本文将介绍如何结合鸿蒙与Flutter，实现一个功能完整、交互友好的二维码生成器应用。

技术栈选择

• 鸿蒙系统：作为应用的运行环境，提供底层硬件访问和系统服务
• Flutter 3.6：用于构建跨平台UI，实现一次开发、多端运行
• qr_flutter 4.1.0：专业的二维码生成库，支持多种二维码类型和自定义样式
• Dart 3.6：Flutter的开发语言，提供现代化的语法特性

应用介绍

功能概述

本应用是一个功能完整的二维码生成器，支持用户输入任意文本、URL、电话号码、邮箱地址或WiFi信息，实时生成对应的二维码。主要功能包括：

1. 实时生成：输入内容变化时立即更新二维码
2. 多种内容支持：文本、URL、电话、邮箱、WiFi等
3. 响应式设计：适配不同屏幕尺寸
4. 主题切换：支持浅色/深色主题自动切换
5. 友好的用户体验：清晰的视觉引导和状态提示

应用架构

应用采用典型的Flutter分层架构，结合鸿蒙系统特性，实现跨平台运行。架构图如下：

核心功能实现

1. 技术架构设计

应用采用MVVM架构模式，将UI与业务逻辑分离，提高代码的可维护性和扩展性。

层级	职责	实现方式
视图层	负责UI渲染和用户交互	Flutter Widgets
视图模型层	处理业务逻辑和状态管理	StatefulWidget/Provider
模型层	数据模型和业务实体	Dart类
服务层	二维码生成服务	qr_flutter库

2. 核心流程设计

用户输入内容到生成二维码的完整流程如下：

3. 关键代码实现

3.1 主应用入口

import 'package:flutter/material.dart';
import 'package:qr_flutter/qr_flutter.dart';

void main() {
  runApp(const QrCodeGeneratorApp());
}

/// 二维码生成器主应用类
class QrCodeGeneratorApp extends StatelessWidget {
  const QrCodeGeneratorApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '二维码生成器',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
      ),
      darkTheme: ThemeData(
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.blue,
          brightness: Brightness.dark,
        ),
        useMaterial3: true,
      ),
      themeMode: ThemeMode.system,
      home: const QrCodeGeneratorHomePage(),
    );
  }
}

3.2 主页面实现

/// 二维码生成器主页面
class QrCodeGeneratorHomePage extends StatefulWidget {
  const QrCodeGeneratorHomePage({super.key});

  @override
  State<QrCodeGeneratorHomePage> createState() => _QrCodeGeneratorHomePageState();
}

class _QrCodeGeneratorHomePageState extends State<QrCodeGeneratorHomePage> {
  // 输入文本控制器
  final TextEditingController _textController = TextEditingController(
    text: 'https://www.example.com',
  );
  
  // 二维码大小
  static const double _qrCodeSize = 250.0;

  @override
  void dispose() {
    _textController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('二维码生成器'),
        centerTitle: true,
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(24.0),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              // 应用图标和标题
              const SizedBox(height: 20),
              Icon(
                Icons.qr_code_2,
                size: 80,
                color: Theme.of(context).primaryColor,
              ),
              const SizedBox(height: 16),
              Text(
                '轻松生成二维码',
                style: Theme.of(context).textTheme.headlineSmall,
                textAlign: TextAlign.center,
              ),
              const SizedBox(height: 8),
              Text(
                '输入文本或URL，立即生成可扫描的二维码',
                style: Theme.of(context).textTheme.bodyMedium?.copyWith(
                      color: Colors.grey,
                    ),
                textAlign: TextAlign.center,
              ),
              const SizedBox(height: 40),
              
              // 输入框
              Card(
                elevation: 4,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(12),
                ),
                child: Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        '输入内容',
                        style: Theme.of(context).textTheme.titleMedium?.copyWith(
                              fontWeight: FontWeight.bold,
                            ),
                      ),
                      const SizedBox(height: 12),
                      TextField(
                        controller: _textController,
                        decoration: InputDecoration(
                          hintText: '请输入要生成二维码的文本或URL',
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(8),
                          ),
                          suffixIcon: IconButton(
                            icon: const Icon(Icons.clear),
                            onPressed: () {
                              _textController.clear();
                              setState(() {});
                            },
                          ),
                        ),
                        maxLines: 3,
                        onChanged: (value) {
                          setState(() {});
                        },
                      ),
                    ],
                  ),
                ),
              ),
              const SizedBox(height: 40),
              
              // 二维码显示区域
              Card(
                elevation: 4,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(12),
                ),
                child: Padding(
                  padding: const EdgeInsets.all(24.0),
                  child: Column(
                    children: [
                      Text(
                        '生成的二维码',
                        style: Theme.of(context).textTheme.titleMedium?.copyWith(
                              fontWeight: FontWeight.bold,
                            ),
                      ),
                      const SizedBox(height: 20),
                      
                      // 二维码
                      _buildQrCode(),
                      const SizedBox(height: 20),
                      
                      // 输入内容预览
                      if (_textController.text.isNotEmpty) 
                        Card(
                          color: Colors.grey.shade100,
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(8),
                          ),
                          child: Padding(
                            padding: const EdgeInsets.all(12.0),
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text(
                                  '内容预览:',
                                  style: Theme.of(context).textTheme.bodySmall?.copyWith(
                                        color: Colors.grey,
                                      ),
                                ),
                                const SizedBox(height: 4),
                                Text(
                                  _textController.text,
                                  style: Theme.of(context).textTheme.bodyMedium,
                                  maxLines: 2,
                                  overflow: TextOverflow.ellipsis,
                                ),
                              ],
                            ),
                          ),
                        ),
                    ],
                  ),
                ),
              ),
              const SizedBox(height: 40),
              
              // 功能说明
              _buildFeatureList(),
              const SizedBox(height: 40),
            ],
          ),
        ),
      ),
    );
  }
  
  /// 构建二维码组件
  Widget _buildQrCode() {
    final String qrData = _textController.text.trim();
    
    if (qrData.isEmpty) {
      return SizedBox(
        width: _qrCodeSize,
        height: _qrCodeSize,
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(
                Icons.info_outline,
                size: 60,
                color: Colors.grey.shade400,
              ),
              const SizedBox(height: 16),
              Text(
                '请输入内容生成二维码',
                textAlign: TextAlign.center,
                style: TextStyle(
                  color: Colors.grey.shade500,
                ),
              ),
            ],
          ),
        ),
      );
    }
    
    return QrImageView(
      data: qrData,
      version: QrVersions.auto,
      size: _qrCodeSize,
      gapless: false,
      eyeStyle: const QrEyeStyle(
        eyeShape: QrEyeShape.square,
        color: Colors.black,
      ),
      dataModuleStyle: const QrDataModuleStyle(
        dataModuleShape: QrDataModuleShape.square,
        color: Colors.black,
      ),
      embeddedImageStyle: const QrEmbeddedImageStyle(
        size: Size(40, 40),
      ),
    );
  }
  
  /// 构建功能列表
  Widget _buildFeatureList() {
    return Column(
      children: [
        Text(
          '功能特点',
          style: Theme.of(context).textTheme.titleMedium?.copyWith(
                fontWeight: FontWeight.bold,
              ),
        ),
        const SizedBox(height: 16),
        
        Wrap(
          spacing: 16,
          runSpacing: 16,
          alignment: WrapAlignment.center,
          children: [
            _buildFeatureItem(
              icon: Icons.text_fields,
              title: '文本支持',
              description: '支持输入任意文本',
            ),
            _buildFeatureItem(
              icon: Icons.link,
              title: 'URL支持',
              description: '直接生成网址二维码',
            ),
            _buildFeatureItem(
              icon: Icons.phone,
              title: '电话支持',
              description: '生成电话拨号二维码',
            ),
            _buildFeatureItem(
              icon: Icons.email,
              title: '邮件支持',
              description: '生成邮件发送二维码',
            ),
            _buildFeatureItem(
              icon: Icons.wifi,
              title: 'WiFi支持',
              description: '生成WiFi连接二维码',
            ),
            _buildFeatureItem(
              icon: Icons.qr_code_scanner,
              title: '高清晰度',
              description: '生成清晰可扫描的二维码',
            ),
          ],
        ),
      ],
    );
  }
  
  /// 构建功能项
  Widget _buildFeatureItem({
    required IconData icon,
    required String title,
    required String description,
  }) {
    return SizedBox(
      width: 150,
      child: Column(
        children: [
          CircleAvatar(
            radius: 30,
            backgroundColor: Theme.of(context).primaryColor.withOpacity(0.1),
            child: Icon(
              icon,
              size: 30,
              color: Theme.of(context).primaryColor,
            ),
          ),
          const SizedBox(height: 8),
          Text(
            title,
            style: Theme.of(context).textTheme.titleSmall?.copyWith(
                  fontWeight: FontWeight.bold,
                ),
          ),
          const SizedBox(height: 4),
          Text(
            description,
            textAlign: TextAlign.center,
            style: Theme.of(context).textTheme.bodySmall?.copyWith(
                  color: Colors.grey,
                ),
          ),
        ],
      ),
    );
  }
}

3.3 关键技术点解析

1. 实时更新机制

   • 使用TextField的onChanged回调，当输入内容变化时触发setState()
   • 结合Flutter的响应式框架，自动重建UI组件，实现二维码实时更新

2. 二维码生成逻辑

   • 调用QrImageView组件，传入输入文本作为data参数
   • 设置version: QrVersions.auto，让库自动根据内容复杂度选择合适的二维码版本
   • 自定义二维码样式，包括眼睛形状、数据模块形状和颜色

3. 状态管理

   • 使用StatefulWidget管理应用状态，适合简单应用场景
   • 对于复杂应用，可以考虑使用Provider、Bloc等状态管理方案

4. 响应式设计

   • 使用SingleChildScrollView确保内容在小屏幕上可滚动
   • 使用Center和Column实现居中布局
   • 使用Wrap组件实现功能列表的自动换行

5. 空状态处理

   • 当输入为空时，显示友好的提示信息，提高用户体验
   • 使用条件渲染if (_textController.text.isNotEmpty)显示内容预览

应用构建与运行

1. 项目配置

在pubspec.yaml中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.8
  qr_flutter: ^4.1.0

2. 构建命令

# 获取依赖
flutter pub get

# 构建鸿蒙应用
flutter run

3. 运行效果

应用成功运行后，用户可以看到以下界面：

1. 主界面：包含应用图标、标题、输入区域、二维码显示区域和功能说明
2. 输入体验：支持多行输入，提供清空按钮
3. 实时反馈：输入内容变化时，二维码立即更新
4. 主题适配：根据系统设置自动切换浅色/深色主题

总结

项目成果

本文成功实现了一个基于鸿蒙+Flutter的跨平台二维码生成器应用，具有以下特点：

1. 功能完整：支持多种类型的二维码生成，满足日常使用需求
2. 交互友好：实时更新、清晰的视觉引导、友好的空状态提示
3. 跨平台兼容：基于Flutter框架，可轻松适配鸿蒙、Android、iOS等多个平台
4. 现代化设计：采用Material 3设计语言，支持主题切换
5. 代码结构清晰：采用分层架构，代码可读性和可维护性高

技术优势

1. Flutter的优势：

   • 高性能：接近原生应用的性能表现
   • 跨平台一致性：一套代码，多端运行
   • 热重载：提高开发效率
   • 丰富的生态：大量成熟的第三方库

2. 鸿蒙+Flutter结合的优势：

   • 利用鸿蒙系统的分布式能力
   • 享受Flutter的开发效率和跨平台优势
   • 接入鸿蒙生态，拓展应用分发渠道

未来展望

1. 功能扩展：

   • 添加二维码扫描功能
   • 支持二维码样式自定义（颜色、Logo等）
   • 实现二维码保存和分享功能
   • 添加历史记录功能

2. 技术优化：

   • 采用更高效的状态管理方案
   • 优化大内容量的二维码生成性能
   • 实现离线生成功能
   • 接入鸿蒙分布式能力，实现多设备协同

3. 生态融合：

   • 接入鸿蒙应用市场
   • 支持鸿蒙的原子化服务
   • 实现与鸿蒙系统服务的深度集成

结语

本文介绍了如何结合鸿蒙与Flutter实现二维码生成器应用，展示了跨平台开发的优势和实践方法。随着鸿蒙生态的不断发展和Flutter技术的持续演进，两者的结合将为开发者提供更多可能性。希望本文能为开发者提供参考，共同推动跨平台开发技术的发展。

通过鸿蒙+Flutter的组合，我们可以充分发挥各自的优势，实现高效开发、多端运行的目标，为用户提供优质的应用体验。在未来的移动开发领域，跨平台技术将继续扮演重要角色，而鸿蒙+Flutter的结合有望成为一个重要的技术方向。

---

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