鸿蒙flutter第三方库适配 - 快捷拨号一键拨打电话
·
快捷拨号一键拨打电话应用
欢迎加入开源鸿蒙跨平台社区：
https://openharmonycrossplatform.csdn.net
适配的第三方库地址：
https://pub.dev/packages/url_launcher
一、项目概述
运行效果图
1.1 应用简介
快捷拨号应用是一款便捷高效的电话拨号工具，通过简洁直观的界面设计，让用户能够快速拨打常用联系人电话。应用采用清新的绿色作为主色调，象征便捷与高效。核心功能涵盖联系人管理、一键拨号、搜索筛选、数据持久化四大模块，为用户提供流畅的拨号体验。
应用支持添加、编辑、删除联系人，点击联系人卡片即可一键拨打电话。内置搜索功能，可快速定位目标联系人。所有数据自动保存到本地存储，重启应用后数据不丢失。预置紧急求助、急救中心、火警电话等常用紧急号码，方便用户快速拨打。
1.2 核心功能
| 功能模块 | 功能描述 | 实现方式 |
|---|---|---|
| 一键拨号 | 点击联系人卡片直接拨打电话 | url_launcher |
| 联系人管理 | 添加、编辑、删除联系人 | SharedPreferences |
| 搜索筛选 | 按姓名或号码搜索联系人 | 本地搜索 |
| 数据持久化 | 自动保存联系人数据 | SharedPreferences |
| 紧急号码 | 预置常用紧急电话号码 | 默认数据 |
| 长按菜单 | 长按显示编辑删除选项 | ModalBottomSheet |
| 头像显示 | 显示联系人姓名首字母 | 动态生成 |
1.3 技术栈
| 技术领域 | 技术选型 | 版本要求 |
|---|---|---|
| 开发框架 | Flutter | >= 3.0.0 |
| 编程语言 | Dart | >= 2.17.0 |
| 设计规范 | Material Design 3 | - |
| 拨号功能 | url_launcher | >= 6.3.1 |
| 数据存储 | SharedPreferences | >= 2.0.0 |
| 目标平台 | 鸿蒙OS / Android / iOS | API 21+ |
1.4 项目结构
lib/
└── main_quick_dial.dart
├── QuickDialApp # 应用入口
├── Contact # 联系人数据模型
├── QuickDialHomePage # 主页面
├── _loadContacts # 加载联系人
├── _saveContacts # 保存联系人
├── _makePhoneCall # 拨打电话
├── _showAddContactDialog # 添加联系人对话框
├── _showEditContactDialog # 编辑联系人对话框
├── _deleteContact # 删除联系人
├── _getFilteredContacts # 搜索筛选联系人
└── _buildContactCard # 构建联系人卡片
二、系统架构
2.1 整体架构图
2.2 类图设计
2.3 拨号流程
2.4 联系人管理流程
三、核心模块设计
3.1 数据模型设计
3.1.1 联系人模型 (Contact)
class Contact {
final String id;
final String name;
final String phone;
final String? avatar;
final DateTime createdAt;
Contact({
required this.id,
required this.name,
required this.phone,
this.avatar,
required this.createdAt,
});
Map<String, dynamic> toMap() {
return {
'id': id,
'name': name,
'phone': phone,
'avatar': avatar,
'createdAt': createdAt.toIso8601String(),
};
}
factory Contact.fromMap(Map<String, dynamic> map) {
return Contact(
id: map['id'],
name: map['name'],
phone: map['phone'],
avatar: map['avatar'],
createdAt: DateTime.parse(map['createdAt']),
);
}
}
3.2 页面结构设计
3.2.1 主页面布局
3.2.2 联系人卡片结构
3.3 拨号功能实现
Future<void> _makePhoneCall(String phoneNumber) async {
final Uri phoneUri = Uri(scheme: 'tel', path: phoneNumber);
try {
if (await canLaunchUrl(phoneUri)) {
final launched = await launchUrl(phoneUri);
if (!launched) {
_showSnackBar('无法拨打电话: $phoneNumber');
}
} else {
_showSnackBar('设备不支持拨号功能');
}
} catch (e) {
_showSnackBar('拨号失败: $e');
}
}
3.4 数据持久化实现
Future<void> _saveContacts() async {
try {
if (_prefs != null) {
final contactsJson = json.encode(
_contacts.map((c) => c.toMap()).toList(),
);
await _prefs?.setString('quick_dial_contacts', contactsJson);
}
} catch (e) {
debugPrint('保存联系人失败: $e');
}
}
四、UI设计规范
4.1 配色方案
应用以清新的绿色为主色调，象征便捷与高效：
| 颜色类型 | 色值 | 用途 |
|---|---|---|
| 主色 | #4CAF50 (Green) | 导航、主题元素 |
| 辅助色 | #81C784 | 卡片背景 |
| 第三色 | #A5D6A7 | 按钮背景 |
| 背景色 | #FAFAFA | 页面背景 |
| 卡片背景 | #FFFFFF | 信息卡片 |
| 成功色 | #66BB6A | 拨号按钮 |
4.2 字体规范
| 元素 | 字号 | 字重 | 颜色 |
|---|---|---|---|
| 页面标题 | 20px | Bold | 主色 |
| 联系人姓名 | 18px | Bold | #000000 |
| 电话号码 | 14px | Regular | #666666 |
| 头像字母 | 24px | Bold | 主色 |
| 提示文字 | 14px | Regular | #999999 |
4.3 组件规范
4.3.1 联系人卡片
┌─────────────────────────────────────┐
│ ┌───┐ │
│ │ 张 │ 张三 │
│ └───┘ 📞 13800138000 📞 │
└─────────────────────────────────────┘
4.3.2 搜索栏
┌─────────────────────────────────────┐
│ 🔍 搜索联系人或号码 ✕ │
└─────────────────────────────────────┘
4.3.3 添加联系人对话框
┌─────────────────────────────────────┐
│ 添加联系人 │
│ │
│ 👤 联系人姓名 │
│ ┌─────────────────────────────┐ │
│ │ │ │
│ └─────────────────────────────┘ │
│ │
│ 📞 电话号码 │
│ ┌─────────────────────────────┐ │
│ │ │ │
│ └─────────────────────────────┘ │
│ │
│ 取消 添加 │
└─────────────────────────────────────┘
五、核心功能实现
5.1 初始化加载
Future<void> _loadContacts() async {
try {
_prefs = await SharedPreferences.getInstance().timeout(
const Duration(seconds: 2),
onTimeout: () {
throw Exception('SharedPreferences 初始化超时');
},
);
final contactsJson = _prefs?.getString('quick_dial_contacts');
if (contactsJson != null) {
final List<dynamic> contactsList = json.decode(contactsJson);
_contacts = contactsList
.map((json) => Contact.fromMap(json))
.toList();
} else {
_contacts = _getDefaultContacts();
}
} catch (e) {
_contacts = _getDefaultContacts();
}
setState(() {
_isLoading = false;
});
}
5.2 添加联系人
void _showAddContactDialog() {
final nameController = TextEditingController();
final phoneController = TextEditingController();
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: const Text('添加联系人'),
content: Column(
mainAxisSize: MainAxisSize.min,
children: [
TextField(
controller: nameController,
decoration: const InputDecoration(
labelText: '联系人姓名',
prefixIcon: Icon(Icons.person),
),
),
TextField(
controller: phoneController,
decoration: const InputDecoration(
labelText: '电话号码',
prefixIcon: Icon(Icons.phone),
),
keyboardType: TextInputType.phone,
),
],
),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
child: const Text('取消'),
),
FilledButton(
onPressed: () {
final newContact = Contact(
id: DateTime.now().millisecondsSinceEpoch.toString(),
name: nameController.text.trim(),
phone: phoneController.text.trim(),
createdAt: DateTime.now(),
);
setState(() {
_contacts.insert(0, newContact);
});
_saveContacts();
Navigator.pop(context);
},
child: const Text('添加'),
),
],
);
},
);
}
5.3 搜索功能
List<Contact> _getFilteredContacts() {
if (_searchQuery.isEmpty) {
return _contacts;
}
return _contacts.where((contact) {
return contact.name.toLowerCase().contains(_searchQuery.toLowerCase()) ||
contact.phone.contains(_searchQuery);
}).toList();
}
六、交互设计
6.1 拨号交互流程
6.2 联系人管理流程
七、扩展功能规划
7.1 后续版本规划
7.2 功能扩展建议
7.2.1 通话记录
记录功能：
- 显示最近通话记录
- 通话时长统计
- 通话时间标记
- 快速回拨功能
7.2.2 分组管理
分组功能：
- 创建联系人分组
- 按分组筛选显示
- 批量操作管理
- 分组排序功能
7.2.3 快捷拨号
快捷功能：
- 长按数字键快速拨号
- 设置常用联系人
- 桌面小部件
- 语音拨号
八、注意事项
8.1 开发注意事项
- 权限配置：Android 需要配置 CALL_PHONE 权限
<uses-permission android:name="android.permission.CALL_PHONE" />
- iOS 配置：需要在 Info.plist 中添加 URL Scheme
<key>LSApplicationQueriesSchemes</key>
<array>
<string>tel</string>
</array>
-
鸿蒙OS 配置：需要在配置文件中声明拨号权限
-
数据验证：确保电话号码格式正确
-
错误处理：妥善处理拨号失败情况
8.2 常见问题
| 问题 | 原因 | 解决方案 |
|---|---|---|
| 拨号无响应 | 未配置权限 | 添加 CALL_PHONE 权限 |
| iOS 无法拨号 | 未配置 URL Scheme | 添加 tel 到白名单 |
| 数据丢失 | 存储失败 | 检查 SharedPreferences 初始化 |
| 搜索无结果 | 搜索逻辑错误 | 检查搜索条件 |
| 长按无菜单 | 事件冲突 | 检查手势识别 |
8.3 使用技巧
📞 快捷拨号使用技巧 📞
快速拨号
- 点击联系人卡片右侧拨号按钮
- 点击整个联系人卡片也可拨号
- 长按卡片显示更多操作
联系人管理
- 点击右下角浮动按钮添加联系人
- 长按联系人卡片编辑或删除
- 使用搜索栏快速查找联系人
数据安全
- 所有数据保存在本地
- 卸载应用会清除数据
- 定期备份重要联系人
九、运行说明
9.1 环境要求
| 环境 | 版本要求 |
|---|---|
| Flutter SDK | >= 3.0.0 |
| Dart SDK | >= 2.17.0 |
| 鸿蒙OS | API 21+ |
| Android | API 21+ |
| iOS | 12.0+ |
9.2 依赖安装
# 安装依赖
flutter pub get
# 或者使用 flutter pub add
flutter pub add url_launcher
flutter pub add shared_preferences
9.3 运行命令
# 查看可用设备
flutter devices
# 运行到Web服务器
flutter run -d web-server -t lib/main_quick_dial.dart --web-port 8145
# 运行到鸿蒙设备
flutter run -d 127.0.0.1:5555 -t lib/main_quick_dial.dart
# 运行到Android设备
flutter run -d android -t lib/main_quick_dial.dart
# 运行到iOS设备
flutter run -d ios -t lib/main_quick_dial.dart
# 代码分析
flutter analyze lib/main_quick_dial.dart
9.4 权限配置
Android 权限配置
在 android/app/src/main/AndroidManifest.xml 中添加：
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
<uses-permission android:name="android.permission.CALL_PHONE" />
<application>
...
</application>
</manifest>
iOS 权限配置
在 ios/Runner/Info.plist 中添加：
<key>LSApplicationQueriesSchemes</key>
<array>
<string>tel</string>
</array>
十、总结
快捷拨号一键拨打电话应用通过 url_launcher 库实现了便捷的电话拨号功能，用户可以快速拨打常用联系人电话。应用采用 Material Design 3 设计规范，以清新的绿色为主色调，象征便捷与高效。
核心功能涵盖一键拨号、联系人管理、搜索筛选、数据持久化四大模块。用户可以添加、编辑、删除联系人，点击联系人卡片即可一键拨打电话。内置搜索功能可快速定位目标联系人，所有数据自动保存到本地存储，重启应用后数据不丢失。
应用预置了紧急求助（110）、急救中心（120）、火警电话（119）、交警电话（122）、天气预报（12121）等常用紧急号码，方便用户在紧急情况下快速拨打。通过本应用，希望能够为用户提供便捷高效的拨号体验。
快捷拨号——一键拨号，便捷高效
作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。
更多推荐
2
0- 0
已为社区贡献12条内容
所有评论(0)