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

原创于 2026-07-26 19:29:53 发布 · 242 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

一张 skecth-notes 风格的框架型信息图，主题是 HarmonyOS7 账号安全页的信息层

文章目录

前言

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

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

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

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

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

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

层级设计

一张 sketch-notes 风格的对比图，内容对比“写乱的账号安全页”和“正确的信息层级”。左侧

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

实现步骤

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

一张 sketch-notes 风格的流程图，讲解 HarmonyOS7 账号安全页的实现步骤。流程

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

ArkUI/ArkTS 示例

class SecurityItem {
  id: number = 0
  title: string = ''
  desc: string = ''
  risk: boolean = false
  actionText: string = '查看'

  constructor(id: number, title: string, desc: string, risk: boolean, actionText: string) {
    this.id = id
    this.title = title
    this.desc = desc
    this.risk = risk
    this.actionText = actionText
  }
}

@Entry
@Component
struct AccountSecurityPage {
  @State score: number = 82
  @State items: SecurityItem[] = [
    new SecurityItem(3, '登录设备', '发现 1 台不常用设备', true, '立即处理'),
    new SecurityItem(1, '登录密码', '建议 90 天内更新一次', false, '修改'),
    new SecurityItem(2, '绑定手机号', '用于找回账号和安全验证', false, '管理'),
    new SecurityItem(4, '实名认证', '已完成认证', false, '查看')
  ]

  @Builder
  SummaryCard() {
    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)
  }

  @Builder
  SecurityRow(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 把风险标记和说明文案绑定在一起，列表渲染更直接。

风险展示原则

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