鸿蒙应用开发实战【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」 |
| 用户协议 | 跳转 PrivacyPage | router.pushUrl({ params: { type: ‘terms’ } }) |
| 隐私政策 | 跳转 PrivacyPage | router.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 行代码，结构极其清晰。
小结
| 要点 | 说明 |
|---|---|
| Logo | 56×56 渐变方块 + 首字 + 阴影 |
| 版本号 | v1.0.0（可改为 bundleManager 动态获取） |
| @Builder | InfoRow 参数化：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
![[C++]内存管理：串顺序存储的内存回收](http://pic.xiahunao.cn/yaotu/[C++]内存管理：串顺序存储的内存回收)
