鸿蒙应用开发实战【60】— 关于页AboutPage开发

鸿蒙应用开发实战【60】— 关于页AboutPage开发

本文是「号码助手全栈开发系列」第 60 篇，持续更新中…
开源社区：https://openharmonycrossplatform.csdn.net

前言

AboutPage 是应用的"门面"——它展示品牌标识、版本号，并提供用户协议、隐私政策、开源许可等法律及信息入口。虽然页面结构简单，但涉及的交互细节（InfoRow @Builder 复用、PrivacyPage 参数传递、主题一致性）值得总结。

本篇涵盖：Logo 区域设计与渐变背景、版本号显示、InfoRow @Builder 封装复用、用户协议/隐私政策路由导航、检查更新 Toast、开源许可确认、@Builder参数化设计模式。

一、页面结构

┌──────────────────────┐ │ ‹ 关于 │ ├──────────────────────┤ │ │ │ ┌──────┐ │ │ │ 号 │ │ ← Logo (渐变方形 + 首字) │ └──────┘ │ │ │ │ 号码助手 │ │ 版本 v1.0.0 │ │ │ │ ┌──────────────────┐│ │ │ 检查更新 已是最新 ›││ │ ├──────────────────┤│ │ │ 用户协议 ›││ │ ├──────────────────┤│ │ │ 隐私政策 ›││ │ ├──────────────────┤│ │ │ 开源许可 ›││ │ └──────────────────┘│ │ │ │ Made for 换号不丢档 │ │ · 2026 │ └──────────────────────┘

二、Logo 与品牌区

2.1 渐变 Logo

Column(){Column(){Text('号').fontSize(AppFonts.TITLE).fontWeight(AppFonts.WEIGHT_BOLD).fontColor('#FFFFFF')}.width(Size.s56).height(Size.s56).borderRadius(AppDimensions.RADIUS_LARGE).linearGradient({angle:135,colors:[[AppColors.PRIMARY,0],[AppColors.PRIMARY_2,1]]}).justifyContent(FlexAlign.Center).shadow({radius:20,color:'#454F7CFF',offsetY:10}).margin({bottom:12})}

设计要点：

  • 56×56 尺寸，圆角RADIUS_LARGE
  • 135 度渐变角度，从PRIMARY到PRIMARY_2
  • 外阴影#454F7CFF模拟卡片悬浮效果
  • 居中显示应用名首字"号"，白色粗体

2.2 版本号

Text('号码助手').fontSize(AppFonts.SECTION).fontWeight(AppFonts.WEIGHT_BOLD).fontColor(AppColors.TEXT)Text('版本 v1.0.0').fontSize(AppFonts.META).fontColor(AppColors.TEXT_2).margin({top:4})

版本号可考虑从AppStorage或@ohos.bundle.bundleManager获取，实现动态展示：

// 动态获取版本号（推荐）import{bundleManager}from'@kit.AbilityKit'constbundleInfo=bundleManager.getBundleInfoForSelfSync(bundleManager.BundleFlag.GET_BUNDLE_INFO_DEFAULT)constversionName=bundleInfo.versionName// '1.0.0'

当前版本直接硬编码为 v1.0.0，在正式发布时可改为动态读取。

三、InfoRow @Builder 封装

3.1 @Builder 定义

@BuilderprivateInfoRow(title:string,right:string,onTap:()=>void){Row(){Text(title).fontSize(AppFonts.BODY).fontWeight(AppFonts.WEIGHT_MEDIUM).fontColor(AppColors.TEXT).layoutWeight(1)Row({space:6}){if(right.length>0){Text(right).fontSize(AppFonts.SUB).fontColor(AppColors.TEXT_3)}Text('›').fontSize(Size.font14).fontColor(AppColors.TEXT_3)}}.width('100%').height(AppDimensions.BUTTON_HEIGHT_LARGE).padding({left:AppDimensions.PADDING_XLARGE,right:AppDimensions.PADDING_XLARGE}).onClick(()=>onTap())}

参数化设计：

  • title：左侧主文本
  • right：右侧辅助文本（如"已是最新"），空字符串时不显示
  • onTap：点击回调函数

样式：右侧统一显示›箭头，暗示可点击。

3.2 调用示例

Column(){this.InfoRow('检查更新','已是最新',()=>{promptAction.showToast({message:'当前已是最新版本 v1.0.0'})})Divider().color(AppColors.LINE)this.InfoRow('用户协议','',()=>{this.getUIContext().getRouter().pushUrl({url:'pages/PrivacyPage',params:{type:'terms'}})})Divider().color(AppColors.LINE)this.InfoRow('隐私政策','',()=>{this.getUIContext().getRouter().pushUrl({url:'pages/PrivacyPage',params:{type:'privacy'}})})Divider().color(AppColors.LINE)this.InfoRow('开源许可','',()=>{promptAction.showToast({message:'本应用基于 HarmonyOS SDK 开发，遵循相关开源协议'})})}.width('100%').backgroundColor(AppColors.CARD_B).border({width:1,color:AppColors.LINE,radius:AppDimensions.RADIUS_LARGE})

重要设计模式：@Builder参数化 + 函数回调是 ArkUI 中构建可复用交互行的标准方式。在首页设置页、个人中心等场景中可广泛复用。

四、隐私政策导航

4.1 路由传参

this.getUIContext().getRouter().pushUrl({url:'pages/PrivacyPage',params:{type:'terms'}})

PrivacyPage接收type参数，渲染不同类型的协议内容：

// PrivacyPage 中接收参数aboutToAppear():void{constparams=this.getUIContext().getRouter().getParams()asRecord<string,Object>if(params){consttype=params['type']asstring// 'terms' | 'privacy'// 根据 type 加载对应内容}}

4.2 与首页风格统一

所有页面使用相同的标题栏样式（返回按钮‹+ 居中标题 + 右侧占位符），实现视觉一致性：

Row(){Column(){Text('‹').fontSize(Size.font20).fontColor(AppColors.TEXT)}.width(AppDimensions.ICON_LARGE).height(AppDimensions.ICON_LARGE).borderRadius(AppDimensions.RADIUS_LARGE).backgroundColor(AppColors.CARD_B).border({width:1,color:AppColors.LINE,radius:AppDimensions.RADIUS_LARGE}).justifyContent(FlexAlign.Center).onClick(()=>this.getUIContext().getRouter().back())Text('关于').fontSize(AppFonts.PAGE_TITLE).fontWeight(AppFonts.WEIGHT_BOLD).fontColor(AppColors.TEXT).layoutWeight(1).textAlign(TextAlign.Center)Text('').width(AppDimensions.ICON_LARGE)// 对称占位}

对称布局：左侧返回按钮和右侧占位符宽度相同，确保标题完美居中。

菜单项交互行为路由/Toast
检查更新Toast 提示已是最新Toast「当前已是最新版本 v1.0.0」
用户协议跳转 PrivacyPagerouter.pushUrl({ params: { type: ‘terms’ } })
隐私政策跳转 PrivacyPagerouter.pushUrl({ params: { type: ‘privacy’ } })
开源许可Toast 提示许可信息Toast「本应用基于 HarmonyOS SDK 开发」

五、底部版权信息

Text('Made for 换号不丢档 · 2026').fontSize(AppFonts.MINI).fontColor(AppColors.TEXT_3).textAlign(TextAlign.Center).width('100%')

AppFonts.MINI是最小字号，用于页脚辅助信息。产品标语"换号不丢档"贯穿整个应用。

六、整体代码结构

@Entry@Componentstruct AboutPage{build(){Column(){// 1. 标题栏Row(){/* ‹ 返回 + 标题 + 占位 */}Scroll(){Column(){// 2. Logo + 版本Column(){/* 渐变方形 + '号' + 号码助手 + v1.0.0 */}// 3. 菜单列表 (复用 InfoRow)Column(){this.InfoRow('检查更新','已是最新',checkUpdate)Divider()this.InfoRow('用户协议','',goToTerms)Divider()this.InfoRow('隐私政策','',goToPrivacy)Divider()this.InfoRow('开源许可','',showLicense)}// 4. 页脚Text('Made for 换号不丢档 · 2026')}}}}@BuilderprivateInfoRow(title:string,right:string,onTap:()=>void){...}}

整个组件不到 130 行代码，结构极其清晰。

小结

要点说明
Logo56×56 渐变方块 + 首字 + 阴影
版本号v1.0.0（可改为 bundleManager 动态获取）
@BuilderInfoRow 参数化：title + right + onTap
路由传参router.pushUrl params.type 区分 terms/privacy
标题栏返回‹ + 居中标 + 对称占位
隐私政策跳转 PrivacyPage，协议内容由 type 决定
页面构成标题栏 + 品牌区 + 菜单 + 页脚

至此，“页面开发篇”（41-60）全部完成！共 20 篇文章覆盖了号码助手全部页面的开发：

  • 41-42：LoginPage + WizardPage（登录引导）
  • 43-47：HomePage 五篇（架构 + 统计卡 + 筛选 + 批量 + FAB）
  • 48-50：卡号模块（管理页 + 添加 + 详情）
  • 51-54：应用模块（添加 + 详情，上下篇）
  • 55：SearchPage 搜索
  • 56：PasteImportPage 粘贴识别
  • 57：RebindPage 换绑
  • 58：StatusListPage 状态筛选
  • 59：BackupPage 备份恢复
  • 60：AboutPage 关于页

下一阶段将进入类型系统与数据模型专题（61-70），深入 CardColor 枚举、AppCategory 分类体系、绑定状态机等核心数据设计。

如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！

相关资源：

  • openHarmony 跨平台社区：https://openharmonycrossplatform.csdn.net
  • HarmonyOS 官方文档：https://developer.huawei.com/consumer/cn/doc/
  • HarmonyOS ArkUI组件参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkui-ts
  • HarmonyOS router API：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/router