鸿蒙+Flutter 跨平台开发——自定义单词速记APP开发实战

🚀运行效果展示

一、前言

1.1 背景

随着移动互联网的普及和跨平台开发技术的快速发展，越来越多的开发者选择使用Flutter等跨平台框架来构建移动应用。Flutter凭借其"一次编写，处处运行"的特性，以及优秀的性能和开发体验，成为了跨平台开发的热门选择。

华为的HarmonyOS作为全新的分布式操作系统，也在不断扩大其生态影响力。将Flutter与HarmonyOS结合，开发跨平台应用，具有重要的实际意义和市场价值。

1.2 单词速记APP的重要性

在全球化的背景下，英语学习成为了越来越多人的需求。单词记忆是英语学习的基础，一款好的单词速记APP可以帮助用户更高效地记忆单词，提高学习效果。

自定义单词速记APP允许用户根据自己的需求添加和管理单词，提供个性化的学习体验，受到了广大学习者的欢迎。

二、应用介绍

2.1 应用功能概述

本应用是一款基于Flutter和HarmonyOS开发的跨平台自定义单词速记APP，主要功能包括：

• 📚 单词管理：添加、编辑、删除自定义单词
• 🔍 单词搜索：支持按单词或中文释义搜索
• 📊 记忆状态管理：未记忆、已记忆、已掌握三级状态
• 📈 学习统计：直观展示学习进度和成果
• 🎨 美观界面：采用Material Design 3设计风格

2.2 技术栈

技术	版本	用途
Flutter	3.16.0	跨平台UI框架
Dart	3.2.0	开发语言
Provider	6.1.1	状态管理
HarmonyOS	4.0	目标平台

2.3 应用架构

┌───────────────────────────────────────────────────────────┐
│                    应用层 (UI)                            │
├───────────────────────────────────────────────────────────┤
│  主页(WordHomeScreen)  ├─── 添加/编辑页(AddWordScreen)    │
├───────────────────────────────────────────────────────────┤
│                    状态管理层 (Provider)                  │
├───────────────────────────────────────────────────────────┤
│                    WordProvider                           │
├───────────────────────────────────────────────────────────┤
│                    服务层 (Service)                       │
├───────────────────────────────────────────────────────────┤
│                    WordStorageService                     │
├───────────────────────────────────────────────────────────┤
│                    数据层 (Model)                         │
├───────────────────────────────────────────────────────────┤
│                    WordItem                               │
└───────────────────────────────────────────────────────────┘

三、核心功能实现及代码展示

3.1 数据模型设计

3.1.1 单词数据模型

单词模型是整个应用的核心数据结构，包含了单词的各种属性。

/// 单词数据模型
class WordItem {
  /// 唯一标识符
  final String id;

  /// 单词
  final String word;

  /// 音标
  final String phonetic;

  /// 中文释义
  final String chineseMeaning;

  /// 英文例句
  final String example;

  /// 例句中文翻译
  final String exampleTranslation;

  /// 记忆状态（0：未记忆，1：已记忆，2：已掌握）
  final int memoryState;

  /// 创建时间
  final DateTime createdAt;

  /// 更新时间
  final DateTime updatedAt;

  // 构造函数、fromMap、toMap、newWord、copyWith方法...
}

3.2 存储服务实现

为了适配HarmonyOS平台，我们采用了内存存储方案，避免了使用平台特定的存储插件，提高了应用的兼容性。

/// 单词存储服务类，用于管理单词的存储和检索
class WordStorageService {
  /// 内存存储（临时解决方案，适用于鸿蒙平台）
  List<WordItem> _inMemoryStorage = [];

  /// 保存所有单词
  Future<void> saveWords(List<WordItem> words) async {
    _inMemoryStorage = List.from(words);
  }

  /// 获取所有单词
  Future<List<WordItem>> getWords() async {
    return List.from(_inMemoryStorage);
  }

  /// 添加一个单词
  Future<void> addWord(WordItem word) async {
    _inMemoryStorage.add(word);
  }

  // 其他存储方法...
}

3.3 状态管理设计

使用Provider进行状态管理，实现了WordProvider类来管理单词应用的状态和业务逻辑。

/// 单词提供者，用于管理单词的状态
class WordProvider with ChangeNotifier {
  final WordStorageService _storageService = WordStorageService();
  List<WordItem> _words = [];
  bool _isLoading = false;
  String _searchQuery = '';
  int _currentMemoryState = 0;

  /// 获取单词列表
  List<WordItem> get words {
    // 搜索和记忆状态过滤逻辑...
  }

  /// 加载所有单词
  Future<void> loadWords() async {
    // 加载逻辑...
  }

  /// 添加一个单词
  Future<void> addWord(WordItem word) async {
    // 添加逻辑...
  }

  /// 更新一个单词
  Future<void> updateWord(WordItem word) async {
    // 更新逻辑...
  }

  /// 删除一个单词
  Future<void> deleteWord(String id) async {
    // 删除逻辑...
  }

  /// 更新单词记忆状态
  Future<void> updateWordMemoryState(String id, int memoryState) async {
    // 更新记忆状态逻辑...
  }

  /// 获取单词统计信息
  Map<String, int> getWordStatistics() {
    // 统计逻辑...
  }
}

3.4 主页面实现

主页面是应用的入口，包含了单词列表、搜索功能、记忆状态筛选和统计信息。

3.4.1 页面布局设计

@override
Widget build(BuildContext context) {
  final provider = Provider.of<WordProvider>(context);
  final words = provider.words;

  return Scaffold(
    appBar: AppBar(
      title: const Text('单词记忆'),
      centerTitle: true,
      actions: [
        IconButton(
          icon: const Icon(Icons.search),
          onPressed: () {
            _showSearchDialog(context, provider);
          },
        ),
      ],
    ),
    body: Column(
      children: [
        // 记忆状态筛选
        _buildMemoryStateFilter(provider),

        // 单词统计卡片
        _buildStatisticsCard(provider),

        // 单词列表
        Expanded(
          child: provider.isLoading
            ? const Center(child: CircularProgressIndicator())
            : words.isEmpty
              ? const Center(child: Text('没有单词，请添加新单词'))
              : ListView.builder(
                  itemCount: words.length,
                  itemBuilder: (context, index) {
                    final word = words[index];
                    return _buildWordItem(word, provider);
                  },
                ),
        ),
      ],
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: () {
        Navigator.pushNamed(context, '/add_word');
      },
      child: const Icon(Icons.add),
      tooltip: '添加单词',
    ),
  );
}

3.4.2 单词项设计

使用ExpansionTile实现可展开的单词项，点击可以查看详细信息。

/// 构建单词项
Widget _buildWordItem(WordItem word, WordProvider provider) {
  return Card(
    margin: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 4.0),
    child: ExpansionTile(
      title: Text(
        word.word,
        style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
      ),
      subtitle: Text(word.phonetic),
      children: [
        Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // 中文释义
              Text(
                '中文释义: ${word.chineseMeaning}',
                style: const TextStyle(fontSize: 16),
              ),
              const SizedBox(height: 8),
              // 英文例句
              Text(
                '例句: ${word.example}',
                style: const TextStyle(fontSize: 16, fontStyle: FontStyle.italic),
              ),
              const SizedBox(height: 4),
              // 例句翻译
              Text(
                '翻译: ${word.exampleTranslation}',
                style: TextStyle(fontSize: 14, color: Colors.grey[600]),
              ),
              const SizedBox(height: 16),
              // 记忆状态选择器
              Row(
                children: [
                  const Text('记忆状态: '),
                  const SizedBox(width: 8),
                  DropdownButton<int>(
                    value: word.memoryState,
                    items: [
                      DropdownMenuItem(
                        value: 0,
                        child: const Text('未记忆'),
                      ),
                      DropdownMenuItem(
                        value: 1,
                        child: const Text('已记忆'),
                      ),
                      DropdownMenuItem(
                        value: 2,
                        child: const Text('已掌握'),
                      ),
                    ],
                    onChanged: (value) {
                      if (value != null) {
                        provider.updateWordMemoryState(word.id, value);
                      }
                    },
                  ),
                ],
              ),
              const SizedBox(height: 16),
              // 操作按钮
              Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  TextButton(
                    onPressed: () {
                      Navigator.pushNamed(
                        context, '/add_word', arguments: word,
                      );
                    },
                    child: const Text('编辑'),
                  ),
                  const SizedBox(width: 8),
                  TextButton(
                    onPressed: () {
                      _showDeleteConfirmDialog(word, provider);
                    },
                    child: const Text('删除', style: TextStyle(color: Colors.red)),
                  ),
                ],
              ),
            ],
          ),
        ),
      ],
    ),
  );
}

3.5 添加/编辑单词页面

提供表单页面，支持添加和编辑单词，包括各种表单验证。

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(_currentWord != null ? '编辑单词' : '添加单词'),
      centerTitle: true,
    ),
    body: SingleChildScrollView(
      padding: const EdgeInsets.all(16.0),
      child: Form(
        key: _formKey,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 单词输入框
            TextFormField(
              controller: _wordController,
              decoration: const InputDecoration(
                labelText: '单词',
                hintText: '请输入单词',
                border: OutlineInputBorder(),
                prefixIcon: Icon(Icons.text_fields),
              ),
              validator: (value) {
                if (value == null || value.isEmpty) {
                  return '请输入单词';
                }
                return null;
              },
              textCapitalization: TextCapitalization.words,
            ),
            // 其他表单字段...

            // 保存按钮
            SizedBox(
              width: double.infinity,
              child: ElevatedButton.icon(
                onPressed: _saveWord,
                icon: const Icon(Icons.save),
                label: Text(_currentWord != null ? '更新单词' : '添加单词'),
                style: ElevatedButton.styleFrom(
                  padding: const EdgeInsets.symmetric(vertical: 16),
                  textStyle: const TextStyle(fontSize: 18),
                ),
              ),
            ),
          ],
        ),
      ),
    ),
  );
}

3.6 应用工作流程

应用工作流程图：

3.7 集成到现有应用

将单词速记APP集成到现有的鸿蒙应用中心，通过底部导航栏进行切换。

// 更新导航项列表
final List<Widget> _pages = [
  const PixelArtHomePage(),
  const PasswordListScreen(),
  const MenstrualHomeScreen(),
  const WordHomeScreen(),
];

// 更新导航标题列表
final List<String> _appBarTitles = [
  '拼豆像素生成器',
  '密码管理器',
  '生理期记录',
  '单词记忆',
];

// 更新底部导航栏
bottomNavigationBar: BottomNavigationBar(
  items: const <BottomNavigationBarItem>[
    // 其他导航项...
    BottomNavigationBarItem(
      icon: Icon(Icons.book),
      label: '单词记忆',
    ),
  ],
  // 其他属性...
),

四、总结

4.1 应用特点

1. 跨平台兼容：基于Flutter框架开发，完美适配HarmonyOS平台，同时支持Android、iOS等其他平台。
2. 自定义单词管理：允许用户根据自己的需求添加和管理单词，提供个性化的学习体验。
3. 直观的记忆状态管理：三级记忆状态（未记忆、已记忆、已掌握），帮助用户科学
   管理学习进度。
4. 强大的搜索和筛选功能：支持按单词或中文释义搜索，按记忆状态筛选，方便用户快速查找单词。
5. 美观的UI设计：采用Material Design 3设计风格，界面简洁美观，交互流畅。
6. 学习统计功能：直观展示学习进度和成果，激发用户的学习动力。

4.2 开发经验

1. HarmonyOS适配：为了适配HarmonyOS平台，我们采用了内存存储方案，避免了使用平台特定的存储插件，提高了应用的兼容性。
2. 状态管理设计：使用Provider进行状态管理，实现了清晰的状态分层和数据流，提高了代码的可维护性和扩展性。
3. UI设计原则：遵循Material Design 3设计原则，采用卡片式布局、清晰的颜色对比和直观的图标，提高了应用的用户体验。
4. 代码质量：严格遵循Dart语言规范和最佳实践，添加了详细的文档注释，提高了代码的可读性和可维护性。
5. 模块化设计：将应用拆分为数据模型、存储服务、状态管理和UI页面等模块，实现了高内聚低耦合的设计，提高了代码的可扩展性和可测试性。

4.3 展望

1. 数据持久化：实现基于HarmonyOS本地存储的持久化方案，替代当前的内存存储，确保数据不会丢失。
2. 单词学习功能：添加单词学习模式，如闪卡、拼写练习等，提高学习效果。
3. 学习计划：支持用户制定学习计划，设置每日学习目标和提醒。
4. 云同步：实现云端同步功能，支持多设备数据同步和备份。
5. 单词发音：集成语音合成功能，支持单词和例句的发音。
6. 数据分析：添加更详细的学习数据分析，帮助用户了解自己的学习习惯和薄弱环节。

五、参考文献

1. Flutter官方文档
2. HarmonyOS官方文档
3. Dart语言规范

---

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