鸿蒙应用开发实战【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 渐变 LogoColumn(){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_LARGE135 度渐变角度从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}fromkit.AbilityKitconstbundleInfobundleManager.getBundleInfoForSelfSync(bundleManager.BundleFlag.GET_BUNDLE_INFO_DEFAULT)constversionNamebundleInfo.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.length0){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{constparamsthis.getUIContext().getRouter().getParams()asRecordstring,Objectif(params){consttypeparams[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是最小字号用于页脚辅助信息。产品标语换号不丢档贯穿整个应用。六、整体代码结构EntryComponentstruct 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-42LoginPage WizardPage登录引导43-47HomePage 五篇架构 统计卡 筛选 批量 FAB48-50卡号模块管理页 添加 详情51-54应用模块添加 详情上下篇55SearchPage 搜索56PasteImportPage 粘贴识别57RebindPage 换绑58StatusListPage 状态筛选59BackupPage 备份恢复60AboutPage 关于页下一阶段将进入类型系统与数据模型专题61-70深入 CardColor 枚举、AppCategory 分类体系、绑定状态机等核心数据设计。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源openHarmony 跨平台社区https://openharmonycrossplatform.csdn.netHarmonyOS 官方文档https://developer.huawei.com/consumer/cn/doc/HarmonyOS ArkUI组件参考https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkui-tsHarmonyOS router APIhttps://developer.huawei.com/consumer/cn/doc/harmonyos-references/router