文章目录个人中心先按分组想数据结构先看这里状态变量负责让页面动起来布局代码怎么读交互逻辑别藏太深使用时我会怎么改完整代码代码里的几个细节常见改造坑写在最后个人中心看着简单分组、徽章、分割线、点击态一多就容易乱。这里重点看纵向结构怎么稳住。这类页面最值得看的不是某一行样式而是“数据怎么喂给 UI状态怎么让 UI 变化”。只要这条线顺了后面换业务数据不会太痛苦。个人中心先按分组想这个案例对应的是「个人中心分组菜单」。如果只是运行一下效果当然很快但真要把它改进自己的项目里最好先把页面分成“数据层、状态层、布局层、交互层”四块。我比较推荐这种读法先看interface定义再看State最后看build()里的Column、Row、Flex怎么嵌套。这样不容易被一长串样式绕晕。数据结构先看这里这份代码里的核心数据模型是MenuGroup / MenuGroupItem。它决定了页面每一项需要哪些字段比如标题、描述、颜色、状态、价格、数量、角标等。很多 ArkUI 页面写得乱根源不是布局而是数据字段没想清楚。如果你要接真实接口优先改这一层。接口字段名和页面字段名不一致也没关系可以在请求完成后做一次映射别把接口返回结构直接塞进 UI 里。那样短期省事后面改样式会很难受。状态变量负责让页面动起来这个案例里最关键的状态是pressedLabel。它不是摆设页面里的选中、展开、切换、数量变化、输入内容基本都靠它驱动。写 HarmonyOS7 ArkUI 页面时我会刻意把“会变的东西”和“不会变的静态数据”分开。像menuGroups这种列表数据负责提供内容pressedLabel负责描述当前用户操作后的界面状态。这样读代码时很清楚数据从哪里来界面为什么变。布局代码怎么读布局部分不要从第一行样式读到最后一行这样很累。先找最外层容器看页面是纵向结构还是横向结构再看每个区域内部是Row、Column还是Flex。这个案例的布局重点是外层按分组纵向排内层菜单项横向排层级不要混在一起。如果你调页面时发现内容挤压、对齐不准、间距失控优先检查这几个地方固定宽高是不是太多layoutWeight或Blank是否用对列表项里长文本有没有设置省略Flex 换行条件是否满足。交互逻辑别藏太深这个页面的交互主线是菜单项点击后切换按压背景徽章和箭头负责补充状态信息。小案例里直接在.onClick()里改状态没问题读起来也直观。但如果后面业务变复杂比如要请求接口、弹确认框、写缓存就别把逻辑全塞在事件回调里。可以拆成一个私有方法让 UI 代码只表达“点了什么”具体怎么处理交给方法。使用时我会怎么改如果你只是学习布局直接运行下面代码就行。如果你准备放进项目里我建议按这个顺序改先替换数据数组再调整颜色和字体最后再改交互逻辑。还有一个小经验不要一开始就把所有东西拆成组件。先让页面跑通等你发现某个卡片、按钮组、列表项重复出现两三次再抽成Builder或单独组件。这样代码会更贴近真实需求。完整代码/** * Flex 垂直排列个人中心功能菜单 * 知识点Flex direction:Column子项垂直堆叠分组菜单布局 */ interface MenuGroupItem { icon: string label: string desc: string showArrow: boolean badgeNum: number iconBg: string } interface MenuGroup { groupTitle: string items: MenuGroupItem[] } Entry Component struct ProfileMenuPage { State pressedLabel: string private menuGroups: MenuGroup[] [ { groupTitle: 我的服务, items: [ { icon: , label: 我的订单, desc: 查看全部订单, showArrow: true, badgeNum: 3, iconBg: #FFE8E8 }, { icon: ❤️, label: 我的收藏, desc: 50件商品, showArrow: true, badgeNum: 0, iconBg: #FFE8F5 }, { icon: ️, label: 优惠券, desc: 5张可用, showArrow: true, badgeNum: 5, iconBg: #FFF3E0 }, ] }, { groupTitle: 账号安全, items: [ { icon: , label: 账号安全, desc: 密码、绑定手机, showArrow: true, badgeNum: 0, iconBg: #E8F4FF }, { icon: , label: 消息通知, desc: 推送、短信设置, showArrow: true, badgeNum: 2, iconBg: #E8FFE8 }, { icon: ⚙️, label: 通用设置, desc: 语言、主题, showArrow: true, badgeNum: 0, iconBg: #F0F0F0 }, ] } ] build() { Column() { // 用户信息头部 Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { // 头像 Stack() { Text(王) .fontSize(28) .fontColor(#FFFFFF) .fontWeight(FontWeight.Bold) } .width(72) .height(72) .backgroundColor(#007DFF) .borderRadius(36) // 用户信息 Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center }) { Text(王小明) .fontSize(20) .fontWeight(FontWeight.Bold) .fontColor(#FFFFFF) Text(ID: 10086 | 普通会员) .fontSize(13) .fontColor(rgba(255,255,255,0.8)) .margin({ top: 4 }) Row({ space: 8 }) { Text(关注 128) .fontSize(12) .fontColor(rgba(255,255,255,0.9)) Text(粉丝 56) .fontSize(12) .fontColor(rgba(255,255,255,0.9)) } .margin({ top: 6 }) } .layoutWeight(1) .margin({ left: 16 }) } .width(100%) .padding({ left: 20, right: 20, top: 32, bottom: 28 }) .backgroundColor(#007DFF) // 菜单组Flex Column 垂直布局 Flex({ direction: FlexDirection.Column }) { ForEach(this.menuGroups, (group: MenuGroup) { Column() { // 组标题 Text(group.groupTitle) .fontSize(13) .fontColor(#999999) .margin({ left: 16, top: 18, bottom: 8 }) .alignSelf(ItemAlign.Start) // 分组卡片 Column() { ForEach(group.items, (menuItem: MenuGroupItem, idx: number) { Column() { Row({ space: 12 }) { // 图标 Text(menuItem.icon) .fontSize(20) .width(40) .height(40) .textAlign(TextAlign.Center) .backgroundColor(menuItem.iconBg) .borderRadius(10) // 文字 Column({ space: 3 }) { Text(menuItem.label) .fontSize(16) .fontColor(#1A1A1A) Text(menuItem.desc) .fontSize(12) .fontColor(#999999) } .alignItems(HorizontalAlign.Start) .layoutWeight(1) // 徽章 箭头 Row({ space: 6 }) { if (menuItem.badgeNum 0) { Text(menuItem.badgeNum.toString()) .fontSize(11) .fontColor(#FFFFFF) .backgroundColor(#FF4D4D) .padding({ left: 6, right: 6, top: 2, bottom: 2 }) .borderRadius(10) } if (menuItem.showArrow) { Text(›) .fontSize(20) .fontColor(#CCCCCC) } } } .width(100%) .padding({ left: 16, right: 16, top: 14, bottom: 14 }) .backgroundColor(this.pressedLabel menuItem.label ? #F5F5F5 : #FFFFFF) .onClick(() { this.pressedLabel this.pressedLabel menuItem.label ? : menuItem.label }) // 分割线非最后一项 if (idx group.items.length - 1) { Divider() .color(#F0F0F0) .strokeWidth(1) .margin({ left: 68 }) } } }) } .backgroundColor(#FFFFFF) .borderRadius(14) .shadow({ radius: 6, color: #10000000, offsetX: 0, offsetY: 2 }) .margin({ left: 16, right: 16 }) .clip(true) } }) } .layoutWeight(1) } .width(100%) .height(100%) .backgroundColor(#F5F6FA) } }代码里的几个细节看完完整代码后可以回头重点检查三处。第一处是数据声明。MenuGroup / MenuGroupItem这类结构把页面需要的字段提前摆出来后面ForEach渲染时就不会到处临时拼数据。第二处是状态更新。pressedLabel变化后相关 UI 会自动刷新这也是声明式 UI 写起来舒服的地方。你不用手动找某个控件改样式只要把状态描述清楚。第三处是容器嵌套。这个案例不是为了炫技才套Row、Column、Flex而是每一层都在解决具体排版问题。读代码时多问一句这一层容器负责什么如果答不上来它可能就该被简化。常见改造坑最容易踩的坑是把示例里的颜色、文案、尺寸都保留然后只替换数据。这样页面能跑但很难和自己的项目风格统一。另一个坑是过度依赖固定宽高。固定宽高在演示里很方便在真实设备上就未必稳。文本变长、屏幕变窄、系统字体变大都会把问题暴露出来。我一般会保留固定尺寸给图标、头像、按钮这类稳定元素文本区域、列表区域、内容卡片尽量交给弹性布局处理。写在最后这个案例的价值不只是“有一份完整代码”。更重要的是你能从里面看到 ArkUI 页面的一条基本思路数据先定义清楚状态单独管理布局按区域拆交互只改必要状态。按这个思路去写页面复杂一点也不会马上失控。