Flutter for OpenHarmony 万能游戏库App实战 - 个人中心实现

个人中心是用户了解自己收藏和统计信息的重要页面。这篇文章我们来实现一个完整的个人中心页面，包括用户信息展示、收藏统计、以及快速导航。通过这个功能，我们能展示如何构建一个信息汇总页面 。

页面的基本结构

ProfileScreen是个人中心的主页面：

dart 复制代码

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

  @override
  Widget build(BuildContext context) {
    final l10n = AppLocalizations.of(context);
    
    return Scaffold(
      appBar: AppBar(title: Text(l10n.profile)),
      body: SingleChildScrollView(
        child: Column(
          children: [
            _buildHeader(context, l10n),
            _buildStats(context, l10n),
            const SizedBox(height: 16),
            _buildMenuSection(context, l10n),
          ],
        ),
      ),
    );
  }
}

页面包含三个主要部分：头部、统计信息、菜单。

头部设计

_buildHeader方法显示用户信息：

dart 复制代码

  Widget _buildHeader(BuildContext context, AppLocalizations l10n) {
    return Container(
      padding: const EdgeInsets.all(24),
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
          colors: [Theme.of(context).colorScheme.primary, Theme.of(context).colorScheme.secondary],
        ),
      ),
      child: Row(
        children: [
          CircleAvatar(
            radius: 40,
            backgroundColor: Colors.white,
            child: Icon(Icons.person, size: 48, color: Theme.of(context).colorScheme.primary),
          ),
          const SizedBox(width: 16),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(l10n.gamer, style: const TextStyle(color: Colors.white, fontSize: 24, fontWeight: FontWeight.bold)),
                const SizedBox(height: 4),
                Text(l10n.exploreGames, style: const TextStyle(color: Colors.white70)),
              ],
            ),
          ),
        ],
      ),
    );
  }

头部用渐变背景，显示用户头像和欢迎信息。

收藏统计

_buildStats方法显示收藏统计：

dart 复制代码

  Widget _buildStats(BuildContext context, AppLocalizations l10n) {
    return Consumer<FavoritesProvider>(
      builder: (context, favorites, _) {
        final pokemonCount = favorites.getFavoritesByType('pokemon').length;
        final gameCount = favorites.getFavoritesByType('free_game').length;
        final characterCount = favorites.getFavoritesByType('rick_morty').length;

        return Padding(
          padding: const EdgeInsets.all(16),
          child: Row(
            children: [
              _buildStatCard(context, l10n.pokemon, pokemonCount, Icons.catching_pokemon, Colors.red),
              const SizedBox(width: 12),
              _buildStatCard(context, l10n.games, gameCount, Icons.sports_esports, Colors.blue),
              const SizedBox(width: 12),
              _buildStatCard(context, l10n.characters, characterCount, Icons.movie, Colors.orange),
            ],
          ),
        );
      },
    );
  }

使用Consumer监听FavoritesProvider的变化。
显示三个统计卡片：宝可梦、游戏、角色。

_buildStatCard方法创建统计卡片：

dart 复制代码

  Widget _buildStatCard(BuildContext context, String label, int count, IconData icon, Color color) {
    return Expanded(
      child: Card(
        child: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            children: [
              Icon(icon, color: color, size: 28),
              const SizedBox(height: 8),
              Text('$count', style: Theme.of(context).textTheme.headlineSmall?.copyWith(fontWeight: FontWeight.bold)),
              Text(label, style: TextStyle(color: Colors.grey[600], fontSize: 12)),
            ],
          ),
        ),
      ),
    );
  }

每个统计卡片显示图标、数量和标签。

菜单部分

_buildMenuSection方法显示菜单项：

dart 复制代码

  Widget _buildMenuSection(BuildContext context, AppLocalizations l10n) {
    return Padding(
      padding: const EdgeInsets.all(16),
      child: Column(
        children: [
          _buildMenuItem(
            context,
            icon: Icons.favorite,
            title: l10n.favorites,
            subtitle: l10n.viewFavorites,
            onTap: () => Navigator.push(context, MaterialPageRoute(builder: (_) => const FavoritesScreen())),
          ),
          const SizedBox(height: 8),
          _buildMenuItem(
            context,
            icon: Icons.settings,
            title: l10n.settings,
            subtitle: l10n.appSettings,
            onTap: () => Navigator.push(context, MaterialPageRoute(builder: (_) => const SettingsScreen())),
          ),
          const SizedBox(height: 8),
          _buildMenuItem(
            context,
            icon: Icons.info,
            title: l10n.about,
            subtitle: l10n.appInfo,
            onTap: () => Navigator.push(context, MaterialPageRoute(builder: (_) => const AboutScreen())),
          ),
        ],
      ),
    );
  }

菜单项包括收藏、设置、关于。

_buildMenuItem方法创建菜单项：

dart 复制代码

  Widget _buildMenuItem(
    BuildContext context, {
    required IconData icon,
    required String title,
    required String subtitle,
    required VoidCallback onTap,
  }) {
    return Card(
      child: ListTile(
        leading: Icon(icon, color: Theme.of(context).colorScheme.primary),
        title: Text(title),
        subtitle: Text(subtitle),
        trailing: const Icon(Icons.chevron_right),
        onTap: onTap,
      ),
    );
  }

每个菜单项用ListTile展示。

总结

这篇文章我们实现了一个个人中心页面。涉及到的知识点包括：

信息汇总 - 在一个页面展示多种信息
渐变背景 - 使用LinearGradient创建视觉效果
统计展示 - 显示收藏统计信息
菜单导航 - 快速导航到其他页面
状态监听 - 使用Consumer监听状态变化
国际化 - 支持多语言显示

个人中心页面展示了如何构建一个信息汇总页面 。通过合理的布局和清晰的信息展示，我们能为用户提供一个完整的个人信息中心。

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