基于 Harmony 6.0 应用的校友联络平台首页实现

前言

校友是每个人最重要的弱关系资产之一——同窗多年的同学、共同社团的同伴、同一个导师下的师兄师姐，毕业后散落各地，但每一个人都可能在某一个职业阶段成为彼此的关键节点。然而毕业三年后，绝大多数同学的微信头像和昵称都换过几轮，单纯靠"翻通讯录"几乎不可能找到合适的联络对象。一款好的校友联络平台必须把"我们届的同学现在都在哪、做什么、能怎么联系"这件事可视化、可搜索、可信任。Harmony 6.0 时代，校友类应用迎来了几个独特的能力红利——HMS Account 提供学籍认证（确保每个人都是真实校友）、PushKit 让"老同学开通了校友账号"精准触达、分布式数据让多端校友信息同步、AI 助手让"找一个在腾讯做后端的师兄"语义直达。本文用 Flutter 在 Harmony 6.0 上实现一个校友联络首页，作为本系列第八组的第二篇。

背景

校友类应用的视觉关键词是"专业、温暖、可信"——专业对应"色彩稳重不花哨",温暖对应"圆角和留白让信息有呼吸感",可信对应"每条信息有学籍标识"。深蓝色 #1E40AF 配金色 #F59E0B 是这类应用的典型主色——既有"母校感"又有"成就感"。本项目首页 5 个模块：渐变 Header（学校 + 校友总数）、4 大功能入口（找校友 / 同届 / 行业 / 城市）、推荐校友横滑（头像 + 姓名 + 职位 + 共同标签）、校友活动近期 Banner、校友关怀提示。从产品角度，校友类应用的最大复购点是"持续遇见老同学"——用户每次打开应用都期待看到新的"刚加入的老同学"。所以应用需要把"刚加入"做成显著的标签，配合 PushKit 把通知精准送达。鸿蒙 6.0 上做这种端到端的可信社交，HMS Account 是基础设施——每个用户都通过学籍认证后才能加入，确保了平台的真实性。

Flutter × Harmony 6.0 跨端开发介绍

Harmony 6.0 在校友这种"长期低频但高价值"的关系型应用上的能力栈非常合适——HMS Account 提供学籍认证、PushKit 提供高优先级推送、分布式数据让多端同步、AI 助手让自然语言搜索可行、隐私沙盒确保校友隐私不外泄。Flutter 嵌入 Harmony 6.0 的方案在这种"轻交互、强信任"的应用上非常合适——主页用 Flutter 自绘提供丰富 UI，认证和推送等敏感能力通过 ArkTS 端原生 SDK 接入。Skia 引擎对深蓝 + 金色（#1E40AF / #F59E0B）的混合渲染非常稳重，OLED 屏下既不刺眼又有质感，配合圆角和大留白，整页氛围稳重温暖。

开发核心代码

代码一：母校 Header + 校友数

Header 必须把"哪个学校 + 校友总数"做成视觉中心——这是用户的归属感来源。我用一个深蓝渐变 Container，顶部学校名 + 切换图标，中部"清华大学校友 12.6 万人"大字号，底部一行 chip 显示"本届 1,286 人 · 本周新增 18"。

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(22),
    ),
    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: 16, fontWeight: FontWeight.w800)),
          Spacer(),
          Icon(Icons.search, color: Colors.white, size: 22),
        ]),
        const SizedBox(height: 18),
        const Row(crossAxisAlignment: CrossAxisAlignment.end,
            children: [
          Text('12.6',
              style: TextStyle(color: Colors.white,
                  fontSize: 44, fontWeight: FontWeight.w900)),
          SizedBox(width: 4),
          Padding(padding: EdgeInsets.only(bottom: 8),
            child: Text('万校友 · 全球分布',
                style: TextStyle(color: Colors.white,
                    fontSize: 14, fontWeight: FontWeight.w700))),
        ]),
        const SizedBox(height: 8),
        Row(children: [
          Container(padding: const EdgeInsets.symmetric(
              horizontal: 8, vertical: 3),
            decoration: BoxDecoration(
              color: Colors.white.withValues(alpha: 0.2),
              borderRadius: BorderRadius.circular(6)),
            child: const Text('我届 1,286 人',
                style: TextStyle(color: Colors.white,
                    fontSize: 11, fontWeight: FontWeight.w700)),
          ),
          const SizedBox(width: 6),
          Container(padding: const EdgeInsets.symmetric(
              horizontal: 8, vertical: 3),
            decoration: BoxDecoration(color: _amber,
                borderRadius: BorderRadius.circular(6)),
            child: const Text('本周新增 18',
                style: TextStyle(color: Colors.white,
                    fontSize: 11, fontWeight: FontWeight.w700)),
          ),
        ]),
      ],
    ),
  );
}

“本周新增 18"这种数据可以通过 PushKit 在每周日晚自动推送一次"本周有 18 位老同学加入了校友会”，让用户保持回访频率。鸿蒙的推送通道是系统级保活，准时性极高。

从「母校 Header + 校友数」的归属感与社区氛围营造角度再补一段。校友联络应用的 Header 必须传递「这是我们母校的人」的认同感。这段 Header 用学校主色（如清华紫、北大红）做对角渐变背景，配合学校 logo + 校友总数 + 「本周新增」三段数据，让用户感受到强烈的母校归属感。「我们已有 8,832 位校友 · 本周新增 18」这种社交感数据是社群类应用的经典心理触发——「我不是一个人在用」。如果未来要扩展支持多校园，可以让用户在 HMS Account 绑定多个学校身份，在 Header 上用 Tab 切换，骨架不变。

代码二：4 大功能入口

校友联络应用的 4 个高频入口：找校友、同届、行业、城市。每个用一个独立色相图标做区分。

Widget _entries() {
  final items = const [
    [Icons.search, '找校友', _primary],
    [Icons.groups, '同届', _amber],
    [Icons.business_center, '同行业', _green],
    [Icons.location_city, '同城市', _purple],
  ];
  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.16),
            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()),
  );
}

"找校友"在生产业务里点击后进入一个搜索页，支持按姓名、行业、公司、毕业年份多维度筛选。鸿蒙 6.0 的 AI 助手能力可以让"找一个在腾讯做后端的师兄"这种自然语言搜索直接得到结果，比传统多级筛选效率高得多。

从「4 大功能入口」的校友社区核心场景设计角度再补一段。校友联络的 4 大入口（找校友、校友圈、活动、求职内推）覆盖了校友关系的全部使用维度——人物搜索、动态分享、线下活动、职业互助。前两个入口是日常高频使用，后两个是深度活跃场景。每个入口用独立色相区分（紫、橙、绿、蓝），并配合主题相关图标（搜索、动态、日历、公文包）形成「图标即语义」的快速识别。这种 4 等分布局适合校友会这种「关系驱动 + 服务驱动」混合形态的应用。如果未来要扩展支持「校友访谈」「校友直播」等内容场景，可以扩展到 2x4 网格布局，骨架完全不动。

代码三：推荐校友横滑

每张校友卡片需要包含：头像（用色块代替）、姓名、毕业届 / 学院、当前职位、共同标签 chip、"打个招呼"按钮。我做成 220 高的横滑列表，每张卡片宽 200。

SizedBox(height: 220,
  child: ListView.separated(
    scrollDirection: Axis.horizontal,
    itemCount: alumnis.length,
    separatorBuilder: (_, __) => const SizedBox(width: 12),
    itemBuilder: (_, i) {
      final a = alumnis[i];
      return Container(width: 200,
        padding: const EdgeInsets.all(14),
        decoration: BoxDecoration(color: _card,
            borderRadius: BorderRadius.circular(16)),
        child: Column(children: [
          CircleAvatar(radius: 32,
            backgroundColor: (a['color'] as Color)
                .withValues(alpha: 0.2),
            child: Icon(Icons.person,
                color: a['color'] as Color, size: 36)),
          const SizedBox(height: 10),
          Text(a['name'] as String,
              style: const TextStyle(color: _ink,
                  fontSize: 14, fontWeight: FontWeight.w800)),
          const SizedBox(height: 2),
          Text(a['title'] as String,
              style: const TextStyle(color: _sub, fontSize: 11),
              maxLines: 1, overflow: TextOverflow.ellipsis),
          const SizedBox(height: 8),
          Container(padding: const EdgeInsets.symmetric(
              horizontal: 8, vertical: 3),
            decoration: BoxDecoration(
              color: _primary.withValues(alpha: 0.14),
              borderRadius: BorderRadius.circular(6)),
            child: Text(a['common'] as String,
                style: const TextStyle(color: _primary,
                    fontSize: 11,
                    fontWeight: FontWeight.w700)),
          ),
          const Spacer(),
          Container(width: double.infinity,
            padding: const EdgeInsets.symmetric(vertical: 8),
            decoration: BoxDecoration(color: _primary,
                borderRadius: BorderRadius.circular(20)),
            alignment: Alignment.center,
            child: const Text('打个招呼',
                style: TextStyle(color: Colors.white,
                    fontSize: 12, fontWeight: FontWeight.w700)),
          ),
        ]),
      );
    },
  ),
)

"共同标签"在生产业务里通过端侧 AI 推理实时计算——比对两个用户的画像（学院、入学年份、社团、城市、行业等），把匹配度最高的标签呈现出来。鸿蒙的 NeuralNetworkRuntime 让这种推理在 20ms 内完成，几乎无感。

从「推荐校友横滑」的视觉编码与社交破冰设计角度再补一段。推荐校友的核心是「让陌生校友变得不陌生」。这段横滑大卡片用「头像 + 姓名 + 入学年份 + 学院 + 共同标签 chip + 打招呼按钮」六段信息塞在卡片里，让用户的视觉动线从「头像（外貌）→ 入学年份（同辈感）→ 学院（专业归属）→ 共同标签（破冰话题）→ 打招呼（行动）」一气呵成。「共同 X 项」chip 用主色填充高亮，是用户决策的核心锚点——共同点多的校友天然更容易聊起来。如果未来要支持「校友卡片向左滑跳过、向右滑收藏」的 Tinder 式交互，可以引入 Dismissible 组件，鸿蒙 6.0 端的滑动手势识别精度足够高。

心得

校友类 App 的视觉灵魂是"专业 + 温暖"——深蓝色给专业，金色 chip 给温暖。开发时最容易犯的错是把校友信息做得过于"冷"（纯灰底白卡片），反而让用户感觉不到归属感。我的策略是用深蓝渐变 Header + 金色强调 chip，让"母校感"在视觉上有强烈呈现。从能力扩展角度，校友类应用最值得在鸿蒙端打造的是"学籍认证 + AI 搜索 + 隐私推送"三件套——学籍认证确保每个人都是真校友、AI 搜索让自然语言找人成为可能、隐私推送让消息内容不会被锁屏画面泄露。

总结

本篇实现了 Harmony 6.0 端的校友联络首页，5 个模块、纯 UI、零依赖、约 340 行代码。骨架可直接迁移到企业内部通讯录、行业人脉等多种关系型应用。从扩展角度建议生产业务里：把学籍认证接入 HMS Account；把推荐算法接入 NeuralNetworkRuntime 端侧 AI；把消息推送接入 PushKit 隐私模式；把"本周新增校友"做成 FormExtensionAbility 桌面卡片；把校友搜索接入 AI 助手语义路由。下一篇是第八组的最后一块——多人协作白板应用。