Flutter在OpenHarmony实现收藏功能：Provider状态管理实践

1. 项目背景与需求分析

在移动应用开发领域，Flutter因其跨平台特性而广受欢迎，而OpenHarmony作为新兴的操作系统平台，正在吸引越来越多的开发者。将Flutter应用于OpenHarmony平台开发，特别是实现像"剧本杀组队App"这样的社交类应用，具有重要的实践意义。

收藏功能作为社交类App的核心模块之一，其实现需要考虑以下几个关键点：

• 用户行为数据的持久化存储
• 收藏项的状态管理
• 界面与数据的实时同步
• 跨页面状态共享

在Flutter框架中，我们可以利用Provider状态管理方案来实现这些需求，它特别适合OpenHarmony平台的应用开发场景。

2. 开发环境准备

2.1 Flutter for OpenHarmony环境搭建

首先需要配置Flutter for OpenHarmony的开发环境：

bash复制# 安装Flutter SDK
git clone https://github.com/flutter/flutter.git -b stable
export PATH="$PATH:`pwd`/flutter/bin"

# 安装OpenHarmony工具链
flutter pub global activate ohos_tool

注意：目前Flutter对OpenHarmony的支持还在持续完善中，建议使用Flutter 3.44及以上版本，以获得更好的兼容性。

2.2 项目依赖配置

在pubspec.yaml中添加必要的依赖：

yaml复制dependencies:
  flutter:
    sdk: flutter
  provider: ^6.1.0
  shared_preferences: ^2.2.2
  dio: ^5.3.3

这些依赖分别用于：

• provider：状态管理
• shared_preferences：本地数据持久化
• dio：网络请求

3. 收藏功能架构设计

3.1 数据模型定义

首先定义收藏项的数据模型：

dart复制class CollectionItem {
  final String id;
  final String title;
  final String coverUrl;
  final DateTime collectTime;
  
  CollectionItem({
    required this.id,
    required this.title,
    required this.coverUrl,
    required this.collectTime,
  });
  
  // 转换为Map用于持久化
  Map<String, dynamic> toMap() {
    return {
      'id': id,
      'title': title,
      'coverUrl': coverUrl,
      'collectTime': collectTime.millisecondsSinceEpoch,
    };
  }
  
  // 从Map恢复对象
  factory CollectionItem.fromMap(Map<String, dynamic> map) {
    return CollectionItem(
      id: map['id'],
      title: map['title'],
      coverUrl: map['coverUrl'],
      collectTime: DateTime.fromMillisecondsSinceEpoch(map['collectTime']),
    );
  }
}

3.2 状态管理设计

使用Provider实现收藏状态管理：

dart复制class CollectionProvider with ChangeNotifier {
  final List<CollectionItem> _collections = [];
  
  List<CollectionItem> get collections => _collections;
  
  // 添加收藏
  void addCollection(CollectionItem item) {
    _collections.add(item);
    notifyListeners();
    _saveToLocal();
  }
  
  // 移除收藏
  void removeCollection(String id) {
    _collections.removeWhere((item) => item.id == id);
    notifyListeners();
    _saveToLocal();
  }
  
  // 检查是否已收藏
  bool isCollected(String id) {
    return _collections.any((item) => item.id == id);
  }
  
  // 本地持久化
  Future<void> _saveToLocal() async {
    final prefs = await SharedPreferences.getInstance();
    final list = _collections.map((e) => e.toMap()).toList();
    await prefs.setString('collections', jsonEncode(list));
  }
  
  // 从本地加载
  Future<void> loadFromLocal() async {
    final prefs = await SharedPreferences.getInstance();
    final jsonString = prefs.getString('collections');
    if (jsonString != null) {
      final list = jsonDecode(jsonString) as List;
      _collections.clear();
      _collections.addAll(list.map((e) => CollectionItem.fromMap(e)));
      notifyListeners();
    }
  }
}

4. 界面实现

4.1 收藏列表页面

dart复制class CollectionPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('我的收藏'),
      ),
      body: Consumer<CollectionProvider>(
        builder: (context, provider, child) {
          if (provider.collections.isEmpty) {
            return Center(
              child: Text('暂无收藏内容'),
            );
          }
          
          return ListView.builder(
            itemCount: provider.collections.length,
            itemBuilder: (context, index) {
              final item = provider.collections[index];
              return ListTile(
                leading: Image.network(item.coverUrl),
                title: Text(item.title),
                subtitle: Text('收藏时间: ${DateFormat('yyyy-MM-dd').format(item.collectTime)}'),
                trailing: IconButton(
                  icon: Icon(Icons.delete),
                  onPressed: () {
                    provider.removeCollection(item.id);
                  },
                ),
              );
            },
          );
        },
      ),
    );
  }
}

4.2 收藏按钮组件

dart复制class CollectionButton extends StatelessWidget {
  final String itemId;
  final String itemTitle;
  final String coverUrl;
  
  CollectionButton({
    required this.itemId,
    required this.itemTitle,
    required this.coverUrl,
  });
  
  @override
  Widget build(BuildContext context) {
    return Consumer<CollectionProvider>(
      builder: (context, provider, child) {
        final isCollected = provider.isCollected(itemId);
        
        return IconButton(
          icon: Icon(
            isCollected ? Icons.favorite : Icons.favorite_border,
            color: isCollected ? Colors.red : null,
          ),
          onPressed: () {
            if (isCollected) {
              provider.removeCollection(itemId);
            } else {
              provider.addCollection(CollectionItem(
                id: itemId,
                title: itemTitle,
                coverUrl: coverUrl,
                collectTime: DateTime.now(),
              ));
            }
          },
        );
      },
    );
  }
}

5. 功能集成与优化

5.1 应用初始化

在main.dart中初始化Provider：

dart复制void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  final collectionProvider = CollectionProvider();
  await collectionProvider.loadFromLocal();
  
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => collectionProvider),
      ],
      child: MyApp(),
    ),
  );
}

5.2 性能优化

对于收藏列表的显示性能优化：

dart复制ListView.builder(
  itemCount: provider.collections.length,
  itemBuilder: (context, index) {
    final item = provider.collections[index];
    return Dismissible(
      key: Key(item.id),
      background: Container(color: Colors.red),
      onDismissed: (direction) {
        provider.removeCollection(item.id);
      },
      child: ListTile(
        leading: CachedNetworkImage(
          imageUrl: item.coverUrl,
          placeholder: (context, url) => CircularProgressIndicator(),
          errorWidget: (context, url, error) => Icon(Icons.error),
        ),
        // ...其他属性
      ),
    );
  },
)

5.3 数据同步策略

实现本地与服务器数据同步：

dart复制Future<void> syncWithServer() async {
  try {
    final response = await Dio().get('https://api.example.com/collections');
    final serverData = response.data as List;
    
    final localIds = _collections.map((e) => e.id).toList();
    final serverIds = serverData.map((e) => e['id']).toList();
    
    // 合并本地和服务器数据
    for (final item in serverData) {
      if (!localIds.contains(item['id'])) {
        _collections.add(CollectionItem.fromMap(item));
      }
    }
    
    // 删除服务器上已不存在的收藏
    _collections.removeWhere((item) => !serverIds.contains(item.id));
    
    notifyListeners();
    await _saveToLocal();
  } catch (e) {
    debugPrint('同步失败: $e');
  }
}

6. OpenHarmony平台适配

6.1 平台特性适配

针对OpenHarmony平台的特性进行适配：

dart复制// 在lib/main.dart中添加平台判断
if (Platform.isOpenHarmony) {
  // OpenHarmony特有配置
  FlutterOpenHarmonyPlugin.registerWith();
}

// 针对OpenHarmony的存储路径适配
Future<String> get _localPath async {
  if (Platform.isOpenHarmony) {
    return '/data/storage/el2/base/files';
  } else {
    final directory = await getApplicationDocumentsDirectory();
    return directory.path;
  }
}

6.2 打包发布

OpenHarmony应用的打包命令：

bash复制flutter build ohos
cd build/ohos
hpm dist

7. 测试与调试

7.1 单元测试

为CollectionProvider编写测试用例：

dart复制void main() {
  late CollectionProvider provider;
  
  setUp(() {
    provider = CollectionProvider();
  });
  
  test('添加收藏', () {
    final item = CollectionItem(
      id: '1',
      title: '测试剧本',
      coverUrl: 'https://example.com/cover.jpg',
      collectTime: DateTime.now(),
    );
    
    provider.addCollection(item);
    expect(provider.collections.length, 1);
    expect(provider.isCollected('1'), true);
  });
  
  test('移除收藏', () {
    final item = CollectionItem(
      id: '1',
      title: '测试剧本',
      coverUrl: 'https://example.com/cover.jpg',
      collectTime: DateTime.now(),
    );
    
    provider.addCollection(item);
    provider.removeCollection('1');
    expect(provider.collections.length, 0);
    expect(provider.isCollected('1'), false);
  });
}

7.2 集成测试

使用flutter_driver进行集成测试：

dart复制void main() {
  late FlutterDriver driver;
  
  setUpAll(() async {
    driver = await FlutterDriver.connect();
  });
  
  tearDownAll(() async {
    if (driver != null) {
      driver.close();
    }
  });
  
  test('收藏功能测试', () async {
    // 找到收藏按钮并点击
    final collectionButton = find.byValueKey('collection_button');
    await driver.tap(collectionButton);
    
    // 验证收藏状态
    final collectionIcon = find.byValueKey('collection_icon');
    final iconColor = await driver.getWidgetProperty(collectionIcon, 'color');
    expect(iconColor.toString(), contains('Colors.red'));
    
    // 进入收藏列表验证
    final collectionPageButton = find.byValueKey('collection_page_button');
    await driver.tap(collectionPageButton);
    
    final collectionList = find.byValueKey('collection_list');
    await driver.waitFor(collectionList);
  });
}

8. 常见问题与解决方案

8.1 状态同步问题

问题现象：在多个页面中使用收藏按钮时，状态不同步。

解决方案：

1. 确保所有页面都使用同一个CollectionProvider实例
2. 在需要的地方使用Consumer包裹相关组件
3. 避免在build方法中创建新的Provider实例

8.2 OpenHarmony平台兼容性问题

问题现象：某些Flutter插件在OpenHarmony上无法正常工作。

解决方案：

1. 检查插件是否支持OpenHarmony平台
2. 对于不支持的插件，寻找替代方案或自行实现
3. 关注Flutter for OpenHarmony的官方更新

8.3 性能优化建议

1. 对于大量收藏项，使用分页加载
2. 图片使用缓存策略（如cached_network_image）
3. 避免在build方法中进行耗时操作

在实际开发中，我发现Flutter在OpenHarmony平台上的表现相当稳定，特别是状态管理这一块，Provider的方案既简单又高效。对于收藏功能这种需要频繁更新UI的场景，Provider的notifyListeners机制能够很好地保证界面与数据的同步。