🚀运行效果展示

Flutter框架跨平台鸿蒙开发——养生APP的开发流程

📝 前言

随着移动互联网的快速发展，跨平台开发框架越来越受到开发者的青睐。Flutter作为Google推出的开源UI框架，以其"一次编写，处处运行"的理念，为开发者提供了高效的跨平台开发解决方案。同时，华为推出的鸿蒙（HarmonyOS）系统凭借其分布式能力和全场景生态，成为了移动开发领域的新星。

本文将详细介绍如何使用Flutter框架开发一款跨平台的养生知识APP，并成功运行在鸿蒙系统上。我们将从项目规划、核心功能实现到最终部署，完整展示整个开发流程。

📱 项目介绍

1. 项目定位

本项目是一款专注于养生知识传播的移动应用，旨在为用户提供科学、实用的养生知识，帮助用户养成健康的生活习惯。

2. 核心功能

功能模块	功能描述
📚 养生知识列表	展示养生知识文章列表，支持分类筛选
🔍 搜索功能	支持按关键词搜索养生知识
📖 知识详情	展示养生知识的完整内容
⭐ 收藏功能	支持收藏和取消收藏养生知识
📱 跨平台支持	同时支持鸿蒙、Android、iOS等平台

3. 技术栈

技术	版本	用途
Flutter	3.10.0+	UI框架
Dart	3.0.0+	开发语言
HarmonyOS	3.0+	目标平台
Material Design	3.0	UI设计规范

🔄 开发流程

1. 项目规划与设计

1.1 需求分析

• 确定目标用户：关注健康养生的人群
• 梳理核心功能：知识列表、搜索、详情、收藏
• 确定技术栈：Flutter + Dart
• 设计UI/UX：遵循Material Design 3.0规范

1.2 项目架构设计

2. 项目初始化

2.1 创建Flutter项目

flutter create flutter_health_app
cd flutter_health_app

2.2 配置鸿蒙开发环境

1. 安装鸿蒙SDK
2. 配置Flutter鸿蒙插件
3. 连接鸿蒙设备或模拟器

3. 核心功能实现

3.1 数据模型设计

创建养生知识模型类，定义数据结构：

// 养生知识模型类
// 用于存储养生知识相关数据
class HealthKnowledgeModel {
  /// 唯一标识符
  final String id;
  
  /// 标题
  final String title;
  
  /// 分类（如饮食养生、运动养生、心理养生等）
  final String category;
  
  /// 内容
  final String content;
  
  /// 封面图片
  final String coverImage;
  
  /// 作者
  final String author;
  
  /// 发布日期
  final String publishDate;
  
  /// 阅读量
  final int readCount;
  
  /// 是否收藏
  bool isFavorite;

  /// 构造函数
  HealthKnowledgeModel({
    required this.id,
    required this.title,
    required this.category,
    required this.content,
    required this.coverImage,
    required this.author,
    required this.publishDate,
    required this.readCount,
    this.isFavorite = false,
  });

  /// 从JSON数据转换为HealthKnowledgeModel实例
  factory HealthKnowledgeModel.fromJson(Map<String, dynamic> json) {
    return HealthKnowledgeModel(
      id: json['id'],
      title: json['title'],
      category: json['category'],
      content: json['content'],
      coverImage: json['coverImage'],
      author: json['author'],
      publishDate: json['publishDate'],
      readCount: json['readCount'],
      isFavorite: json['isFavorite'] ?? false,
    );
  }

  /// 转换为JSON数据
  Map<String, dynamic> toJson() {
    return {
      'id': id,
      'title': title,
      'category': category,
      'content': content,
      'coverImage': coverImage,
      'author': author,
      'publishDate': publishDate,
      'readCount': readCount,
      'isFavorite': isFavorite,
    };
  }
}

3.2 数据服务实现

创建养生知识数据服务，提供模拟数据和数据操作方法：

// 养生知识数据服务
// 提供模拟养生知识数据用于展示
import '../models/health_knowledge_model.dart';

/// 养生知识数据服务类
class HealthKnowledgeDataService {
  /// 获取所有养生知识数据
  static List<HealthKnowledgeModel> getAllHealthKnowledge() {
    return [
      HealthKnowledgeModel(
        id: '1',
        title: '春季饮食养生：多吃这些食物增强免疫力',
        category: '饮食养生',
        content: '春季是万物复苏的季节，也是疾病多发的季节。在饮食上，我们应该多吃一些具有清热解毒、增强免疫力的食物。...',
        coverImage: 'https://via.placeholder.com/300x200?text=春季饮食养生',
        author: '养生专家',
        publishDate: '2024-03-15',
        readCount: 1234,
      ),
      // 更多模拟数据...
    ];
  }

  /// 根据ID获取养生知识数据
  static HealthKnowledgeModel? getHealthKnowledgeById(String id) {
    final knowledgeList = getAllHealthKnowledge();
    return knowledgeList.firstWhere((knowledge) => knowledge.id == id, orElse: () => knowledgeList.first);
  }

  /// 根据分类获取养生知识数据
  static List<HealthKnowledgeModel> getHealthKnowledgeByCategory(String category) {
    final knowledgeList = getAllHealthKnowledge();
    return knowledgeList.where((knowledge) => knowledge.category == category).toList();
  }

  /// 搜索养生知识
  static List<HealthKnowledgeModel> searchHealthKnowledge(String keyword) {
    final knowledgeList = getAllHealthKnowledge();
    final lowercaseKeyword = keyword.toLowerCase();
    return knowledgeList.where((knowledge) {
      return knowledge.title.toLowerCase().contains(lowercaseKeyword) ||
             knowledge.category.toLowerCase().contains(lowercaseKeyword) ||
             knowledge.content.toLowerCase().contains(lowercaseKeyword);
    }).toList();
  }

  /// 获取收藏的养生知识
  static List<HealthKnowledgeModel> getFavoriteHealthKnowledge() {
    final knowledgeList = getAllHealthKnowledge();
    return knowledgeList.where((knowledge) => knowledge.isFavorite).toList();
  }
}

3.3 养生知识列表页实现

创建养生知识列表页，支持分类筛选和搜索：

// 养生知识列表页面
// 展示所有养生知识的列表，支持分类筛选和搜索
import 'package:flutter/material.dart';
import '../models/health_knowledge_model.dart';
import '../services/health_knowledge_service.dart';

/// 养生知识列表页面
class HealthKnowledgeListPage extends StatefulWidget {
  /// 构造函数
  const HealthKnowledgeListPage({super.key});

  @override
  State<HealthKnowledgeListPage> createState() => _HealthKnowledgeListPageState();
}

class _HealthKnowledgeListPageState extends State<HealthKnowledgeListPage> {
  /// 所有养生知识数据
  List<HealthKnowledgeModel> _knowledgeList = [];
  
  /// 筛选后的养生知识数据
  List<HealthKnowledgeModel> _filteredKnowledgeList = [];
  
  /// 养生知识分类列表
  List<String> _categories = ['全部', '饮食养生', '运动养生', '心理养生', '季节养生'];
  
  /// 当前选中的分类
  String _selectedCategory = '全部';
  
  /// 搜索关键词
  String _searchKeyword = '';
  
  /// 搜索控制器
  final TextEditingController _searchController = TextEditingController();

  @override
  void initState() {
    super.initState();
    _loadHealthKnowledge();
    _searchController.addListener(_onSearchChanged);
  }

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

  /// 加载养生知识数据
  void _loadHealthKnowledge() {
    setState(() {
      _knowledgeList = HealthKnowledgeDataService.getAllHealthKnowledge();
      _filteredKnowledgeList = _knowledgeList;
    });
  }

  /// 搜索功能
  void _onSearchChanged() {
    setState(() {
      _searchKeyword = _searchController.text;
      _filterKnowledge();
    });
  }

  /// 筛选养生知识
  void _filterKnowledge() {
    List<HealthKnowledgeModel> result = _knowledgeList;
    
    // 按分类筛选
    if (_selectedCategory != '全部') {
      result = result.where((knowledge) => knowledge.category == _selectedCategory).toList();
    }
    
    // 按关键词搜索
    if (_searchKeyword.isNotEmpty) {
      final lowercaseKeyword = _searchKeyword.toLowerCase();
      result = result.where((knowledge) {
        return knowledge.title.toLowerCase().contains(lowercaseKeyword) ||
               knowledge.category.toLowerCase().contains(lowercaseKeyword) ||
               knowledge.content.toLowerCase().contains(lowercaseKeyword);
      }).toList();
    }
    
    setState(() {
      _filteredKnowledgeList = result;
    });
  }

  /// 切换分类
  void _onCategoryChanged(String category) {
    setState(() {
      _selectedCategory = category;
      _filterKnowledge();
    });
  }

  /// 跳转到养生知识详情页面
  void _navigateToHealthKnowledgeDetail(HealthKnowledgeModel knowledge) {
    Navigator.pushNamed(
      context,
      '/health_detail',
      arguments: knowledge,
    );
  }

  /// 跳转到收藏页面
  void _navigateToFavoritesPage() {
    Navigator.pushNamed(context, '/favorites');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('养生知识大全'),
        actions: [
          IconButton(
            icon: const Icon(Icons.favorite_outline),
            onPressed: _navigateToFavoritesPage,
            tooltip: '我的收藏',
          ),
        ],
      ),
      body: Column(
        children: [
          // 搜索栏
          Padding(
            padding: const EdgeInsets.all(12.0),
            child: TextField(
              controller: _searchController,
              decoration: InputDecoration(
                hintText: '搜索养生知识...',
                prefixIcon: const Icon(Icons.search),
                suffixIcon: _searchKeyword.isNotEmpty
                    ? IconButton(
                        icon: const Icon(Icons.clear),
                        onPressed: () {
                          _searchController.clear();
                        },
                      )
                    : null,
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(20.0),
                ),
              ),
            ),
          ),
          
          // 分类筛选
          SizedBox(
            height: 50.0,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: _categories.length,
              itemBuilder: (context, index) {
                final category = _categories[index];
                return Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 8.0),
                  child: ChoiceChip(
                    label: Text(category),
                    selected: _selectedCategory == category,
                    onSelected: (selected) {
                      if (selected) {
                        _onCategoryChanged(category);
                      }
                    },
                    backgroundColor: Theme.of(context).colorScheme.surface,
                    selectedColor: Theme.of(context).colorScheme.primary,
                    labelStyle: TextStyle(
                      color: _selectedCategory == category
                          ? Theme.of(context).colorScheme.onPrimary
                          : Theme.of(context).colorScheme.onSurface,
                    ),
                  ),
                );
              },
            ),
          ),
          
          // 养生知识列表
          Expanded(
            child: _filteredKnowledgeList.isEmpty
                ? const Center(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Icon(
                          Icons.book_outlined,
                          size: 64.0,
                          color: Colors.grey,
                        ),
                        SizedBox(height: 16.0),
                        Text(
                          '没有找到匹配的养生知识',
                          style: TextStyle(fontSize: 18.0, color: Colors.grey),
                        ),
                      ],
                    ),
                  )
                : ListView.builder(
                    padding: const EdgeInsets.all(12.0),
                    itemCount: _filteredKnowledgeList.length,
                    itemBuilder: (context, index) {
                      final knowledge = _filteredKnowledgeList[index];
                      return GestureDetector(
                        onTap: () => _navigateToHealthKnowledgeDetail(knowledge),
                        child: Card(
                          elevation: 2.0,
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(12.0),
                          ),
                          child: Row(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              // 封面图片
                              ClipRRect(
                                borderRadius: const BorderRadius.only(
                                  topLeft: Radius.circular(12.0),
                                  bottomLeft: Radius.circular(12.0),
                                ),
                                child: Image.network(
                                  knowledge.coverImage,
                                  width: 120.0,
                                  height: 120.0,
                                  fit: BoxFit.cover,
                                  errorBuilder: (context, error, stackTrace) {
                                    return Container(
                                      width: 120.0,
                                      height: 120.0,
                                      color: Colors.grey[200],
                                      child: const Center(
                                        child: Icon(Icons.error_outline),
                                      ),
                                    );
                                  },
                                ),
                              ),
                              
                              // 养生知识信息
                              Expanded(
                                child: Padding(
                                  padding: const EdgeInsets.all(12.0),
                                  child: Column(
                                    crossAxisAlignment: CrossAxisAlignment.start,
                                    children: [
                                      // 标题
                                      Text(
                                        knowledge.title,
                                        style: const TextStyle(
                                          fontSize: 16.0,
                                          fontWeight: FontWeight.bold,
                                        ),
                                        maxLines: 2,
                                        overflow: TextOverflow.ellipsis,
                                      ),
                                      
                                      const SizedBox(height: 8.0),
                                      
                                      // 分类标签
                                      Container(
                                        padding: const EdgeInsets.symmetric(
                                          horizontal: 8.0,
                                          vertical: 4.0,
                                        ),
                                        decoration: BoxDecoration(
                                          color: Theme.of(context).colorScheme.primary.withOpacity(0.1),
                                          borderRadius: BorderRadius.circular(12.0),
                                        ),
                                        child: Text(
                                          knowledge.category,
                                          style: TextStyle(
                                            fontSize: 12.0,
                                            color: Theme.of(context).colorScheme.primary,
                                          ),
                                        ),
                                      ),
                                      
                                      const SizedBox(height: 8.0),
                                      
                                      // 内容摘要
                                      Text(
                                        knowledge.content,
                                        style: TextStyle(
                                          fontSize: 14.0,
                                          color: Colors.grey[600],
                                        ),
                                        maxLines: 2,
                                        overflow: TextOverflow.ellipsis,
                                      ),
                                      
                                      const SizedBox(height: 8.0),
                                      
                                      // 作者和发布日期
                                      Row(
                                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                        children: [
                                          Text(
                                            knowledge.author,
                                            style: TextStyle(
                                              fontSize: 12.0,
                                              color: Colors.grey[500],
                                            ),
                                          ),
                                          Row(
                                            children: [
                                              Text(
                                                knowledge.publishDate,
                                                style: TextStyle(
                                                  fontSize: 12.0,
                                                  color: Colors.grey[500],
                                                ),
                                              ),
                                              const SizedBox(width: 12.0),
                                              Icon(
                                                Icons.remove_red_eye_outlined,
                                                size: 14.0,
                                                color: Colors.grey[500],
                                              ),
                                              const SizedBox(width: 4.0),
                                              Text(
                                                knowledge.readCount.toString(),
                                                style: TextStyle(
                                                  fontSize: 12.0,
                                                  color: Colors.grey[500],
                                                ),
                                              ),
                                            ],
                                          ),
                                        ],
                                      ),
                                    ],
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ),
                      );
                    },
                  ),
          ),
        ],
      ),
    );
  }
}

3.4 养生知识详情页实现

创建养生知识详情页，展示完整的养生知识内容：

// 养生知识详情页面
// 展示养生知识的详细内容和相关信息
import 'package:flutter/material.dart';
import '../models/health_knowledge_model.dart';

/// 养生知识详情页面
class HealthKnowledgeDetailPage extends StatelessWidget {
  /// 构造函数
  const HealthKnowledgeDetailPage({super.key});

  @override
  Widget build(BuildContext context) {
    // 获取传递过来的养生知识数据
    final HealthKnowledgeModel knowledge = ModalRoute.of(context)!.settings.arguments as HealthKnowledgeModel;

    return Scaffold(
      backgroundColor: Theme.of(context).colorScheme.background,
      body: CustomScrollView(
        slivers: [
          // 顶部图片和导航栏
          SliverAppBar(
            expandedHeight: 250.0,
            pinned: true,
            flexibleSpace: FlexibleSpaceBar(
              title: Text(
                knowledge.title,
                style: TextStyle(
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                  shadows: [
                    Shadow(
                      blurRadius: 3.0,
                      color: Colors.black.withOpacity(0.5),
                      offset: const Offset(0, 1),
                    ),
                  ],
                ),
                overflow: TextOverflow.ellipsis,
                maxLines: 1,
              ),
              background: Stack(
                fit: StackFit.expand,
                children: [
                  Image.network(
                    knowledge.coverImage,
                    fit: BoxFit.cover,
                    errorBuilder: (context, error, stackTrace) {
                      return Container(
                        color: Colors.grey[200],
                        child: const Center(
                          child: Icon(Icons.error_outline, size: 64.0),
                        ),
                      );
                    },
                  ),
                  // 渐变遮罩，使标题更清晰
                  const DecoratedBox(
                    decoration: BoxDecoration(
                      gradient: LinearGradient(
                        begin: Alignment(0.0, 0.5),
                        end: Alignment.center,
                        colors: <Color>[
                          Color(0x60000000),
                          Color(0x00000000),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
            actions: [
              IconButton(
                icon: Icon(
                  knowledge.isFavorite ? Icons.favorite : Icons.favorite_outline,
                  color: knowledge.isFavorite ? Colors.red : null,
                ),
                onPressed: () {
                  // 收藏功能逻辑，这里只是模拟
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(
                      content: Text(
                        knowledge.isFavorite ? '已取消收藏' : '已添加到收藏',
                      ),
                      duration: const Duration(seconds: 1),
                    ),
                  );
                },
                tooltip: knowledge.isFavorite ? '取消收藏' : '添加收藏',
              ),
            ],
          ),

          // 养生知识详细信息
          SliverList(
            delegate: SliverChildListDelegate([
              Padding(
                padding: const EdgeInsets.all(16.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    // 分类标签
                    Container(
                      padding: const EdgeInsets.symmetric(horizontal: 12.0, vertical: 4.0),
                      decoration: BoxDecoration(
                        color: Theme.of(context).colorScheme.primary.withOpacity(0.1),
                        borderRadius: BorderRadius.circular(16.0),
                      ),
                      child: Text(
                        knowledge.category,
                        style: TextStyle(
                          fontSize: 14.0,
                          color: Theme.of(context).colorScheme.primary,
                          fontWeight: FontWeight.w500,
                        ),
                      ),
                    ),

                    const SizedBox(height: 16.0),

                    // 作者和发布信息
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          '作者：${knowledge.author}',
                          style: TextStyle(
                            fontSize: 14.0,
                            color: Theme.of(context).colorScheme.onSurfaceVariant,
                          ),
                        ),
                        Row(
                          children: [
                            Text(
                              knowledge.publishDate,
                              style: TextStyle(
                                fontSize: 14.0,
                                color: Theme.of(context).colorScheme.onSurfaceVariant,
                              ),
                            ),
                            const SizedBox(width: 16.0),
                            Icon(
                              Icons.remove_red_eye_outlined,
                              size: 16.0,
                              color: Theme.of(context).colorScheme.onSurfaceVariant,
                            ),
                            const SizedBox(width: 4.0),
                            Text(
                              knowledge.readCount.toString(),
                              style: TextStyle(
                                fontSize: 14.0,
                                color: Theme.of(context).colorScheme.onSurfaceVariant,
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),

                    const SizedBox(height: 24.0),

                    // 内容标题
                    const Text(
                      '内容详情',
                      style: TextStyle(
                        fontSize: 20.0,
                        fontWeight: FontWeight.bold,
                      ),
                    ),

                    const SizedBox(height: 16.0),

                    // 内容展示
                    Text(
                      knowledge.content,
                      style: TextStyle(
                        fontSize: 16.0,
                        height: 1.8,
                        color: Theme.of(context).colorScheme.onSurface,
                      ),
                    ),

                    const SizedBox(height: 40.0),

                    // 相关推荐
                    const Text(
                      '相关推荐',
                      style: TextStyle(
                        fontSize: 20.0,
                        fontWeight: FontWeight.bold,
                      ),
                    ),

                    const SizedBox(height: 16.0),

                    // 相关推荐列表
                    Container(
                      height: 120.0,
                      color: Colors.grey[200],
                      child: const Center(
                        child: Text(
                          '相关推荐功能开发中...',
                          style: TextStyle(color: Colors.grey),
                        ),
                      ),
                    ),

                    const SizedBox(height: 40.0),
                  ],
                ),
              ),
            ]),
          ),
        ],
      ),
    );
  }
}

3.5 路由配置

在main.dart中配置应用路由：

// 养生知识大全APP

import 'package:flutter/material.dart';
import 'pages/health_knowledge_list_page.dart';
import 'pages/health_knowledge_detail_page.dart';
import 'pages/search_page.dart';
import 'pages/favorites_page.dart';

/// 主入口函数
void main() {
  runApp(const MyApp());
}

/// 应用根组件
class MyApp extends StatelessWidget {
  /// 构造函数
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '养生知识大全',
      /// 禁用Debug模式下的右上角DEBUG横幅
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        /// 主色调 - 使用蓝色系，代表健康、平静
        primarySwatch: Colors.blue,
        /// 应用整体亮度
        brightness: Brightness.light,
        /// 文本主题
        textTheme: const TextTheme(
          bodyLarge: TextStyle(fontSize: 16.0),
          bodyMedium: TextStyle(fontSize: 14.0),
          titleLarge: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
        ),
        /// 卡片主题
        cardTheme: CardTheme(
          elevation: 2.0,
          margin: const EdgeInsets.all(8.0),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(12.0),
          ),
        ),
        /// 按钮主题
        elevatedButtonTheme: ElevatedButtonThemeData(
          style: ElevatedButton.styleFrom(
            padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(8.0),
            ),
          ),
        ),
        /// 应用栏主题
        appBarTheme: const AppBarTheme(
          elevation: 0.0,
          centerTitle: true,
        ),
      ),
      darkTheme: ThemeData(
        primarySwatch: Colors.blue,
        brightness: Brightness.dark,
      ),
      themeMode: ThemeMode.system,
      /// 首页路由
      home: const HealthKnowledgeListPage(),
      /// 命名路由
      routes: {
        '/health_detail': (context) => const HealthKnowledgeDetailPage(),
        '/search': (context) => const SearchPage(),
        '/favorites': (context) => const FavoritesPage(),
      },
    );
  }
}

4. 鸿蒙平台适配与部署

4.1 配置鸿蒙开发环境

1. 安装鸿蒙SDK和DevEco Studio
2. 配置Flutter鸿蒙插件
3. 注册华为开发者账号
4. 创建鸿蒙应用签名

4.2 构建鸿蒙HAP包

flutter build ohos

4.3 部署到鸿蒙设备

1. 连接鸿蒙设备或模拟器
2. 安装HAP包
3. 运行应用

flutter run -d ohos

5. 测试与优化

5.1 功能测试

• 测试养生知识列表展示
• 测试分类筛选功能
• 测试搜索功能
• 测试详情页展示
• 测试收藏功能

5.2 性能优化

• 优化图片加载
• 优化列表滚动性能
• 减少不必要的重建
• 优化网络请求

5.3 UI/UX优化

• 适配不同屏幕尺寸
• 优化动画效果
• 改善交互体验
• 遵循鸿蒙设计规范

🎯 总结与展望

1. 项目总结

通过本次项目开发，我们成功实现了一款基于Flutter框架的跨平台养生知识APP，并成功运行在鸿蒙系统上。主要收获包括：

• 掌握了Flutter框架的核心开发技能
• 了解了鸿蒙系统的开发流程和适配要点
• 学会了如何设计和实现一个完整的移动应用
• 提高了跨平台开发能力

📚 参考资料

1. Flutter官方文档
2. HarmonyOS开发者文档
3. Dart编程语言文档
4. Material Design 3.0文档
5. Flutter鸿蒙插件文档

---

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