基于 Harmony 6.0 应用的读书会社交应用首页实现前言读书是一件天然孤独的事但读完之后人和人最想做的事就是找人聊聊这本书。读书会作为一种古老的社交形态在线上重生——线上分享读后感、组织共读小组、邀请作者直播、举办读书马拉松让孤独的阅读变成陪伴的成长。这种应用的首页要回答四件事——“今天有什么共读活动 / 我在读什么 / 别人在读什么 / 怎么加入一个小组”。Harmony 6.0 时代读书会应用迎来了几个独特的能力红利——AudioKit 让线上读书会的语音直播低延迟、分布式数据让共读进度多端同步、HMS Push 让小组同伴更新了笔记精准触达、HMS Wallet 让书籍电子凭证电子化。本文用 Flutter 在 Harmony 6.0 上实现一个读书会首页作为本系列第九组的收官。背景读书会类应用的视觉关键词是沉静、有书卷气、有社区感——沉静对应色彩稳重不刺眼,书卷气对应米黄背景或暖灰,社区感对应小组成员头像组必须有。深棕 #92400E 配米黄 #FEF3C7 是这类应用的典型主色——既有书卷气又有温暖。本项目首页 5 个模块渐变 Header已读 X 本 阅读时长、当前在读书籍卡片封面 进度 同伴、共读小组横滑、热门书评列表、即将开始的读书会预告。从产品角度读书会的最大复购点是小组同伴的进度——用户每次打开应用都期待看到小组里的某个人读到第几章了。这种邻里式的进度对比让读书不再孤独。Flutter × Harmony 6.0 跨端开发介绍Harmony 6.0 在读书会这种重内容 强社区应用上的能力栈非常合适——AudioKit 提供低延迟语音直播、分布式数据让多端共读进度同步、PushKit 提供高优先级推送、HMS Wallet 让电子书凭证落袋、AI 助手能力提供书评摘要和推荐。Flutter 嵌入 Harmony 6.0 的方案非常合适——主页用 Flutter 自绘提供丰富 UI音频直播能力通过 ArkTS 端 AudioKit 接入。Skia 引擎对深棕米黄#92400E / #FEF3C7 / #FBBF24的混合渲染非常温暖配合圆角卡片和大留白整页氛围既沉静又有温度。本项目继续坚持纯 UI、零三方依赖、所有页面 StatelessWidget 的极简哲学。开发核心代码代码一阅读统计 HeaderHeader 必须把已读多少本 阅读时长做成视觉中心——这是用户的成就感来源。我用一个深棕渐变 Container顶部一行我的书房 设置图标中部今年已读 18 本 · 阅读 268 小时统计数据。Widget_header(){returnContainer(padding:constEdgeInsets.all(20),decoration:BoxDecoration(gradient:constLinearGradient(colors:[_primary,Color(0xFF78350F)],begin:Alignment.topLeft,end:Alignment.bottomRight),borderRadius:BorderRadius.circular(22),),child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[constRow(children:[Icon(Icons.menu_book,color:Colors.white,size:22),SizedBox(width:8),Text(我的书房,style:TextStyle(color:Colors.white,fontSize:18,fontWeight:FontWeight.w800)),Spacer(),Icon(Icons.bookmark,color:Colors.white,size:22),]),constSizedBox(height:16),constRow(children:[Expanded(child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[Text(今年已读,style:TextStyle(color:Colors.white70,fontSize:12)),SizedBox(height:4),Row(crossAxisAlignment:CrossAxisAlignment.end,children:[Text(18,style:TextStyle(color:Colors.white,fontSize:32,fontWeight:FontWeight.w900)),SizedBox(width:4),Padding(padding:EdgeInsets.only(bottom:6),child:Text(本,style:TextStyle(color:Colors.white,fontSize:14,fontWeight:FontWeight.w700))),]),],)),Expanded(child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[Text(累计阅读,style:TextStyle(color:Colors.white70,fontSize:12)),SizedBox(height:4),Row(crossAxisAlignment:CrossAxisAlignment.end,children:[Text(268,style:TextStyle(color:Colors.white,fontSize:32,fontWeight:FontWeight.w900)),SizedBox(width:4),Padding(padding:EdgeInsets.only(bottom:6),child:Text(小时,style:TextStyle(color:Colors.white,fontSize:14,fontWeight:FontWeight.w700))),]),],)),]),],),);}阅读时长在生产业务里通过 ArkTS 端记录用户每天的阅读会话时长再通过分布式数据对象同步到云端。这种长期统计数据非常适合做成桌面服务卡片让用户每周打开手机就能看到本周已读 X 小时。从「阅读统计 Header」的数据驱动与成就感设计角度再补一段。读书类应用的 Header 必须传递「我已经读了这么多」的成就感。这段 Header 用深绿到墨绿的渐变背景配合「本月已读 X 小时 / X 本」的双数据 阅读进度条 「继续阅读」按钮的多段式排版让用户在打开应用的第一秒就看到自己的阅读积累。深绿色传递「书卷气、宁静、专注」的氛围是读书类应用的最优主色。「本周阅读 5 天」的连续打卡数据会强化用户「不能断的」的心理压力是阅读类应用的经典留存触发器。如果未来要扩展支持「阅读目标设定」用户自己设定每月读完几本可以在 Header 加一个圆形进度环显示当前完成度骨架不变。代码二当前在读书籍当前在读卡片是首页的视觉中心——必须把封面 书名 作者 进度 同伴全部塞进。我用一个 Row 布局左侧 100x140 的渐变封面占位右侧书名 作者 进度条 “X 位同伴在读”。Widget_currentBook(){returnContainer(padding:constEdgeInsets.all(14),decoration:BoxDecoration(color:_card,borderRadius:BorderRadius.circular(16)),child:Row(children:[Container(width:100,height:140,decoration:BoxDecoration(gradient:LinearGradient(colors:[_primary.withValues(alpha:0.8),_amber.withValues(alpha:0.8),],begin:Alignment.topLeft,end:Alignment.bottomRight),borderRadius:BorderRadius.circular(8),boxShadow:[BoxShadow(color:Colors.black.withValues(alpha:0.16),blurRadius:10,offset:constOffset(2,4))]),child:constCenter(child:Icon(Icons.menu_book,color:Colors.white,size:40)),),constSizedBox(width:14),Expanded(child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[constText(百年孤独,style:TextStyle(color:_ink,fontSize:16,fontWeight:FontWeight.w800)),constSizedBox(height:4),constText(加西亚·马尔克斯,style:TextStyle(color:_sub,fontSize:12)),constSizedBox(height:14),ClipRRect(borderRadius:BorderRadius.circular(3),child:constLinearProgressIndicator(value:0.42,minHeight:6,backgroundColor:Color(0xFFFEF3C7),valueColor:AlwaysStoppedAnimation(_primary),),),constSizedBox(height:6),constText(已读 42% · 第 6 章,style:TextStyle(color:_primary,fontSize:12,fontWeight:FontWeight.w700)),constSpacer(),Row(children:[...List.generate(3,(i){returnPadding(padding:EdgeInsets.only(left:i0?0:-6),child:CircleAvatar(radius:10,backgroundColor:_amber.withValues(alpha:0.4i*0.15)),);}),constSizedBox(width:8),constText( 12 位同伴在读,style:TextStyle(color:_sub,fontSize:11)),]),],)),]),);}X 位同伴在读通过分布式数据查询我加入的所有读书小组中正在读这本书的人数得到。这种群体陪伴感是读书类应用区别于普通电子书 App 的关键差异。从「当前在读书籍」的卡片信息层级与阅读进度可视化角度再补一段。当前在读书籍是阅读类 App 的核心信息位——用户每次打开 App 都希望「立刻能继续上次的进度」。这段大卡片用「书籍封面占位 书名 作者 阅读进度条 「X 位同伴在读」chip 继续阅读按钮」六段信息塞在一张大卡片里。封面用色块 书本图标占位生产业务里替换为真实封面。进度条用 LinearProgressIndicator 显示已读百分比配合「已读 35%」文字明确进度。如果未来要支持「多本书并行阅读」可以把当前在读改成横滑列表展示骨架不变。鸿蒙 6.0 的 Skia 对进度条这种纯几何图形渲染开销几乎为零。代码三共读小组横滑每个共读小组卡片需要包含小组名、当前书籍封面 emoji、成员数、活跃度。我做成 140 高度的横滑列表每张卡片宽 160。SizedBox(height:140,child:ListView.separated(scrollDirection:Axis.horizontal,itemCount:groups.length,separatorBuilder:(_,__)constSizedBox(width:10),itemBuilder:(_,i){finalggroups[i];returnContainer(width:160,padding:constEdgeInsets.all(12),decoration:BoxDecoration(color:_card,borderRadius:BorderRadius.circular(14)),child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[Text(g[emoji]asString,style:constTextStyle(fontSize:32)),constSizedBox(height:8),Text(g[name]asString,style:constTextStyle(color:_ink,fontSize:13,fontWeight:FontWeight.w700)),constSizedBox(height:4),Text(g[book]asString,style:constTextStyle(color:_sub,fontSize:11),maxLines:1,overflow:TextOverflow.ellipsis),constSpacer(),Row(children:[constIcon(Icons.people_outline,color:_sub,size:12),constSizedBox(width:4),Text(${g[members]} 人,style:constTextStyle(color:_sub,fontSize:11)),constSpacer(),Container(width:6,height:6,decoration:constBoxDecoration(color:_green,shape:BoxShape.circle)),]),],),);},),)绿色小圆点表示这个小组现在有人在线讨论——通过分布式数据订阅小组在线状态实现。从「共读小组横滑」的社群陪伴感与多人协作设计角度再补一段。读书类应用的「共读小组」是连接孤独阅读者的核心功能。这段横滑卡片用「小组封面 小组名 在读书名 成员头像组 在线状态 加入按钮」六段信息塞在每张卡片里让用户的视觉动线从「主题认知→ 当前在读共鸣→ 成员社交证明→ 加入行动」一气呵成。绿色小圆点表示「现在有人在线讨论」是激励用户立即加入的关键视觉触发器。如果未来要扩展支持「小组直播讨论」小组主理人定期开麦讨论可以在卡片上叠加一个 LIVE 红点 chip鸿蒙 6.0 的 AudioKit 完全支持这种小组语音场景。心得读书会类 App 的视觉灵魂是沉静 陪伴——深棕米黄给沉静同伴头像组给陪伴。开发时最容易犯的错是把书籍封面做得过于绚丽反而稀释了读书的氛围。我的策略是用渐变色块作为封面占位让色彩克制有书卷感。从能力扩展角度读书会最值得在鸿蒙端打造的是AudioKit 直播 分布式共读进度 AI 摘要三件套——AudioKit 让线上读书会语音直播低延迟、分布式数据让共读进度多端同步、AI 助手能力让长书评自动生成摘要。把这些能力组合起来App 就从一个电子书阅读器升级成陪伴成长的读书伙伴。总结本篇实现了 Harmony 6.0 端的读书会首页5 个模块、纯 UI、零依赖、约 360 行代码。第九组的语音日记 / 家庭相册 / 读书会三个迥异的内容沉淀场景共用同一份骨架再次验证骨架不变、页面替换的方法论可行性。从扩展角度建议生产业务里把语音直播接入 AudioKit 低延迟通道把共读进度接入分布式数据对象把电子书凭证接入 WalletKit把书评摘要接入 AI 助手能力把今日已读时长做成 FormExtensionAbility 桌面卡片。这些扩展都可以在不动当前 UI 骨架的前提下完成。下一篇进入第十组把AR 实景社交 / 运动轨迹 / 卡路里计算三类首页继续讲透。
基于 Harmony 6.0 应用的读书会社交应用首页实现
发布时间：2026/6/5 1:12:18
基于 Harmony 6.0 应用的读书会社交应用首页实现前言读书是一件天然孤独的事但读完之后人和人最想做的事就是找人聊聊这本书。读书会作为一种古老的社交形态在线上重生——线上分享读后感、组织共读小组、邀请作者直播、举办读书马拉松让孤独的阅读变成陪伴的成长。这种应用的首页要回答四件事——“今天有什么共读活动 / 我在读什么 / 别人在读什么 / 怎么加入一个小组”。Harmony 6.0 时代读书会应用迎来了几个独特的能力红利——AudioKit 让线上读书会的语音直播低延迟、分布式数据让共读进度多端同步、HMS Push 让小组同伴更新了笔记精准触达、HMS Wallet 让书籍电子凭证电子化。本文用 Flutter 在 Harmony 6.0 上实现一个读书会首页作为本系列第九组的收官。背景读书会类应用的视觉关键词是沉静、有书卷气、有社区感——沉静对应色彩稳重不刺眼,书卷气对应米黄背景或暖灰,社区感对应小组成员头像组必须有。深棕 #92400E 配米黄 #FEF3C7 是这类应用的典型主色——既有书卷气又有温暖。本项目首页 5 个模块渐变 Header已读 X 本 阅读时长、当前在读书籍卡片封面 进度 同伴、共读小组横滑、热门书评列表、即将开始的读书会预告。从产品角度读书会的最大复购点是小组同伴的进度——用户每次打开应用都期待看到小组里的某个人读到第几章了。这种邻里式的进度对比让读书不再孤独。Flutter × Harmony 6.0 跨端开发介绍Harmony 6.0 在读书会这种重内容 强社区应用上的能力栈非常合适——AudioKit 提供低延迟语音直播、分布式数据让多端共读进度同步、PushKit 提供高优先级推送、HMS Wallet 让电子书凭证落袋、AI 助手能力提供书评摘要和推荐。Flutter 嵌入 Harmony 6.0 的方案非常合适——主页用 Flutter 自绘提供丰富 UI音频直播能力通过 ArkTS 端 AudioKit 接入。Skia 引擎对深棕米黄#92400E / #FEF3C7 / #FBBF24的混合渲染非常温暖配合圆角卡片和大留白整页氛围既沉静又有温度。本项目继续坚持纯 UI、零三方依赖、所有页面 StatelessWidget 的极简哲学。开发核心代码代码一阅读统计 HeaderHeader 必须把已读多少本 阅读时长做成视觉中心——这是用户的成就感来源。我用一个深棕渐变 Container顶部一行我的书房 设置图标中部今年已读 18 本 · 阅读 268 小时统计数据。Widget_header(){returnContainer(padding:constEdgeInsets.all(20),decoration:BoxDecoration(gradient:constLinearGradient(colors:[_primary,Color(0xFF78350F)],begin:Alignment.topLeft,end:Alignment.bottomRight),borderRadius:BorderRadius.circular(22),),child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[constRow(children:[Icon(Icons.menu_book,color:Colors.white,size:22),SizedBox(width:8),Text(我的书房,style:TextStyle(color:Colors.white,fontSize:18,fontWeight:FontWeight.w800)),Spacer(),Icon(Icons.bookmark,color:Colors.white,size:22),]),constSizedBox(height:16),constRow(children:[Expanded(child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[Text(今年已读,style:TextStyle(color:Colors.white70,fontSize:12)),SizedBox(height:4),Row(crossAxisAlignment:CrossAxisAlignment.end,children:[Text(18,style:TextStyle(color:Colors.white,fontSize:32,fontWeight:FontWeight.w900)),SizedBox(width:4),Padding(padding:EdgeInsets.only(bottom:6),child:Text(本,style:TextStyle(color:Colors.white,fontSize:14,fontWeight:FontWeight.w700))),]),],)),Expanded(child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[Text(累计阅读,style:TextStyle(color:Colors.white70,fontSize:12)),SizedBox(height:4),Row(crossAxisAlignment:CrossAxisAlignment.end,children:[Text(268,style:TextStyle(color:Colors.white,fontSize:32,fontWeight:FontWeight.w900)),SizedBox(width:4),Padding(padding:EdgeInsets.only(bottom:6),child:Text(小时,style:TextStyle(color:Colors.white,fontSize:14,fontWeight:FontWeight.w700))),]),],)),]),],),);}阅读时长在生产业务里通过 ArkTS 端记录用户每天的阅读会话时长再通过分布式数据对象同步到云端。这种长期统计数据非常适合做成桌面服务卡片让用户每周打开手机就能看到本周已读 X 小时。从「阅读统计 Header」的数据驱动与成就感设计角度再补一段。读书类应用的 Header 必须传递「我已经读了这么多」的成就感。这段 Header 用深绿到墨绿的渐变背景配合「本月已读 X 小时 / X 本」的双数据 阅读进度条 「继续阅读」按钮的多段式排版让用户在打开应用的第一秒就看到自己的阅读积累。深绿色传递「书卷气、宁静、专注」的氛围是读书类应用的最优主色。「本周阅读 5 天」的连续打卡数据会强化用户「不能断的」的心理压力是阅读类应用的经典留存触发器。如果未来要扩展支持「阅读目标设定」用户自己设定每月读完几本可以在 Header 加一个圆形进度环显示当前完成度骨架不变。代码二当前在读书籍当前在读卡片是首页的视觉中心——必须把封面 书名 作者 进度 同伴全部塞进。我用一个 Row 布局左侧 100x140 的渐变封面占位右侧书名 作者 进度条 “X 位同伴在读”。Widget_currentBook(){returnContainer(padding:constEdgeInsets.all(14),decoration:BoxDecoration(color:_card,borderRadius:BorderRadius.circular(16)),child:Row(children:[Container(width:100,height:140,decoration:BoxDecoration(gradient:LinearGradient(colors:[_primary.withValues(alpha:0.8),_amber.withValues(alpha:0.8),],begin:Alignment.topLeft,end:Alignment.bottomRight),borderRadius:BorderRadius.circular(8),boxShadow:[BoxShadow(color:Colors.black.withValues(alpha:0.16),blurRadius:10,offset:constOffset(2,4))]),child:constCenter(child:Icon(Icons.menu_book,color:Colors.white,size:40)),),constSizedBox(width:14),Expanded(child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[constText(百年孤独,style:TextStyle(color:_ink,fontSize:16,fontWeight:FontWeight.w800)),constSizedBox(height:4),constText(加西亚·马尔克斯,style:TextStyle(color:_sub,fontSize:12)),constSizedBox(height:14),ClipRRect(borderRadius:BorderRadius.circular(3),child:constLinearProgressIndicator(value:0.42,minHeight:6,backgroundColor:Color(0xFFFEF3C7),valueColor:AlwaysStoppedAnimation(_primary),),),constSizedBox(height:6),constText(已读 42% · 第 6 章,style:TextStyle(color:_primary,fontSize:12,fontWeight:FontWeight.w700)),constSpacer(),Row(children:[...List.generate(3,(i){returnPadding(padding:EdgeInsets.only(left:i0?0:-6),child:CircleAvatar(radius:10,backgroundColor:_amber.withValues(alpha:0.4i*0.15)),);}),constSizedBox(width:8),constText( 12 位同伴在读,style:TextStyle(color:_sub,fontSize:11)),]),],)),]),);}X 位同伴在读通过分布式数据查询我加入的所有读书小组中正在读这本书的人数得到。这种群体陪伴感是读书类应用区别于普通电子书 App 的关键差异。从「当前在读书籍」的卡片信息层级与阅读进度可视化角度再补一段。当前在读书籍是阅读类 App 的核心信息位——用户每次打开 App 都希望「立刻能继续上次的进度」。这段大卡片用「书籍封面占位 书名 作者 阅读进度条 「X 位同伴在读」chip 继续阅读按钮」六段信息塞在一张大卡片里。封面用色块 书本图标占位生产业务里替换为真实封面。进度条用 LinearProgressIndicator 显示已读百分比配合「已读 35%」文字明确进度。如果未来要支持「多本书并行阅读」可以把当前在读改成横滑列表展示骨架不变。鸿蒙 6.0 的 Skia 对进度条这种纯几何图形渲染开销几乎为零。代码三共读小组横滑每个共读小组卡片需要包含小组名、当前书籍封面 emoji、成员数、活跃度。我做成 140 高度的横滑列表每张卡片宽 160。SizedBox(height:140,child:ListView.separated(scrollDirection:Axis.horizontal,itemCount:groups.length,separatorBuilder:(_,__)constSizedBox(width:10),itemBuilder:(_,i){finalggroups[i];returnContainer(width:160,padding:constEdgeInsets.all(12),decoration:BoxDecoration(color:_card,borderRadius:BorderRadius.circular(14)),child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[Text(g[emoji]asString,style:constTextStyle(fontSize:32)),constSizedBox(height:8),Text(g[name]asString,style:constTextStyle(color:_ink,fontSize:13,fontWeight:FontWeight.w700)),constSizedBox(height:4),Text(g[book]asString,style:constTextStyle(color:_sub,fontSize:11),maxLines:1,overflow:TextOverflow.ellipsis),constSpacer(),Row(children:[constIcon(Icons.people_outline,color:_sub,size:12),constSizedBox(width:4),Text(${g[members]} 人,style:constTextStyle(color:_sub,fontSize:11)),constSpacer(),Container(width:6,height:6,decoration:constBoxDecoration(color:_green,shape:BoxShape.circle)),]),],),);},),)绿色小圆点表示这个小组现在有人在线讨论——通过分布式数据订阅小组在线状态实现。从「共读小组横滑」的社群陪伴感与多人协作设计角度再补一段。读书类应用的「共读小组」是连接孤独阅读者的核心功能。这段横滑卡片用「小组封面 小组名 在读书名 成员头像组 在线状态 加入按钮」六段信息塞在每张卡片里让用户的视觉动线从「主题认知→ 当前在读共鸣→ 成员社交证明→ 加入行动」一气呵成。绿色小圆点表示「现在有人在线讨论」是激励用户立即加入的关键视觉触发器。如果未来要扩展支持「小组直播讨论」小组主理人定期开麦讨论可以在卡片上叠加一个 LIVE 红点 chip鸿蒙 6.0 的 AudioKit 完全支持这种小组语音场景。心得读书会类 App 的视觉灵魂是沉静 陪伴——深棕米黄给沉静同伴头像组给陪伴。开发时最容易犯的错是把书籍封面做得过于绚丽反而稀释了读书的氛围。我的策略是用渐变色块作为封面占位让色彩克制有书卷感。从能力扩展角度读书会最值得在鸿蒙端打造的是AudioKit 直播 分布式共读进度 AI 摘要三件套——AudioKit 让线上读书会语音直播低延迟、分布式数据让共读进度多端同步、AI 助手能力让长书评自动生成摘要。把这些能力组合起来App 就从一个电子书阅读器升级成陪伴成长的读书伙伴。总结本篇实现了 Harmony 6.0 端的读书会首页5 个模块、纯 UI、零依赖、约 360 行代码。第九组的语音日记 / 家庭相册 / 读书会三个迥异的内容沉淀场景共用同一份骨架再次验证骨架不变、页面替换的方法论可行性。从扩展角度建议生产业务里把语音直播接入 AudioKit 低延迟通道把共读进度接入分布式数据对象把电子书凭证接入 WalletKit把书评摘要接入 AI 助手能力把今日已读时长做成 FormExtensionAbility 桌面卡片。这些扩展都可以在不动当前 UI 骨架的前提下完成。下一篇进入第十组把AR 实景社交 / 运动轨迹 / 卡路里计算三类首页继续讲透。
