基于 Harmony 6.0 应用的考公刷题与公告推送应用首页实现

前言

考公是过去几年最热门的职业选择之一——稳定、体面、有保障，但竞争激烈到 1:300 的录取比是常态。一款好的考公应用要把"距考试 / 每日刷题 / 公告推送 / 行测申论"四件事在一屏内全部铺到。Harmony 6.0 时代，考公类应用迎来了几个独特的能力红利——PushKit 提供职位招考公告精准推送、HMS Cloud 让题库云端存储、AI 助手能力提供申论批改、分布式数据让多端进度同步、桌面服务卡片让倒计时常驻。本文用 Flutter 在 Harmony 6.0 上实现一个考公刷题首页。

背景

考公类应用的视觉关键词是"严肃、激励、专业"——靛蓝色 #4338CA 配橙色 #F97316 是这类应用的合适主色。本项目首页 5 个模块：渐变 Header（距考试 + 大刷题按钮）、4 大科目（行测 / 申论 / 面试 / 公基）、最新公告列表、本月练习数据、推荐课程。

Flutter × Harmony 6.0 跨端开发介绍

Harmony 6.0 在考公类应用上的能力栈完整——PushKit 提供高优先级公告推送（错过职位招考报名就来不及）、HMS Cloud 让题库云端备份、AI 助手能力提供申论批改、分布式数据让多端学习进度同步、HealthKit 让学习时长进入档案。

开发核心代码

代码一：倒计时 Header

Widget _header() {
  return Container(
    padding: const EdgeInsets.all(20),
    decoration: BoxDecoration(
      gradient: const LinearGradient(
        colors: [_primary, Color(0xFF312E81)],
        begin: Alignment.topLeft, end: Alignment.bottomRight),
      borderRadius: BorderRadius.circular(24),
    ),
    child: Column(crossAxisAlignment: CrossAxisAlignment.start,
        children: [
      const Row(children: [
        Icon(Icons.school, 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: _accent,
              borderRadius: BorderRadius.all(Radius.circular(6))),
          child: Text('国考',
              style: TextStyle(color: Colors.white,
                  fontSize: 11, fontWeight: FontWeight.w800)),
        ),
      ]),
      const SizedBox(height: 14),
      const Text('距 2026 国考还有',
          style: TextStyle(color: Colors.white70, fontSize: 13)),
      const SizedBox(height: 4),
      const Row(crossAxisAlignment: CrossAxisAlignment.end,
          children: [
        Text('186',
            style: TextStyle(color: Colors.white,
                fontSize: 60, fontWeight: FontWeight.w900)),
        SizedBox(width: 8),
        Padding(padding: EdgeInsets.only(bottom: 14),
          child: Text('天',
              style: TextStyle(color: Colors.white,
                  fontSize: 20, fontWeight: FontWeight.w700))),
      ]),
      const SizedBox(height: 14),
      Container(width: double.infinity, height: 50,
        decoration: BoxDecoration(color: Colors.white,
            borderRadius: BorderRadius.circular(25)),
        child: const Center(child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Icon(Icons.edit, color: _primary, size: 22),
            SizedBox(width: 6),
            Text('开始今日刷题（剩 80 题）',
                style: TextStyle(color: _primary,
                    fontSize: 16, fontWeight: FontWeight.w800)),
          ],
        )),
      ),
    ]),
  );
}

倒计时是这类 App 最值得做成桌面服务卡片的元素——每天解锁手机看到"还有 186 天"激励学习。

从「倒计时 Header」的备考紧迫感与长期目标设计角度再补一段。公考类应用的 Header 必须把「距离考试还有多久」做成视觉中心。这段 Header 用红色到深红的紧迫渐变，配合大字号倒计时、今日学习任务和「开始刷题」按钮，让用户每天打开都被时间感驱动。如果未来要扩展支持「多考试倒计时」，可以加省考、国考、事业单位 chip。鸿蒙 6.0 的 FormExtensionAbility 能把倒计时放到桌面，形成持续提醒。

代码二：4 大科目

Widget _subjects() {
  final items = const [
    [Icons.calculate, '行测', _primary],
    [Icons.edit_note, '申论', _accent],
    [Icons.record_voice_over, '面试', _amber],
    [Icons.menu_book, '公基', _green],
  ];
  return Container(padding: const EdgeInsets.all(14),
    decoration: BoxDecoration(color: _card,
        borderRadius: BorderRadius.circular(16)),
    child: Row(children: items.map((it) {
      final c = it[2] as Color;
      return Expanded(child: Column(children: [
        Container(width: 48, height: 48,
          decoration: BoxDecoration(
            color: c.withValues(alpha: 0.14),
            borderRadius: BorderRadius.circular(14)),
          child: Icon(it[0] as IconData, color: c, size: 22),
        ),
        const SizedBox(height: 8),
        Text(it[1] as String, style: const TextStyle(
            color: _ink, fontSize: 12,
            fontWeight: FontWeight.w600)),
      ]));
    }).toList()),
  );
}

4 大科目（行测、申论、面试、常识）覆盖公考备考的核心模块。每个科目对应不同训练方法，行测重速度，申论重结构，面试重表达，常识重积累。

从「4 大科目」的备考路径与学习资源组织角度再补一段。公考备考最怕眉毛胡子一把抓，科目入口能帮助用户把复习拆成明确模块。每个科目下应展示今日任务、正确率和薄弱点，形成闭环。如果未来要扩展支持「AI 组卷」，可以根据用户薄弱科目自动生成每日练习。鸿蒙 6.0 的端侧 AI 能做错题归因，不必上传敏感学习数据。

代码三：最新公告

Widget _notice(Map<String, dynamic> n) {
  return Container(
    margin: const EdgeInsets.only(bottom: 10),
    padding: const EdgeInsets.all(14),
    decoration: BoxDecoration(color: _card,
        borderRadius: BorderRadius.circular(14),
      border: Border(left: BorderSide(color: _primary, width: 4))),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(children: [
          Container(padding: const EdgeInsets.symmetric(
              horizontal: 6, vertical: 2),
            decoration: BoxDecoration(
              color: _primary.withValues(alpha: 0.14),
              borderRadius: BorderRadius.circular(4)),
            child: Text(n['type'] as String,
                style: const TextStyle(color: _primary,
                    fontSize: 10,
                    fontWeight: FontWeight.w800)),
          ),
          const SizedBox(width: 6),
          Text(n['date'] as String,
              style: const TextStyle(color: _sub, fontSize: 11)),
        ]),
        const SizedBox(height: 8),
        Text(n['title'] as String,
            style: const TextStyle(color: _ink,
                fontSize: 14, fontWeight: FontWeight.w700)),
      ],
    ),
  );
}

公告通过 PushKit 高优先级推送——职位招考公告时效性强，错过几天报名就关闭了。

从「最新公告」的信息时效与报名提醒设计角度再补一段。公考公告列表必须展示招考单位、报名时间、考试时间、岗位数和地区，让用户快速判断是否值得报名。报名截止日期应高亮，临近截止的公告排在最前。如果未来要扩展支持「岗位匹配」，AI 可以根据专业、学历、地区自动筛选可报岗位。鸿蒙 6.0 的 PushKit 高优先级提醒能显著降低错过报名窗口的概率。

心得

考公类 App 的视觉灵魂是"严肃 + 激励"——靛蓝色给政府专业感，倒计时大字号给压力。开发时最容易犯的错是把申论批改做得过于粗糙。我的策略是用 AI 助手提供精准批改。从能力扩展角度，考公应用最值得在鸿蒙端打造的是"PushKit 公告推送 + HMS Cloud 题库 + AI 助手申论批改 + 分布式数据多端同步"四件套。

总结

本篇实现了 Harmony 6.0 端的考公刷题首页，5 个模块、纯 UI、零依赖、约 340 行代码。从扩展角度建议生产业务里：把公告推送接入 PushKit；把题库接入 HMS Cloud；把申论批改接入 AI 助手；把"距考试"做成 FormExtensionAbility 桌面卡片；把进度接入分布式数据。下一篇是第四十六组的第二块——职业技能培训平台。