1. 项目背景与核心需求
在移动应用开发领域，跨平台框架Flutter与国产操作系统OpenHarmony的结合正成为新的技术趋势。这次我们要实现的是一个家庭相册应用，核心功能是"家人Tab"的实现。这个Tab需要展示家庭成员的照片集，支持按人物分类浏览，并具备基本的图片操作功能。
选择Flutter for OpenHarmony作为开发方案，主要基于以下几点考虑：
- Flutter的跨平台特性可以最大程度复用代码
- OpenHarmony作为国产操作系统，在隐私保护和设备互联方面有独特优势
- 家庭相册这类应用对UI流畅度和个性化定制要求较高，Flutter的渲染引擎能很好满足
2. 开发环境搭建
2.1 Flutter for OpenHarmony环境配置
首先需要搭建支持OpenHarmony的Flutter开发环境：
bash复制# 安装Flutter SDK
git clone https://gitee.com/openharmony-sig/flutter_flutter.git
export PATH="$PATH:`pwd`/flutter_flutter/bin"
# 验证安装
flutter doctor
注意：目前OpenHarmony的Flutter支持还在完善中，建议使用官方指定的Flutter版本分支
2.2 OpenHarmony开发环境准备
在Windows+Ubuntu双系统下配置OpenHarmony开发环境：
-
安装依赖工具：
bash复制sudo apt-get update sudo apt-get install binutils git git-lfs gnupg flex bison gperf build-essential zip curl zlib1g-dev gcc-multilib g++-multilib libc6-dev-i386 lib32ncurses5-dev x11proto-core-dev libx11-dev lib32z1-dev ccache libgl1-mesa-dev libxml2-utils xsltproc unzip m4 -
获取OpenHarmony源码：
bash复制repo init -u https://gitee.com/openharmony/manifest.git -b master --no-repo-verify repo sync -c -
配置X86虚拟机环境用于调试
3. 项目初始化与基础架构
3.1 创建Flutter for OpenHarmony项目
bash复制flutter create --template=app --platforms=ohos family_album
cd family_album
项目目录结构说明：
ohos/: OpenHarmony平台特定代码lib/: Dart主代码目录assets/: 静态资源存放处
3.2 基础页面架构设计
采用经典的BottomNavigationBar + TabView结构：
dart复制class MainScreen extends StatefulWidget {
@override
_MainScreenState createState() => _MainScreenState();
}
class _MainScreenState extends State<MainScreen> {
int _currentIndex = 0;
final List<Widget> _tabs = [
HomeTab(),
FamilyTab(), // 家人Tab
SettingsTab(),
];
@override
Widget build(BuildContext context) {
return Scaffold(
body: _tabs[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
currentIndex: _currentIndex,
onTap: (index) {
setState(() => _currentIndex = index);
},
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
BottomNavigationBarItem(icon: Icon(Icons.people), label: '家人'),
BottomNavigationBarItem(icon: Icon(Icons.settings), label: '设置'),
],
),
);
}
}
4. 家人Tab核心实现
4.1 数据模型设计
家庭相册需要处理两种主要数据类型：家庭成员和照片。
dart复制class FamilyMember {
final String id;
final String name;
final String? avatar;
final List<Photo> photos;
FamilyMember({
required this.id,
required this.name,
this.avatar,
this.photos = const [],
});
}
class Photo {
final String id;
final String path;
final DateTime date;
final List<String> tags;
Photo({
required this.id,
required this.path,
required this.date,
this.tags = const [],
});
}
4.2 家庭成员列表实现
使用GridView展示家庭成员，支持滑动浏览：
dart复制class FamilyTab extends StatelessWidget {
final List<FamilyMember> members = [
FamilyMember(id: '1', name: '爸爸', avatar: 'assets/dad.png'),
FamilyMember(id: '2', name: '妈妈', avatar: 'assets/mom.png'),
// 其他成员...
];
@override
Widget build(BuildContext context) {
return GridView.builder(
padding: EdgeInsets.all(16),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 16,
mainAxisSpacing: 16,
childAspectRatio: 0.8,
),
itemCount: members.length,
itemBuilder: (context, index) {
return FamilyMemberCard(member: members[index]);
},
);
}
}
class FamilyMemberCard extends StatelessWidget {
final FamilyMember member;
const FamilyMemberCard({required this.member});
@override
Widget build(BuildContext context) {
return Card(
elevation: 4,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
child: InkWell(
onTap: () => _openMemberAlbum(context, member),
child: Column(
children: [
Expanded(
child: ClipRRect(
borderRadius: BorderRadius.vertical(top: Radius.circular(12)),
child: member.avatar != null
? Image.asset(member.avatar!, fit: BoxFit.cover)
: Icon(Icons.person, size: 80),
),
),
Padding(
padding: EdgeInsets.all(8),
child: Text(
member.name,
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
),
],
),
),
);
}
}
4.3 照片浏览与操作功能
实现照片的网格展示和基本操作：
dart复制class MemberAlbumScreen extends StatelessWidget {
final FamilyMember member;
const MemberAlbumScreen({required this.member});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('${member.name}的照片'),
),
body: member.photos.isEmpty
? Center(child: Text('暂无照片'))
: GridView.builder(
padding: EdgeInsets.all(8),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
crossAxisSpacing: 4,
mainAxisSpacing: 4,
),
itemCount: member.photos.length,
itemBuilder: (context, index) {
return GestureDetector(
onTap: () => _showPhotoDetail(context, member.photos[index]),
child: Image.file(
File(member.photos[index].path),
fit: BoxFit.cover,
),
);
},
),
);
}
}
5. OpenHarmony平台适配
5.1 文件系统访问
OpenHarmony的文件访问API与Android有所不同，需要特别处理：
dart复制import 'package:ohos_storage/ohos_storage.dart';
Future<List<String>> getPhotosFromOH() async {
final dir = await getExternalStorageDirectory();
final files = await Directory('$dir/Pictures/Family').list().toList();
return files.whereType<File>().map((f) => f.path).toList();
}
5.2 权限处理
在config.json中添加必要的权限声明：
json复制{
"module": {
"reqPermissions": [
{
"name": "ohos.permission.READ_MEDIA",
"reason": "读取相册照片"
},
{
"name": "ohos.permission.WRITE_MEDIA",
"reason": "保存照片到相册"
}
]
}
}
6. 性能优化与调试
6.1 图片加载优化
使用cached_network_image插件优化网络图片加载：
yaml复制dependencies:
cached_network_image: ^3.2.0
实现本地图片缓存：
dart复制CachedNetworkImage(
imageUrl: member.avatarUrl,
placeholder: (context, url) => CircularProgressIndicator(),
errorWidget: (context, url, error) => Icon(Icons.error),
fadeInDuration: Duration(milliseconds: 200),
)
6.2 内存管理
在OpenHarmony上需要特别注意内存使用：
dart复制class PhotoDetailScreen extends StatefulWidget {
@override
void dispose() {
// 手动清除图片缓存
PaintingBinding.instance?.imageCache?.clear();
super.dispose();
}
}
7. 测试与发布
7.1 单元测试
为家人Tab编写基础测试用例：
dart复制void main() {
test('FamilyMember model test', () {
final member = FamilyMember(id: '1', name: 'Test');
expect(member.id, '1');
expect(member.name, 'Test');
});
testWidgets('FamilyTab displays members', (tester) async {
await tester.pumpWidget(MaterialApp(
home: FamilyTab(),
));
expect(find.text('爸爸'), findsOneWidget);
expect(find.text('妈妈'), findsOneWidget);
});
}
7.2 OpenHarmony应用打包
使用OHOS SDK工具打包应用：
bash复制./gradlew assembleRelease
生成的HAP包位于build/outputs/ohos/release/目录下。
8. 实际开发中的经验分享
-
Tab切换性能：发现TabView在OpenHarmony上切换时有轻微卡顿，通过预加载相邻Tab的内容解决了这个问题。
-
图片格式兼容性：OpenHarmony对WebP格式的支持不如Android完善，建议同时提供JPEG格式的图片资源。
-
权限处理差异：OpenHarmony的权限申请时机与Android不同，需要在应用启动时就申请必要权限，否则可能导致后续功能异常。
-
调试技巧：在OpenHarmony虚拟机上调试时，可以使用
hdc shell logcat命令查看详细日志，比Flutter的调试输出更全面。 -
状态管理选择：对于家庭相册这类数据变化频繁的应用，推荐使用Riverpod而非传统的Provider，它在OpenHarmony平台上的表现更稳定。