1. 项目背景与目标
作为一名长期从事跨平台开发的工程师，我最近尝试将Flutter框架与OpenHarmony操作系统结合，开发了一款三国杀攻略App。这个项目最有趣的部分在于武将详情页的实现——它不仅需要处理复杂的UI布局，还要考虑OpenHarmony平台的特殊性。
为什么选择这个技术栈组合？Flutter的跨平台能力可以让我们用一套代码覆盖多个平台，而OpenHarmony作为新兴操作系统，其分布式能力为未来可能的跨设备同步功能提供了想象空间。三国杀这类卡牌游戏的数据展示非常适合用Flutter来实现，因为它的Widget系统可以轻松构建复杂的卡片式界面。
2. 环境准备与项目搭建
2.1 Flutter环境配置
首先需要在开发机上配置Flutter环境。我使用的是Windows 11 + WSL2 Ubuntu的组合，这样可以兼顾日常开发和Linux环境需求。安装过程有几个关键点需要注意：
- 下载Flutter SDK时，建议直接从官网获取稳定版，而非GitHub的master分支
- 解压后需要将flutter/bin目录添加到PATH环境变量
- 运行
flutter doctor检查依赖时，Android工具链的配置最容易出问题
提示：如果遇到"waiting for another flutter command"锁问题，可以删除flutter目录下的bin/cache/lockfile文件
2.2 OpenHarmony适配准备
OpenHarmony目前对Flutter的支持还在完善中，我们需要一些额外配置：
bash复制flutter pub add ohos_flutter
这个插件提供了Flutter在OpenHarmony上运行的基础能力。由于OpenHarmony使用ArkCompiler而非Dalvik/ART，某些Flutter插件可能需要额外适配。
2.3 项目初始化
创建基础Flutter项目后，需要修改pubspec.yaml添加三国杀相关依赖：
yaml复制dependencies:
flutter:
sdk: flutter
dio: ^5.0.0 # 网络请求
cached_network_image: ^3.2.0 # 图片缓存
get: ^4.6.5 # 状态管理
3. 数据结构设计与API对接
3.1 武将数据模型
三国杀武将数据通常包含多个维度，我们设计如下Dart类：
dart复制class Hero {
final String id;
final String name;
final String faction;
final int hp;
final String gender;
final List<Skill> skills;
final String description;
final String imageUrl;
// 构造函数和toJson/fromJson方法
}
class Skill {
final String name;
final String description;
final String type; // 主公技、锁定技等
}
3.2 数据获取策略
考虑到三国杀武将数据相对稳定，我们采用以下策略：
- 首次启动从网络获取完整数据并缓存到本地
- 后续启动优先使用本地缓存
- 定期在后台检查数据更新
网络请求使用Dio实现：
dart复制Future<List<Hero>> fetchHeroes() async {
try {
final response = await Dio().get('https://api.sanguosha.com/heroes');
return (response.data as List).map((json) => Hero.fromJson(json)).toList();
} catch (e) {
// 错误处理和回退逻辑
}
}
4. 武将详情页UI实现
4.1 页面结构设计
武将详情页采用经典的Material Design布局：
- 顶部：英雄头像和基础信息（CollapsibleHeader）
- 中部：TabBarView包含技能、故事、攻略等标签页
- 底部：相关武将推荐和操作按钮
dart复制CustomScrollView(
slivers: [
SliverAppBar(
expandedHeight: 300,
flexibleSpace: HeroHeader(hero: hero),
),
SliverToBoxAdapter(
child: DefaultTabController(
length: 3,
child: Column(
children: [
TabBar(tabs: [...]),
SizedBox(
height: 500,
child: TabBarView(children: [...]),
),
],
),
),
),
],
)
4.2 复杂布局技巧
实现武将技能卡牌效果时，我使用了CustomPainter来绘制特殊边框：
dart复制class SkillCardPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
final paint = Paint()
..color = Colors.amber
..style = PaintingStyle.stroke
..strokeWidth = 2.0;
final path = Path()
..moveTo(10, 0)
..lineTo(size.width - 20, 0)
..quadraticBezierTo(size.width - 10, 0, size.width - 10, 10)
..lineTo(size.width - 10, size.height - 20)
..quadraticBezierTo(size.width - 10, size.height - 10, size.width - 20, size.height - 10)
..lineTo(20, size.height - 10)
..quadraticBezierTo(10, size.height - 10, 10, size.height - 20)
..lineTo(10, 20)
..quadraticBezierTo(10, 10, 20, 10);
canvas.drawPath(path, paint);
}
}
4.3 性能优化要点
- 图片加载：使用cached_network_image并设置合理的缓存策略
- 列表性能：确保技能列表使用ListView.builder而非直接Column
- 避免重建：使用const构造函数和Provider选择性刷新
- 内存管理：及时释放大图资源，特别是在页面切换时
5. OpenHarmony平台适配
5.1 平台特性利用
OpenHarmony的分布式能力允许我们在详情页实现一些特色功能：
dart复制void shareToOtherDevice() {
if (Platform.isOpenHarmony) {
// 使用分布式软总线API
DistributedDataManager.pushData(
deviceId: targetDeviceId,
data: {'type': 'hero', 'id': hero.id},
);
}
}
5.2 常见问题解决
- 字体渲染差异：OpenHarmony默认字体与Android不同，需要显式指定字体族
- 动画性能：某些复杂动画在OpenHarmony上需要降级处理
- 插件兼容性：部分Flutter插件需要重新编译为OpenHarmony版本
6. 测试与调试
6.1 单元测试策略
针对武将详情页，我们重点测试：
- 数据解析是否正确
- UI在不同尺寸下的表现
- 交互逻辑是否正常
dart复制test('英雄数据解析', () {
final json = {...}; // 测试数据
final hero = Hero.fromJson(json);
expect(hero.name, '关羽');
expect(hero.skills.length, 2);
});
6.2 跨平台测试要点
- 在OpenHarmony模拟器和真机上测试布局
- 验证分布式功能是否正常
- 检查平台特定代码的条件编译
7. 项目经验总结
在实际开发中，有几个关键点值得分享：
-
状态管理选择：对于这种中等复杂度的页面，GetX提供了足够的能力而不会引入过多复杂度
-
图片处理：三国杀武将图片尺寸不一，需要统一处理为合适比例，我最终采用了AspectRatio+BoxFit的组合
-
OpenHarmony适配：目前Flutter在OpenHarmony上的性能还不及Android，特别是在动画方面，需要做好降级方案
-
热更新策略：由于OpenHarmony应用商店审核周期较长，我们实现了基于CDN的资源热更新机制
这个项目最让我满意的是成功将Flutter的跨平台能力与OpenHarmony的新特性结合起来。虽然过程中遇到了一些兼容性问题，但最终效果证明这种技术组合是可行的。对于想要尝试OpenHarmony开发的Flutter开发者，我的建议是从简单页面开始，逐步验证各项功能，而不是一开始就处理复杂交互。