当前位置：首页 > news >正文

HarmonyOS7 账号安全页的信息层级：ArkUI/ArkTS 实战拆解

news 2026/7/27 23:53:30

文章目录

- - 前言
  - 为什么这个问题经常被写乱
  - 层级设计
  - 实现步骤
  - ArkUI/ArkTS 示例
  - 关键代码说明
  - 风险展示原则
  - 安全页先给结论再给入口
  - 小结

前言

账号安全页不能只是一排“修改密码、绑定手机、实名认证”。用户打开这个页面，首先想知道账号是否安全，其次才是去哪处理问题。我会先展示安全概览，再列出可操作项，把风险项放在更明显的位置。

安全页面的第一屏要回答一个问题：我现在安全吗？

本文用“账号安全中心”做例子。页面需要同时展示安全评分、风险设备、密码、手机号、实名状态，但不能让所有入口抢同样的视觉权重。

为什么这个问题经常被写乱

账号安全页的信息层级这类内容很容易被写成“代码能跑就算讲完了”，但对初学者来说，这恰恰是最不够的地方。真正让人卡住的，往往不是某个组件名记不住，而是不知道这段代码为什么要这样拆、状态为什么要这样放、以后需求变化时应该从哪里改。

所以这篇文章不只想给你一个能跑的例子，更想把背后的判断过程讲清楚。你只要把这个判断过程吃透，后面自己改页面、补需求、查问题时，心里会稳很多。

层级设计

层级	内容	作用
概览	安全分、风险数量	建立判断
高风险	异地登录、未绑定手机	立即处理
常规设置	密码、设备、实名	日常维护

实现步骤

第一屏先给整体安全结论，不要直接进入设置列表。

风险项加标签和醒目颜色，但只给真正需要处理的项。
常规项保留说明文案，避免用户不知道点击后会做什么。
风险项排序靠前，已完成项可以弱化展示。
每个操作项用稳定 id 渲染，便于后续接页面跳转。

ArkUI/ArkTS 示例

classSecurityItem{id:number=0title:string=''desc:string=''risk:boolean=falseactionText:string='查看'constructor(id:number,title:string,desc:string,risk:boolean,actionText:string){this.id=idthis.title=titlethis.desc=descthis.risk=riskthis.actionText=actionText}}@Entry@Componentstruct AccountSecurityPage{@Statescore:number=82@Stateitems:SecurityItem[]=[newSecurityItem(3,'登录设备','发现 1 台不常用设备',true,'立即处理'),newSecurityItem(1,'登录密码','建议 90 天内更新一次',false,'修改'),newSecurityItem(2,'绑定手机号','用于找回账号和安全验证',false,'管理'),newSecurityItem(4,'实名认证','已完成认证',false,'查看')]@BuilderSummaryCard(){Column({space:8}){Text('账号安全评分').fontSize(14).fontColor('#666666')Text(`${this.score}`).fontSize(42).fontWeight(FontWeight.Bold).fontColor(this.score>=80?'#2F9E44':'#D9480F')Text(this.score>=80?'整体安全，建议检查风险设备':'存在风险，请尽快处理').fontSize(13).fontColor('#666666')}.alignItems(HorizontalAlign.Start).padding(18).backgroundColor('#FFFFFF').borderRadius(12)}@BuilderSecurityRow(item:SecurityItem){Row(){Column({space:4}){Row({space:6}){Text(item.title).fontSize(16).fontWeight(FontWeight.Medium)if(item.risk){Text('风险').fontSize(11).fontColor('#FFFFFF').padding({left:6,right:6,top:2,bottom:2}).backgroundColor('#C92A2A').borderRadius(6)}}Text(item.desc).fontSize(12).fontColor('#777777')}.alignItems(HorizontalAlign.Start)Blank()Text(item.actionText).fontSize(14).fontColor(item.risk?'#C92A2A':'#4B6BFB')}.padding(14).backgroundColor('#FFFFFF')}build(){Column({space:14}){Text('账号安全').fontSize(24).fontWeight(FontWeight.Bold)this.SummaryCard()Text('安全项目').fontSize(16).fontWeight(FontWeight.Medium)Column(){ForEach(this.items,(item:SecurityItem)=>{this.SecurityRow(item)Divider().color('#EEEEEE')},(item:SecurityItem)=>item.id.toString())}.borderRadius(12).clip(true)}.padding(16).backgroundColor('#F5F6FA').height('100%')}}

关键代码说明

SummaryCard()放在最前面，让用户先知道整体安全状态，再去看具体项目。

风险标签只给真正需要处理的项使用，不要所有行都用醒目颜色。

SecurityItem把风险标记和说明文案绑定在一起，列表渲染更直接。

风险展示原则

内容	展示强度	说明
异地登录、陌生设备	强提醒	需要立刻处理
密码长期未改	中提醒	建议处理但不打断
已绑定手机号	普通信息	不抢风险项注意力
实名已完成	弱展示	作为安全资产说明