Flutter+OpenHarmony剧本杀App收藏功能开发实践

1. 项目背景与核心需求

最近在开发一款基于Flutter for OpenHarmony的剧本杀组队App时，发现收藏功能的设计比想象中要复杂得多。这个功能看似简单，实际上涉及到状态管理、数据持久化、UI交互等多个技术点的协同工作。特别是在OpenHarmony平台上，还需要考虑与原生能力的对接问题。

收藏功能作为用户系统的核心模块，直接影响着用户体验。一个好的收藏系统应该具备以下特性：

• 快速响应：用户点击收藏后需要立即反馈
• 状态持久化：退出App后收藏状态仍需保留
• 分类管理：支持不同类型的收藏内容（剧本、玩家、房间等）
• 可视化呈现：清晰的收藏列表展示

2. 技术选型与架构设计

2.1 Flutter状态管理方案

经过对比几种主流方案，最终选择了Provider + SharedPreferences的组合：

dart复制class FavoriteModel extends ChangeNotifier {
  final List<FavoriteItem> _items = [];
  
  void addItem(FavoriteItem item) {
    _items.add(item);
    notifyListeners();
    _saveToLocal();
  }
  
  Future<void> _saveToLocal() async {
    // 使用SharedPreferences持久化存储
  }
}

这种方案的优点在于：

1. Provider提供了高效的状态管理
2. SharedPreferences适合小规模数据存储
3. 组合使用可以兼顾性能和开发效率

2.2 OpenHarmony平台适配

由于运行在OpenHarmony平台，需要考虑以下特殊处理：

dart复制// 平台特定代码
if (Platform.isOpenHarmony) {
  // 调用OHOS原生API
  const channel = MethodChannel('com.example/favorites');
  final result = await channel.invokeMethod('syncFavorites');
}

3. UI实现与交互设计

3.1 收藏按钮组件

核心交互组件需要处理多种状态：

dart复制class FavoriteButton extends StatelessWidget {
  final bool isFavorite;
  final VoidCallback onTap;
  
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        HapticFeedback.lightImpact(); // 触觉反馈
        onTap();
      },
      child: AnimatedSwitcher(
        duration: Duration(milliseconds: 300),
        child: Icon(
          isFavorite ? Icons.favorite : Icons.favorite_border,
          color: isFavorite ? Colors.red : Colors.grey,
          key: ValueKey(isFavorite),
        ),
      ),
    );
  }
}

3.2 收藏列表页面

采用TabView实现分类展示：

dart复制DefaultTabController(
  length: 3,
  child: Scaffold(
    appBar: AppBar(
      title: TabBar(
        tabs: [
          Tab(text: '剧本'),
          Tab(text: '玩家'),
          Tab(text: '房间'),
        ],
      ),
    ),
    body: TabBarView(
      children: [
        ScriptFavoriteTab(),
        PlayerFavoriteTab(),
        RoomFavoriteTab(),
      ],
    ),
  ),
);

4. 数据持久化方案

4.1 本地存储结构设计

采用JSON格式存储收藏数据：

json复制{
  "scripts": [
    {
      "id": "s001",
      "name": "恐怖游轮",
      "cover": "https://...",
      "collectedAt": 1634567890
    }
  ],
  "players": [...],
  "rooms": [...]
}

4.2 同步策略

实现增量同步机制：

dart复制Future<void> syncWithCloud() async {
  try {
    final lastSyncTime = await _getLastSyncTime();
    final changes = await api.getFavoriteChanges(since: lastSyncTime);
    
    if (changes.isNotEmpty) {
      await _applyChanges(changes);
      await _updateLastSyncTime(DateTime.now().millisecondsSinceEpoch);
    }
  } catch (e) {
    debugPrint('Sync failed: $e');
    // 重试逻辑
  }
}

5. 性能优化实践

5.1 列表渲染优化

针对可能的大量收藏项，采用懒加载：

dart复制ListView.builder(
  itemCount: items.length,
  itemBuilder: (ctx, index) {
    if (index >= items.length - 5) {
      _loadMore(); // 预加载
    }
    return FavoriteItemWidget(item: items[index]);
  },
);

5.2 图片缓存处理

使用cached_network_image插件：

dart复制CachedNetworkImage(
  imageUrl: item.coverUrl,
  placeholder: (ctx, url) => CircularProgressIndicator(),
  errorWidget: (ctx, url, err) => Icon(Icons.error),
);

6. 测试与问题排查

6.1 常见问题记录

1. 状态不同步问题：

   • 现象：从详情页返回列表页后收藏状态未更新
   • 解决：在页面pop时触发状态刷新

2. 跨Tab数据一致性问题：

   • 现象：在一个Tab取消收藏，其他Tab未立即更新
   • 解决：使用全局状态管理并统一事件通知

3. OpenHarmony平台特定问题：

   • 现象：某些API调用权限不足
   • 解决：在config.json中正确声明权限

6.2 性能测试指标

测试环境：华为P40（OpenHarmony 3.1）

7. 扩展功能思考

在实际使用中，发现可以进一步优化：

1. 智能分类：

   • 基于剧本类型自动分组
   • 常用收藏置顶

2. 多端同步：

   • 与Web端数据同步
   • 收藏内容导出分享

3. 高级搜索：

   • 在收藏中快速筛选
   • 标签系统

这个收藏功能的实现让我深刻体会到，即使是看似简单的功能模块，也需要考虑各种边界情况和用户体验细节。特别是在跨平台场景下，需要兼顾不同平台的特性要求。