基于 Harmony 6.0 应用的积分商城系统首页实现

前言

积分商城是几乎所有大型 App 的标配——把用户日常活跃、消费、签到等行为转换成积分，再让用户用积分兑换实物或券。一款好的积分商城应用要把"我有多少积分 / 现在能兑换什么 / 怎么赚更多积分 / 积分什么时候过期"四件事在一屏内全部铺到。Harmony 6.0 时代，积分商城应用迎来了几个独特的能力红利——HMS Account 提供积分账户跨端同步、HMS Wallet 让兑换的券电子化、PushKit 让"积分快过期"精准触达、桌面服务卡片让积分余额常驻可见。本文用 Flutter 在 Harmony 6.0 上实现一个积分商城首页，作为本系列第二十一组的开篇。

背景

积分商城类应用的视觉关键词是"温暖、激励、可信"——金色 #F59E0B 配橙色 #FB923C 是这类应用的合适主色——既有"奖励感"又有"激励感"。本项目首页 5 个模块：渐变 Header（积分总数 + 大签到按钮）、4 大兑换分类（券 / 实物 / 视频会员 / 数码）、热门兑换大卡片、每日任务进度、积分明细列表。从产品角度，积分商城最大的复购点是"每日签到打卡"——这种"还差 X 天连续打卡"的紧迫感是用户每天打开应用的最强动力。鸿蒙 6.0 桌面服务卡片让"签到"动作可以从桌面直接完成，无需打开主 App。

Flutter × Harmony 6.0 跨端开发介绍

Harmony 6.0 在积分商城类应用上的能力栈完整——HMS Account 提供积分账户、PushKit 提供过期推送、HMS Wallet 让兑换的券落袋、原子化服务让"快速签到"成为桌面卡片入口、AI 助手能力提供积分使用建议。Flutter 嵌入 Harmony 6.0 的方案在这种"轻交互 + 强激励"应用上非常合适——主页用 Flutter 自绘提供丰富 UI，账户能力通过 ArkTS 端 HMS Account 接入。Skia 引擎对金橙色的渲染极其温暖，配合圆角和大留白，整页氛围既温暖又激励。

开发核心代码

代码一：积分总数 + 签到 Header

Header 必须把"我的积分总数 + 签到按钮"做成视觉中心——这是用户每次打开应用的核心动作。我用一个金橙渐变 Container，中部一个超大字号的积分数 + “今日签到” 大按钮 + 连续天数 chip。

Widget _header() {
  return Container(
    padding: const EdgeInsets.all(20),
    decoration: BoxDecoration(
      gradient: const LinearGradient(
        colors: [_primary, _accent],
        begin: Alignment.topLeft, end: Alignment.bottomRight),
      borderRadius: BorderRadius.circular(24),
    ),
    child: Column(children: [
      const Row(children: [
        Icon(Icons.stars, color: Colors.white, size: 22),
        SizedBox(width: 8),
        Text('积分商城',
            style: TextStyle(color: Colors.white,
                fontSize: 18, fontWeight: FontWeight.w800)),
        Spacer(),
        Container(padding: EdgeInsets.symmetric(
            horizontal: 8, vertical: 3),
          decoration: BoxDecoration(
            color: Colors.white24,
            borderRadius: BorderRadius.all(Radius.circular(6))),
          child: Row(children: [
            Icon(Icons.local_fire_department,
                color: Colors.white, size: 14),
            SizedBox(width: 4),
            Text('连续 18 天',
                style: TextStyle(color: Colors.white,
                    fontSize: 12, fontWeight: FontWeight.w800)),
          ]),
        ),
      ]),
      const SizedBox(height: 18),
      const Text('我的积分',
          style: TextStyle(color: Colors.white70, fontSize: 13)),
      const SizedBox(height: 4),
      const Text('12,860',
          style: TextStyle(color: Colors.white,
              fontSize: 48, fontWeight: FontWeight.w900)),
      const SizedBox(height: 6),
      const Text('128 积分将在 7 天后过期',
          style: TextStyle(color: Colors.white70, fontSize: 12)),
      const SizedBox(height: 14),
      Container(width: double.infinity, height: 50,
        decoration: BoxDecoration(color: Colors.white,
            borderRadius: BorderRadius.circular(25),
            boxShadow: [BoxShadow(
                color: Colors.black.withValues(alpha: 0.18),
                blurRadius: 12, offset: const Offset(0, 4))]),
        child: const Center(child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Icon(Icons.check_circle, color: _primary, size: 22),
            SizedBox(width: 6),
            Text('今日签到 +18 积分',
                style: TextStyle(color: _primary,
                    fontSize: 16, fontWeight: FontWeight.w800)),
          ],
        )),
      ),
    ]),
  );
}

签到按钮在生产业务里点击后通过 ArkTS 端 HMS Account 把签到行为提交到积分服务，连续签到天数会让单次奖励逐步增加（第 1 天 5 分、第 2 天 10 分、第 7 天 50 分等）。这种阶梯奖励是积分商城最经典的留存设计。"128 积分将在 7 天后过期"在生产业务里通过 PushKit 在过期前 7 天、3 天、1 天分别推送一次，让用户主动来兑换。

从「积分总数 + 签到 Header」的游戏化激励与日常打卡设计角度再补一段。积分商城类应用的 Header 必须把「我有多少积分 + 今天签到了吗」一次性交付。这段 Header 用主橙到金色的渐变背景（积分=金币色调），配合「我的积分 X」+ 「连续签到 X 天」+ 「立即签到」按钮的多段式排版。"立即签到"按钮在已签到时变成"已签到"灰色禁用态，给用户即时反馈。如果未来要扩展支持「补签卡」（用积分换补签机会），可以在 Header 加补签 chip。鸿蒙 6.0 的 FormExtensionAbility 让"今日积分 + 签到"做成桌面卡片，用户解锁手机就能一键签到。

代码二：4 大兑换分类

兑换商城的 4 大入口：优惠券、实物、视频会员、数码产品。每项独立色相图标。

Widget _categories() {
  final items = const [
    [Icons.local_offer, '优惠券', '218 件', _primary],
    [Icons.shopping_bag, '实物', '86 件', _accent],
    [Icons.tv, '会员', '12 项', _green],
    [Icons.devices, '数码', '32 件', _purple],
  ];
  return GridView.count(
    crossAxisCount: 2, shrinkWrap: true,
    physics: const NeverScrollableScrollPhysics(),
    mainAxisSpacing: 10, crossAxisSpacing: 10,
    childAspectRatio: 2.4,
    children: items.map((it) {
      final c = it[3] as Color;
      return Container(padding: const EdgeInsets.all(14),
        decoration: BoxDecoration(color: _card,
            borderRadius: BorderRadius.circular(14)),
        child: Row(children: [
          Container(width: 44, height: 44,
            decoration: BoxDecoration(
              color: c.withValues(alpha: 0.14),
              borderRadius: BorderRadius.circular(12)),
            child: Icon(it[0] as IconData, color: c, size: 22),
          ),
          const SizedBox(width: 12),
          Expanded(child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(it[1] as String, style: const TextStyle(
                  color: _ink, fontSize: 13,
                  fontWeight: FontWeight.w700)),
              const SizedBox(height: 2),
              Text(it[2] as String, style: const TextStyle(
                  color: _sub, fontSize: 11)),
            ],
          )),
        ]),
      );
    }).toList(),
  );
}

4 大兑换分类（实物商品、电子券、视频会员、话费充值）覆盖了积分商城最高频的兑换品类。每个分类用独立色相做识别（实物橙、券蓝、会员紫、话费绿），让用户视觉快速分类。

从「4 大兑换分类」的兑换品类与用户偏好设计角度再补一段。积分商城的核心是"让积分有处可花"——分类越精准用户越愿意来兑换。这段 4 大分类是国内主流积分商城的标配（移动 / 联通 / 电信 / 京东 PLUS / 招行掌上生活）。「视频会员」「话费充值」是最受欢迎的兑换品——因为是高频虚拟商品，立即到账、零物流成本。如果未来要扩展支持「按所需积分排序」（让用户用最少积分能兑换到什么），可以接入 NeuralNetworkRuntime 端侧推荐。鸿蒙 6.0 的 HMS Wallet 让兑换的电子券自动落袋系统钱包，用户兑完后下次消费自动可用。

代码三：每日任务进度

每日任务是积分商城最重要的"刷分入口"——浏览 1 分钟、看视频、做答题、参加活动等。我用 Container 包裹，每条任务一行，带进度条 + 完成 chip。

Widget _taskItem(Map<String, dynamic> t) {
  final progress = t['progress'] as double;
  final done = progress >= 1;
  return Container(
    margin: const EdgeInsets.only(bottom: 10),
    padding: const EdgeInsets.all(14),
    decoration: BoxDecoration(color: _card,
        borderRadius: BorderRadius.circular(14)),
    child: Row(children: [
      Container(width: 40, height: 40,
        decoration: BoxDecoration(
          color: _primary.withValues(alpha: 0.14),
          borderRadius: BorderRadius.circular(10)),
        child: Icon(t['icon'] as IconData,
            color: _primary, size: 22),
      ),
      const SizedBox(width: 12),
      Expanded(child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(t['title'] as String,
              style: const TextStyle(color: _ink,
                  fontSize: 13, fontWeight: FontWeight.w700)),
          const SizedBox(height: 6),
          ClipRRect(borderRadius: BorderRadius.circular(2),
            child: LinearProgressIndicator(
              value: progress, minHeight: 4,
              backgroundColor: Colors.black12,
              valueColor: const AlwaysStoppedAnimation(_primary),
            ),
          ),
          const SizedBox(height: 4),
          Text(t['desc'] as String,
              style: const TextStyle(
                  color: _sub, fontSize: 11)),
        ],
      )),
      const SizedBox(width: 10),
      Container(padding: const EdgeInsets.symmetric(
          horizontal: 10, vertical: 6),
        decoration: BoxDecoration(
          color: done ? Colors.grey.withValues(alpha: 0.16)
              : _accent,
          borderRadius: BorderRadius.circular(20)),
        child: Text(done ? '已完成' : '+${t['reward']}',
            style: TextStyle(
                color: done ? Colors.grey : Colors.white,
                fontSize: 11, fontWeight: FontWeight.w800)),
      ),
    ]),
  );
}

任务进度通过分布式数据对象多端同步——用户在手机上完成的任务，平板和智慧屏立刻可见。

从「每日任务进度」的游戏化激励与拉新引导设计角度再补一段。积分商城的核心驱动力是「每日任务」——通过完成任务获得积分、用积分兑换奖励的闭环。这段卡片用「任务图标 + 任务名 + 进度条 + 奖励积分 + 立即完成按钮」五段信息塞在每条任务里。任务进度用 LinearProgressIndicator 显示已完成数 / 总任务数。如果某任务已完成，按钮变绿色「已完成」+ 勾，给用户明显视觉反馈。如果未来要扩展支持「连续完成奖励」（连续 7 天完成所有任务额外送 100 积分），可以在卡片下方加连续天数 chip。鸿蒙 6.0 的分布式数据让多端任务进度自动一致。AI 助手能力可以根据用户活跃度推荐"最容易完成的任务组合"，让用户每天能快速攒到 100+ 积分。

心得

积分商城类 App 的视觉灵魂是"温暖 + 激励"——金橙色给奖励感，连续打卡 chip 给紧迫感。开发时最容易犯的错是把"今日签到"按钮做得不够显著，反而失去了核心激励。我的策略是把签到按钮做成 50 高度白底配阴影，让它成为整页第一吸睛点。从能力扩展角度，积分商城最值得在鸿蒙端打造的是"桌面服务卡片签到 + HMS Wallet 兑换券落袋 + PushKit 过期提醒"三件套——桌面签到让动作零成本、券落袋让兑换价值立刻可用、过期提醒让积分不浪费。

总结

本篇实现了 Harmony 6.0 端的积分商城首页，5 个模块、纯 UI、零依赖、约 360 行代码。骨架可直接迁移到航空里程、信用卡积分、会员等级等多种激励体系。从扩展角度建议生产业务里：把积分账户接入 HMS Account；把签到做成 FormExtensionAbility 桌面卡片；把兑换券接入 HMS Wallet；把过期提醒接入 PushKit；把任务推荐接入 AI 助手能力。