Flutter for OpenHarmony 游戏中心App实战：成就系统实现

本文介绍了游戏成就系统的设计与实现。成就系统通过设置不同难度等级的挑战目标，激励玩家持续参与游戏。系统包含页面框架、统计卡片和成就列表三部分：统计卡片展示已解锁/未解锁成就数量；成就列表使用卡片式布局，已解锁成就显示金色边框和完整图标，未解锁成就则采用灰色效果。页面采用响应式设计，确保在不同设备上都有良好的视觉效果。这种游戏化设计能有效提升用户参与度和留存率。

Toukito

575人浏览 · 2026-01-25 19:16:01

Toukito · 2026-01-25 19:16:01 发布

在这里插入图片描述

成就系统是游戏应用中非常重要的激励机制，它通过设置各种挑战目标，激发玩家的探索欲望和成就感。当玩家完成特定的任务或达到某个里程碑时，就会解锁相应的成就徽章。这种游戏化的设计不仅能提高用户的参与度，还能增加应用的趣味性和粘性。本文将详细介绍成就系统页面的实现，包括成就展示、解锁状态、统计信息等功能。

成就系统的设计理念

成就系统的设计需要平衡挑战性和可达成性。成就太简单会让玩家觉得没有意义，太难又会让玩家失去动力。一个好的成就系统应该包含不同难度级别的成就，从新手成就到高级成就，让不同水平的玩家都能找到适合自己的目标。

我们的成就系统包含多种类型的成就：入门成就如"新手上路"，鼓励玩家开始游戏；进阶成就如"连胜达人"，需要一定的技巧和坚持；高级成就如"百战百胜"，是对资深玩家的挑战。每个成就都有清晰的描述，告诉玩家如何解锁，让目标明确可见。

成就的视觉设计也很重要。已解锁的成就应该醒目突出，使用亮色和特殊标记；未解锁的成就则使用灰色或半透明效果，形成鲜明对比。这种视觉反馈让玩家一眼就能看出自己的进度，激发他们继续挑战的欲望。

页面组件的定义

AchievementsPage是一个无状态组件，负责展示成就列表和统计信息。

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

  @override
  Widget build(BuildContext context) {

使用StatelessWidget让组件保持简单。成就数据的管理可以通过状态管理方案来处理，页面本身只负责展示。这种设计符合单一职责原则，让代码更容易理解和维护。

const构造函数表示这个Widget是编译时常量，可以提高性能。super.key传递给父类，用于Widget的标识。虽然这些都是基础知识，但正确使用它们可以让应用运行得更加流畅。

成就数据的定义

我们先定义一组模拟的成就数据，展示不同类型和状态的成就。

    final achievements = [
      {'name': '新手上路', 'desc': '完成第一个游戏', 'icon': '🎯', 'unlocked': true},
      {'name': '连胜达人', 'desc': '连续赢得5场游戏', 'icon': '🔥', 'unlocked': true},
      {'name': '百战百胜', 'desc': '累计赢得100场游戏', 'icon': '👑', 'unlocked': false},
      {'name': '速度之王', 'desc': '在60秒内完成游戏', 'icon': '⚡', 'unlocked': true},
      {'name': '完美主义', 'desc': '获得满分', 'icon': '💯', 'unlocked': false},
      {'name': '坚持不懈', 'desc': '连续7天登录', 'icon': '📅', 'unlocked': true},
    ];

每个成就是一个Map，包含名称、描述、图标和解锁状态。名称要简洁有力，让人一眼就能理解成就的主题。描述要清晰明确，告诉玩家具体的解锁条件。图标使用emoji，既直观又不需要准备图片资源。

unlocked字段标记成就是否已解锁。这个布尔值会影响成就的显示样式，已解锁的成就会有特殊的视觉效果。在实际应用中，这些数据应该从数据库或服务器获取，根据玩家的实际游戏数据来判断成就是否解锁。

成就的设计要有层次感。"新手上路"是最基础的成就，几乎所有玩家都能解锁。"连胜达人"需要一定的技巧和运气。"百战百胜"则是长期目标，需要玩家持续投入。这种递进的难度设计让成就系统更有吸引力。

页面框架的构建

页面使用Scaffold作为基本框架，包含AppBar和body两部分。

    return Scaffold(
      appBar: AppBar(
        title: const Text('成就系统'),
        backgroundColor: const Color(0xFF16213e),
      ),

Scaffold提供了标准的Material Design页面结构。AppBar显示页面标题"成就系统"，让用户清楚地知道当前浏览的内容。

backgroundColor设置为深蓝色，与应用的整体主题保持一致。这种一致性让应用看起来更加专业，用户在不同页面之间切换时不会感到突兀。

const关键字用于Text，因为标题是固定的。这些小的优化累积起来，可以让应用的性能得到提升。虽然单个const的影响很小，但在整个应用中大量使用，效果就会很明显。

统计信息卡片的实现

页面顶部显示一个统计卡片，展示已解锁和未解锁成就的数量。

      body: Column(
        children: [
          Container(
            margin: EdgeInsets.all(16.w),
            padding: EdgeInsets.all(20.w),
            decoration: BoxDecoration(
              gradient: const LinearGradient(
                colors: [Color(0xFF6a11cb), Color(0xFF2575fc)],
              ),
              borderRadius: BorderRadius.circular(16.r),
            ),

body部分使用Column垂直排列统计卡片和成就列表。第一个子元素是统计卡片，使用Container作为容器。

margin设置了外边距16.w，让卡片不会紧贴屏幕边缘。padding设置了内边距20.w，让卡片内的内容有足够的呼吸空间。

decoration使用渐变色背景，从紫色渐变到蓝色。渐变色比纯色更有层次感，视觉效果更加丰富。这两个颜色都是冷色调，给人科技、专业的感觉，符合游戏应用的调性。

borderRadius设置为16.r，创建圆角效果。圆角让卡片看起来更加柔和，符合现代UI设计的趋势。使用flutter_screenutil的适配单位，确保在不同设备上保持一致的视觉效果。

统计数据的展示

统计卡片内部使用Row水平排列已解锁和未解锁的数量。

            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                Column(
                  children: [
                    Text('4', style: TextStyle(fontSize: 32.sp, fontWeight: FontWeight.bold, color: Colors.white)),
                    Text('已解锁', style: TextStyle(fontSize: 14.sp, color: Colors.white70)),
                  ],
                ),
                Container(width: 1, height: 40.h, color: Colors.white30),
                Column(
                  children: [
                    Text('2', style: TextStyle(fontSize: 32.sp, fontWeight: FontWeight.bold, color: Colors.white)),
                    Text('未解锁', style: TextStyle(fontSize: 14.sp, color: Colors.white70)),
                  ],
                ),
              ],
            ),
          ),

Row的mainAxisAlignment设置为spaceAround，让两个统计项均匀分布。每个统计项使用Column垂直排列数字和标签。

数字使用32.sp的大字号和粗体，非常醒目。颜色使用白色，在渐变色背景上有很好的对比度。标签使用14.sp的小字号和半透明的白色，表明这是次要信息。

中间的Container创建了一条竖线，作为分隔符。宽度为1，高度为40.h，颜色使用半透明的白色。这条分隔线让两个统计项的界限更加清晰，视觉上更加整洁。

这种上下结构的统计项设计很常见，数字在上突出重点，标签在下说明含义。用户可以快速扫描数字，然后通过标签理解数字的意义。

成就列表的构建

统计卡片下方是成就列表，使用ListView展示所有成就。

          Expanded(
            child: ListView.builder(
              padding: EdgeInsets.symmetric(horizontal: 16.w),
              itemCount: achievements.length,
              itemBuilder: (context, index) {
                final achievement = achievements[index];
                final unlocked = achievement['unlocked'] as bool;

Expanded让ListView占据Column中剩余的垂直空间。这样统计卡片占据固定的高度，列表占据剩余的所有空间，可以滚动查看所有成就。

ListView.builder是构建列表的高效方式，它只会渲染可见区域的列表项。padding设置了水平内边距，让列表内容不会紧贴屏幕边缘。

itemCount设置为成就列表的长度，itemBuilder为每个成就创建一个Widget。在回调函数中，我们首先获取当前成就的数据，然后提取unlocked字段，这个布尔值会影响成就的显示样式。

成就卡片的设计

每个成就显示为一个卡片，已解锁的成就有金色边框，未解锁的成就则没有边框。

                return Container(
                  margin: EdgeInsets.only(bottom: 12.h),
                  padding: EdgeInsets.all(16.w),
                  decoration: BoxDecoration(
                    color: const Color(0xFF16213e),
                    borderRadius: BorderRadius.circular(12.r),
                    border: Border.all(
                      color: unlocked ? Colors.amber : Colors.transparent,
                      width: 2,
                    ),
                  ),

Container是卡片的容器，margin设置了底部间距，让相邻的卡片之间有一定的间隔。padding设置了内边距，让卡片内的内容不会紧贴边缘。

decoration定义了卡片的装饰样式。color设置为深蓝色，与AppBar的颜色一致。borderRadius创建圆角效果，让卡片看起来更加柔和。

border是关键的视觉区分。已解锁的成就使用琥珀色边框，宽度为2，非常醒目。未解锁的成就使用透明边框，看起来就像没有边框一样。这种视觉对比让玩家一眼就能看出哪些成就已经解锁，哪些还需要努力。

琥珀色是一个暖色调，给人积极、成功的感觉。用它来标记已解锁的成就，可以增强玩家的成就感。透明边框则让未解锁的成就显得低调，激发玩家去解锁它们的欲望。

成就内容的布局

卡片内容使用Row水平排列图标和文字信息。

                  child: Row(
                    children: [
                      Container(
                        width: 60.w,
                        height: 60.w,
                        decoration: BoxDecoration(
                          color: unlocked ? Colors.amber.withOpacity(0.2) : Colors.grey.withOpacity(0.2),
                          borderRadius: BorderRadius.circular(12.r),
                        ),
                        child: Center(
                          child: Opacity(
                            opacity: unlocked ? 1.0 : 0.3,
                            child: Text(
                              achievement['icon'] as String,
                              style: TextStyle(fontSize: 32.sp),
                            ),
                          ),
                        ),
                      ),
                      SizedBox(width: 16.w),

Row水平排列图标和文字。图标容器是一个正方形，宽高都是60.w。背景色根据解锁状态不同：已解锁使用半透明的琥珀色，未解锁使用半透明的灰色。

borderRadius给图标容器添加圆角，让它看起来更加精致。Center组件确保emoji在容器中居中显示。

Opacity组件控制图标的透明度。已解锁的成就透明度为1.0，完全不透明，图标清晰可见。未解锁的成就透明度为0.3，显得暗淡，视觉上传达出"尚未获得"的信息。

这种透明度的变化是一个微妙但有效的视觉提示。配合背景色和边框的变化，形成了三重视觉区分，让已解锁和未解锁的成就有明显的差异。

SizedBox添加了16.w的水平间距，将图标和文字信息分开。适当的间距让布局更加清晰，不会显得拥挤。

成就信息的展示

成就信息包括名称和描述，使用Column垂直排列。Expanded让这部分内容占据剩余的水平空间。

                      Expanded(
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              achievement['name'] as String,
                              style: TextStyle(
                                fontSize: 16.sp,
                                fontWeight: FontWeight.bold,
                                color: unlocked ? Colors.white : Colors.white60,
                              ),
                            ),
                            SizedBox(height: 4.h),
                            Text(
                              achievement['desc'] as String,
                              style: TextStyle(fontSize: 12.sp, color: Colors.white60),
                            ),
                          ],
                        ),
                      ),

Expanded让Column占据Row中剩余的水平空间。crossAxisAlignment设置为start，让文本左对齐。

成就名称使用16.sp的字号和粗体，让它醒目突出。颜色根据解锁状态不同：已解锁使用纯白色，未解锁使用半透明的白色。这种颜色的变化进一步强化了解锁状态的视觉区分。

SizedBox添加了4.h的垂直间距，将名称和描述分开。这个间距比较小，因为名称和描述是紧密相关的信息。

成就描述使用12.sp的小字号，表明这是次要信息。颜色使用半透明的白色，无论是否解锁都使用相同的颜色。描述的作用是告诉玩家如何解锁成就，所以即使未解锁也应该清晰可读。

解锁标记的显示

已解锁的成就在右侧显示一个勾选图标，作为额外的视觉标记。

                      if (unlocked)
                        const Icon(Icons.check_circle, color: Colors.amber),
                    ],
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

使用if条件渲染，只有已解锁的成就才显示勾选图标。Icon使用Material Icons中的check_circle图标，这是一个实心的圆形勾选标记，视觉效果很明显。

颜色使用琥珀色，与边框的颜色一致，形成了统一的视觉语言。这个图标是第四重视觉区分，进一步强化了已解锁成就的特殊性。

整个成就卡片的设计使用了多重视觉提示：金色边框、琥珀色背景、完全不透明的图标、纯白色的名称、勾选图标。这些提示共同作用，让已解锁的成就非常醒目，给玩家强烈的成就感。

成就解锁的判定逻辑

在实际应用中，成就的解锁需要根据玩家的游戏数据来判定。

可以定义一个成就管理类，负责检查成就的解锁条件：

class AchievementManager {
  static bool checkAchievement(String achievementId, Map<String, dynamic> playerData) {
    switch (achievementId) {
      case 'first_game':
        return playerData['totalGames'] >= 1;
      case 'win_streak':
        return playerData['currentStreak'] >= 5;
      case 'hundred_wins':
        return playerData['totalWins'] >= 100;
      case 'speed_king':
        return playerData['fastestTime'] <= 60;
      case 'perfect_score':
        return playerData['hasMaxScore'] == true;
      case 'daily_login':
        return playerData['loginStreak'] >= 7;
      default:
        return false;
    }
  }
}

这个方法接收成就id和玩家数据，根据不同的成就检查相应的条件。比如"新手上路"需要总游戏次数大于等于1，"连胜达人"需要当前连胜次数大于等于5。

每次游戏结束或玩家数据更新时，都应该检查所有成就的解锁条件。如果某个成就刚刚解锁，可以显示一个动画提示，增强玩家的成就感：

void _checkAndUnlockAchievements() {
  for (final achievement in allAchievements) {
    if (!achievement.unlocked && AchievementManager.checkAchievement(achievement.id, playerData)) {
      _unlockAchievement(achievement);
      _showUnlockAnimation(achievement);
    }
  }
}

这个方法遍历所有成就，检查未解锁的成就是否满足解锁条件。如果满足，调用_unlockAchievement更新成就状态，然后调用_showUnlockAnimation显示解锁动画。

成就解锁动画的实现

当玩家解锁新成就时，应该有一个醒目的动画提示，让玩家感受到成就感。

可以使用对话框或底部弹窗来展示解锁动画：

void _showUnlockAnimation(Achievement achievement) {
  showDialog(
    context: context,
    builder: (context) => Dialog(
      backgroundColor: Colors.transparent,
      child: Container(
        padding: EdgeInsets.all(24.w),
        decoration: BoxDecoration(
          gradient: const LinearGradient(
            colors: [Color(0xFF6a11cb), Color(0xFF2575fc)],
          ),
          borderRadius: BorderRadius.circular(20.r),
        ),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('🎉', style: TextStyle(fontSize: 60.sp)),
            SizedBox(height: 16.h),
            Text('成就解锁！', style: TextStyle(fontSize: 24.sp, fontWeight: FontWeight.bold, color: Colors.white)),
            SizedBox(height: 8.h),
            Text(achievement.icon, style: TextStyle(fontSize: 48.sp)),
            SizedBox(height: 8.h),
            Text(achievement.name, style: TextStyle(fontSize: 20.sp, fontWeight: FontWeight.bold, color: Colors.white)),
            SizedBox(height: 4.h),
            Text(achievement.description, style: TextStyle(fontSize: 14.sp, color: Colors.white70), textAlign: TextAlign.center),
            SizedBox(height: 20.h),
            ElevatedButton(
              onPressed: () => Navigator.pop(context),
              style: ElevatedButton.styleFrom(backgroundColor: Colors.amber),
              child: const Text('太棒了！'),
            ),
          ],
        ),
      ),
    ),
  );
}

这个对话框使用渐变色背景，显示庆祝emoji、成就图标、名称和描述。底部有一个按钮让用户关闭对话框。整个设计充满了庆祝的氛围，让玩家感受到解锁成就的喜悦。

可以添加一些动画效果，比如图标的缩放动画、文字的淡入动画等，让解锁提示更加生动。使用AnimatedContainer或AnimationController可以实现这些动画效果。

成就进度的显示

对于一些需要累积的成就，可以显示进度条，让玩家知道自己离解锁还有多远。

Widget _buildProgressAchievement(Achievement achievement, int current, int target) {
  final progress = current / target;
  
  return Container(
    // 卡片样式...
    child: Column(
      children: [
        Row(
          // 图标和文字...
        ),
        SizedBox(height: 12.h),
        LinearProgressIndicator(
          value: progress,
          backgroundColor: Colors.grey.withOpacity(0.3),
          valueColor: const AlwaysStoppedAnimation<Color>(Colors.amber),
        ),
        SizedBox(height: 4.h),
        Text('$current / $target', style: TextStyle(fontSize: 12.sp, color: Colors.white60)),
      ],
    ),
  );
}

这个方法在成就卡片中添加了进度条和进度文字。LinearProgressIndicator显示进度条，value是0到1之间的值，表示完成的百分比。进度文字显示当前值和目标值，让玩家清楚地知道还需要多少努力。

进度条的设计让成就系统更加透明，玩家可以看到自己的进展，而不是只有"已解锁"和"未解锁"两种状态。这种可视化的反馈可以激励玩家继续努力，因为他们能看到自己正在接近目标。

成就分类的实现

当成就数量很多时，可以按类别进行分组，让玩家更容易找到感兴趣的成就。

可以在页面顶部添加一个分类标签栏，点击不同的标签显示不同类别的成就：

final categories = ['全部', '游戏', '社交', '收集', '挑战'];
int _selectedCategory = 0;

Widget _buildCategoryTabs() {
  return SizedBox(
    height: 50.h,
    child: ListView.builder(
      scrollDirection: Axis.horizontal,
      padding: EdgeInsets.symmetric(horizontal: 16.w),
      itemCount: categories.length,
      itemBuilder: (context, index) {
        final isSelected = index == _selectedCategory;
        return GestureDetector(
          onTap: () {
            setState(() {
              _selectedCategory = index;
            });
          },
          child: Container(
            margin: EdgeInsets.only(right: 12.w),
            padding: EdgeInsets.symmetric(horizontal: 20.w, vertical: 10.h),
            decoration: BoxDecoration(
              color: isSelected ? Colors.purpleAccent : const Color(0xFF16213e),
              borderRadius: BorderRadius.circular(25.r),
            ),
            child: Center(child: Text(categories[index])),
          ),
        );
      },
    ),
  );
}