鸿蒙+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 单词数据模型
单词模型是整个应用的核心数据结构，包含了单词的各种属性。
dart
/// 单词数据模型
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平台，我们采用了内存存储方案，避免了使用平台特定的存储插件，提高了应用的兼容性。
dart
/// 单词存储服务类，用于管理单词的存储和检索
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类来管理单词应用的状态和业务逻辑。
dart
/// 单词提供者，用于管理单词的状态
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 页面布局设计
dart
@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实现可展开的单词项，点击可以查看详细信息。
dart
/// 构建单词项
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 添加/编辑单词页面
提供表单页面，支持添加和编辑单词，包括各种表单验证。
dart
@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集成到现有的鸿蒙应用中心，通过底部导航栏进行切换。
dart
// 更新导航项列表
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 应用特点
- 跨平台兼容：基于Flutter框架开发，完美适配HarmonyOS平台，同时支持Android、iOS等其他平台。
- 自定义单词管理：允许用户根据自己的需求添加和管理单词，提供个性化的学习体验。
- 直观的记忆状态管理 ：三级记忆状态（未记忆、已记忆、已掌握），帮助用户科学
管理学习进度。 - 强大的搜索和筛选功能：支持按单词或中文释义搜索，按记忆状态筛选，方便用户快速查找单词。
- 美观的UI设计：采用Material Design 3设计风格，界面简洁美观，交互流畅。
- 学习统计功能：直观展示学习进度和成果，激发用户的学习动力。
4.2 开发经验
- HarmonyOS适配：为了适配HarmonyOS平台，我们采用了内存存储方案，避免了使用平台特定的存储插件，提高了应用的兼容性。
- 状态管理设计：使用Provider进行状态管理，实现了清晰的状态分层和数据流，提高了代码的可维护性和扩展性。
- UI设计原则：遵循Material Design 3设计原则，采用卡片式布局、清晰的颜色对比和直观的图标，提高了应用的用户体验。
- 代码质量：严格遵循Dart语言规范和最佳实践，添加了详细的文档注释，提高了代码的可读性和可维护性。
- 模块化设计：将应用拆分为数据模型、存储服务、状态管理和UI页面等模块，实现了高内聚低耦合的设计，提高了代码的可扩展性和可测试性。
4.3 展望
- 数据持久化：实现基于HarmonyOS本地存储的持久化方案，替代当前的内存存储，确保数据不会丢失。
- 单词学习功能：添加单词学习模式，如闪卡、拼写练习等，提高学习效果。
- 学习计划：支持用户制定学习计划，设置每日学习目标和提醒。
- 云同步：实现云端同步功能，支持多设备数据同步和备份。
- 单词发音：集成语音合成功能，支持单词和例句的发音。
- 数据分析：添加更详细的学习数据分析，帮助用户了解自己的学习习惯和薄弱环节。
五、参考文献
欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net