Flutter for OpenHarmony 万能游戏库App实战 - 收藏功能实现

收藏功能是一个重要的用户功能。这篇文章我们来实现一个完整的收藏系统，包括收藏管理、多类型支持、以及收藏列表展示。通过这个功能，我们能展示如何构建一个跨功能的数据管理系统 。

收藏数据模型

FavoriteItem类代表一个收藏项：

dart 复制代码

class FavoriteItem {
  final String id;
  final String type;
  final String name;
  final String? imageUrl;
  final Map<String, dynamic> data;

  FavoriteItem({
    required this.id,
    required this.type,
    required this.name,
    this.imageUrl,
    required this.data,
  });
}

id是收藏项的唯一标识。
type表示收藏项的类型（pokemon、free_game、rick_morty等）。
data存储完整的项目数据，用于导航到详情页面。

收藏提供者

FavoritesProvider使用Provider模式管理收藏：

dart 复制代码

class FavoritesProvider extends ChangeNotifier {
  List<FavoriteItem> _favorites = [];

  List<FavoriteItem> get favorites => _favorites;

  bool isFavorite(String id, String type) {
    return _favorites.any((item) => item.id == id && item.type == type);
  }

  void toggleFavorite(FavoriteItem item) {
    final index = _favorites.indexWhere((f) => f.id == item.id && f.type == item.type);
    if (index >= 0) {
      _favorites.removeAt(index);
    } else {
      _favorites.add(item);
    }
    notifyListeners();
  }

  List<FavoriteItem> getFavoritesByType(String type) {
    return _favorites.where((item) => item.type == type).toList();
  }
}

toggleFavorite用来切换收藏状态。
getFavoritesByType用来获取特定类型的收藏。

收藏列表页面

FavoritesScreen展示所有收藏：

dart 复制代码

class FavoritesScreen extends StatelessWidget {
  const FavoritesScreen({super.key});

  @override
  Widget build(BuildContext context) {
    final l10n = AppLocalizations.of(context);
    
    return DefaultTabController(
      length: 4,
      child: Scaffold(
        appBar: AppBar(
          title: Text(l10n.favorites),
          bottom: TabBar(
            isScrollable: true,
            tabs: [
              Tab(text: '全部'),
              Tab(text: l10n.pokemon),
              Tab(text: l10n.freeGames),
              Tab(text: l10n.rickMorty),
            ],
          ),
        ),
        body: Consumer<FavoritesProvider>(
          builder: (context, favorites, _) {
            return TabBarView(
              children: [
                _FavoritesList(items: favorites.favorites, l10n: l10n),
                _FavoritesList(items: favorites.getFavoritesByType('pokemon'), l10n: l10n),
                _FavoritesList(items: favorites.getFavoritesByType('free_game'), l10n: l10n),
                _FavoritesList(items: favorites.getFavoritesByType('rick_morty'), l10n: l10n),
              ],
            );
          },
        ),
      ),
    );
  }
}

使用TabBar展示不同类型的收藏。
使用Consumer监听FavoritesProvider的变化。

收藏列表项

_FavoritesList展示收藏列表：

dart 复制代码

class _FavoritesList extends StatelessWidget {
  final List<FavoriteItem> items;
  final AppLocalizations l10n;

  const _FavoritesList({required this.items, required this.l10n});

  void _navigateToDetail(BuildContext context, FavoriteItem item) {
    switch (item.type) {
      case 'pokemon':
        final id = item.data['id'];
        if (id != null) {
          Navigator.push(
            context,
            MaterialPageRoute(builder: (_) => PokemonDetailScreen(pokemonId: id is int ? id : int.tryParse(id.toString()) ?? 1)),
          );
        }
        break;
      case 'free_game':
        final id = item.data['id'];
        if (id != null) {
          Navigator.push(
            context,
            MaterialPageRoute(builder: (_) => GameDetailScreen(gameId: id is int ? id : int.tryParse(id.toString()) ?? 1)),
          );
        }
        break;
      case 'rick_morty':
        Navigator.push(
          context,
          MaterialPageRoute(builder: (_) => CharacterDetailScreen(character: item.data)),
        );
        break;
    }
  }

根据收藏项的类型导航到对应的详情页面。

总结

这篇文章我们实现了一个完整的收藏系统。涉及到的知识点包括：

数据模型 - 设计通用的收藏数据模型
状态管理 - 使用Provider管理收藏状态
多类型支持 - 支持多种类型的收藏
Tab导航 - 使用TabBar展示不同类型的收藏
导航集成 - 从收藏列表导航到详情页面
国际化 - 支持多语言显示

收藏功能展示了如何构建一个跨功能的数据管理系统 。通过合理的数据模型和状态管理，我们能为用户提供一个完整的收藏体验。

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net