鸿蒙同城兴趣圈页面构建：今晚活动与同频推荐模块详解

鸿蒙同城兴趣圈页面构建：今晚活动与同频推荐模块详解

前言

在 HarmonyOS 6.0 应用开发中，社交类页面的活动展示和用户推荐是提升用户参与度的核心功能模块。本文将以“同城兴趣圈”应用中的“今晚活动”时间线模块和“同频推荐”用户卡片网格为例，深入解析如何在鸿蒙平台上构建活动列表和用户匹配界面。

背景

在同城社交场景中，用户需要了解今晚可参加的活动，同时希望发现兴趣相似的同频用户。今晚活动模块通过时间线形式展示羽毛球双打局、咖啡馆自由写作、剧本围读体验等活动，同频推荐模块通过2列网格展示推荐用户的头像、兴趣标签和匹配度。通过 HarmonyOS 6.0 的声明式 UI 框架，活动模块可以采用左侧时间标签、右侧活动描述的垂直列表布局，用户推荐模块使用深色主题网格卡片。

HarmonyOS 6.0 跨端开发介绍（活动与推荐篇）

HarmonyOS 6.0 的 ArkUI 框架在构建活动时间线时，Column配合Divider分割线可以快速构建类似日程表的展示。每个活动条目采用水平布局——左侧彩色圆角时间标签（固定宽度56像素）、右侧活动标题和地点描述。同频推荐模块采用深紫背景，内部使用2列网格布局展示推荐用户，宽高比1.52，卡片内包含圆形头像、用户名、兴趣标签和匹配度。

开发核心代码（分段解析）

模块一：今晚活动时间线的数据结构与布局

今晚活动模块首先通过_buildTitle显示“今晚活动”主标题和“可加入”状态标签。下方通过_buildEvent方法连续构建三个活动，每个活动之间用Divider分割线隔开：

_buildEvent(theme,'19:30','羽毛球双打局','市民中心球馆 · 缺 2 人',_green),constDivider(height:24,color:_line),_buildEvent(theme,'20:00','咖啡馆自由写作','梧桐路 18 号 · 8 人',_orange),constDivider(height:24,color:_line),_buildEvent(theme,'21:00','剧本围读体验','青年活动室 · 新手友好',_violet),

三个活动覆盖了运动、写作、戏剧三种类型，时间从19:30到21:00，每个活动包含时间、标题、地点描述和人数信息。Divider的height: 24控制分割线占据的总高度。

模块二：单个活动条目的水平布局与时间标签设计

_buildEvent方法构建单个活动条目，采用Row水平布局，从左到右依次是：时间标签容器、活动信息区域。时间标签容器固定宽度56像素，垂直内边距10像素，文字居中对齐，背景色为主题色12%透明度，圆角16，时间文字使用主题色加粗。信息区域使用Expanded包裹的Column，显示活动标题（深棕色加粗）和活动描述（次要文字色加粗700字重），描述文本设置maxLines: 1和overflow: TextOverflow.ellipsis。

模块三：同频推荐模块的深色主题与用户数据结构

同频推荐模块采用深紫背景（_deep），圆角24，标题区使用_buildDarkTitle显示“同频推荐”主标题和“按兴趣相似”排序标签。四个推荐用户定义如下：

finalpeople=[('阿澈','摄影 · 徒步','同频 92%',_violet),('小满','咖啡 · 阅读','同频 88%',_orange),('Rui','夜跑 · 羽球','同频 86%',_green),('Mia','展览 · 桌游','同频 84%',_pink),];

网格布局配置2列、间距10像素、宽高比1.52：

gridDelegate:constSliverGridDelegateWithFixedCrossAxisCount(crossAxisCount:2,mainAxisSpacing:10,crossAxisSpacing:10,childAspectRatio:1.52,)

childAspectRatio: 1.52意味着卡片宽度与高度之比为1.52，卡片呈横向矩形，适合在卡片内水平或垂直排列少量信息。

模块四：用户卡片的内部布局与深色主题适配

每个用户卡片采用白色10%透明度背景，圆角18，内边距13像素。卡片内部垂直布局：顶部CircleAvatar圆形头像（半径20像素，背景色主题色18%透明度，显示用户首字母），Spacer撑开，底部用户名（白色加粗），兴趣标签（白色66%透明度，字号12，限制单行），匹配度（主题色加粗）。Spacer将头像区域和文字区域分离，确保底部文字对齐。

心得

通过实现今晚活动和同频推荐这两个模块，我总结出几点经验。第一，活动时间线中左侧时间标签固定宽度56像素，配合16像素圆角形成了类似“票根”的视觉效果，与右侧活动信息形成清晰的信息分区。第二，三个活动使用绿、橙、紫三种颜色，分别代表运动、休闲、文艺三类活动，用户无需阅读详细描述即可快速识别活动类型。第三，同频推荐模块的深色背景与浅色页面形成对比，视觉上强调这是核心推荐区域。第四，用户卡片中匹配度使用主题色加粗（如“同频 92%”），让用户快速关注到兴趣相似度这一关键信息。第五，卡片中使用Spacer确保头像始终在顶部、文字信息在底部，无论卡片高度如何变化，布局都保持一致。

总结

本文详细解析了“同城兴趣圈”应用中今晚活动和同频推荐两个核心模块的实现思路。今晚活动模块通过三个活动条目展示羽毛球双打局（19:30）、咖啡馆自由写作（20:00）、剧本围读体验（21:00），每个活动采用左侧彩色时间标签、右侧活动标题和描述的垂直布局；同频推荐模块在深紫主题卡片中使用2列网格展示四位推荐用户（阿澈、小满、Rui、Mia），每个卡片包含圆形头像、用户名、兴趣标签和匹配度。两个模块共同展示了 HarmonyOS 6.0 声明式 UI 在社交发现场景中的高效表达能力。后续技术博客将聚焦于城市地图、话题动态和安全提示等剩余模块的实现，敬请期待。