基于 Harmony 6.0 应用的考研自习室预约应用首页实现

一键难忘

11110人浏览 · 2026-06-10 22:26:21

一键难忘 · 2026-06-10 22:26:21 发布

基于 Harmony 6.0 应用的考研自习室预约应用首页实现

前言

考研党最稀缺的资源是"安静的自习位"——图书馆人满为患、家里诱惑太多，付费自习室成为他们的最后选择。一款好的考研自习室应用要把"距考试 / 我的座位 / 附近自习室 / 学习时长"四件事在一屏内全部铺到。Harmony 6.0 时代，自习室类应用迎来了几个独特的能力红利——LocationKit 让自习室精准定位、HMS Wallet 让座位凭证电子化、HealthKit 让学习时长进入档案、PushKit 提供"考试倒计时"推送、桌面服务卡片让倒计时常驻可见。本文用 Flutter 在 Harmony 6.0 上实现一个考研自习室预约首页。
在这里插入图片描述

背景

考研自习室类应用的视觉关键词是"专注、严肃、激励"——靛蓝色 #1E40AF 配橙色 #F97316 是这类应用的合适主色。本项目首页 5 个模块：渐变 Header（距考试 + 大预约按钮）、当前预约座位、附近自习室、本周学习时长、考研社区。

Flutter × Harmony 6.0 跨端开发介绍

Harmony 6.0 在考研自习室类应用上的能力栈完整——LocationKit 让附近自习室精准定位、HMS Wallet 让座位凭证 NFC 化（刷手机入座）、HealthKit 让学习时长进入系统档案、PushKit 提供倒计时推送、超级终端让车机也能查看预约。

开发核心代码

代码一：倒计时 Header

Widget _header() {
  return Container(
    padding: const EdgeInsets.all(20),
    decoration: BoxDecoration(
      gradient: const LinearGradient(
        colors: [_primary, Color(0xFF1E3A8A)],
        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.chair_alt, color: _primary, size: 22),
            SizedBox(width: 6),
            Text('预约座位',
                style: TextStyle(color: _primary,
                    fontSize: 16, fontWeight: FontWeight.w800)),
          ],
        )),
      ),
    ]),
  );
}

倒计时通过 PushKit 在每个百天节点推送鼓励 + 桌面服务卡片让用户每天看到。

从「倒计时 Header」的备考仪式感与自习驱动设计角度再补一段。考研自习类应用的 Header 必须把「离考试还有多久 + 今天是否进入学习状态」一次性交付。这段 Header 用主蓝到深紫的学习渐变，配合大字号倒计时、今日目标时长和「开始自习」按钮，让用户每天看到时间压力。如果未来要扩展支持「研友互相监督」，可以在 Header 加研友在线 chip。鸿蒙 6.0 的桌面服务卡片让倒计时不进 App 也能持续提醒。
在这里插入图片描述

代码二：当前预约

Widget _currentSeat() {
  return Container(padding: const EdgeInsets.all(16),
    decoration: BoxDecoration(color: _card,
        borderRadius: BorderRadius.circular(16),
      border: Border.all(color: _primary.withValues(alpha: 0.3))),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Row(children: [
          Icon(Icons.bookmark, color: _primary, size: 20),
          SizedBox(width: 6),
          Text('我的预约',
              style: TextStyle(color: _ink, fontSize: 14,
                  fontWeight: FontWeight.w800)),
          Spacer(),
          Text('今日 9:00 - 22:00',
              style: TextStyle(color: _accent, fontSize: 11,
                  fontWeight: FontWeight.w700)),
        ]),
        const SizedBox(height: 10),
        const Text('知行考研自习室 · A 区 037 号',
            style: TextStyle(color: _ink,
                fontSize: 16, fontWeight: FontWeight.w800)),
        const SizedBox(height: 4),
        const Row(children: [
          Icon(Icons.location_on, color: _sub, size: 12),
          SizedBox(width: 4),
          Text('五道口 · 距您 1.2 km',
              style: TextStyle(color: _sub, fontSize: 11)),
          Spacer(),
          Icon(Icons.contactless, color: _primary, size: 18),
          SizedBox(width: 4),
          Text('NFC 入座',
              style: TextStyle(color: _primary, fontSize: 11,
                  fontWeight: FontWeight.w700)),
        ]),
      ],
    ),
  );
}

座位凭证通过 HMS Wallet 落袋——到自习室刷手机入座，无需打开 App。

从「当前预约」的座位管理与到场核验设计角度再补一段。自习室应用的当前预约卡必须展示座位号、楼层、预约时段、剩余时间和入座凭证，让考研党不必反复查短信或截图。凭证落袋到 HMS Wallet 后，到场刷手机即可入座。如果未来要扩展支持「迟到释放座位」，可以在预约开始后 15 分钟未入座时自动释放。鸿蒙 6.0 的 LocationKit 还能辅助判断用户是否已到达自习室附近。

代码三：本周学习时长

Widget _weekChart() {
  final hours = const [10.5, 11.2, 9.8, 12.0, 10.5, 8.6, 11.5];
  final maxVal = hours.reduce((a, b) => a > b ? a : b);
  return Container(padding: const EdgeInsets.all(16),
    decoration: BoxDecoration(color: _card,
        borderRadius: BorderRadius.circular(16)),
    child: Column(crossAxisAlignment: CrossAxisAlignment.start,
        children: [
      const Row(children: [
        Text('本周学习时长',
            style: TextStyle(color: _ink, fontSize: 14,
                fontWeight: FontWeight.w700)),
        Spacer(),
        Text('日均 10.6h · 共 74h',
            style: TextStyle(color: _accent, fontSize: 12,
                fontWeight: FontWeight.w700)),
      ]),
      const SizedBox(height: 14),
      SizedBox(height: 100,
        child: Row(crossAxisAlignment: CrossAxisAlignment.end,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: List.generate(7, (i) {
          final h = hours[i] / maxVal * 70;
          final days = ['一', '二', '三', '四', '五', '六', '日'];
          return Column(children: [
            Text('${hours[i]}h',
                style: const TextStyle(color: _primary,
                    fontSize: 11, fontWeight: FontWeight.w700)),
            const SizedBox(height: 4),
            Container(width: 14, height: h,
              decoration: BoxDecoration(color: _primary,
                  borderRadius: BorderRadius.circular(4))),
            const SizedBox(height: 6),
            Text(days[i], style: const TextStyle(
                color: _sub, fontSize: 11)),
          ]);
        })),
      ),
    ]),
  );
}

学习时长通过 HealthKit 拓展类目沉淀——让"学习"成为系统级健康活动一部分。

从「本周学习时长」的自律反馈与复盘设计角度再补一段。考研自习的核心是长期稳定投入，所以周时长图必须展示每日学习时长、达标天数和最高效时段。柱状图能让用户直观看到哪天偷懒、哪天爆发。如果未来要扩展支持「番茄钟效率分析」，可以把学习时长拆成专注时段和休息时段。鸿蒙 6.0 的 HealthKit 拓展类目让学习数据与睡眠、运动一起被分析，帮助用户找到最健康的备考节奏。
在这里插入图片描述

心得

考研自习室类 App 的视觉灵魂是"专注 + 激励"——靛蓝色给学术专业感，倒计时大字号给紧迫。开发时最容易犯的错是预约入座流程过于复杂。我的策略是用 HMS Wallet NFC 凭证一拉即用。从能力扩展角度，自习室类最值得在鸿蒙端打造的是"HMS Wallet NFC 座位凭证 + LocationKit 自习室定位 + HealthKit 学习时长 + PushKit 倒计时推送"四件套。

总结

本篇实现了 Harmony 6.0 端的考研自习室首页，5 个模块、纯 UI、零依赖、约 340 行代码。从扩展角度建议生产业务里：把座位凭证接入 HMS Wallet；把定位接入 LocationKit；把学习时长接入 HealthKit；把"距考试"做成 FormExtensionAbility 桌面卡片；把倒计时鼓励接入 PushKit。下一篇是第五十组的第二块——亲子阅读打卡应用。