HarmonyOS6 Flex 垂直布局实战：个人中心分组菜单从零搭建

FlexDirection.Column是 Flex 布局中垂直排列方向的核心配置。和水平方向不同，垂直方向的 Flex 容器让子项从上到下依次堆叠，非常适合构建"列表式"的 UI 结构，比如个人中心页面的功能菜单——各功能分组堆叠排列，每个分组内的菜单项再竖向堆叠。

个人中心页面几乎是每个应用的标配模块。想象一下：顶部是用户信息卡，下面是"我的订单"、“我的收藏”、"优惠券"等功能分组，每个分组里有多个菜单项。这种层次清晰的分组菜单，用 HarmonyOS6 的 ArkUI 通过嵌套 Flex 容器，就能实现得既规整又灵活。

在 HarmonyOS PC 端开发中，个人中心页面通常占据更大的屏幕空间，垂直布局的分组菜单需要更好地利用宽屏空间，同时保持清晰的视觉层次和良好的交互体验。

本文以一个完整的个人中心案例为线索，深入讲解垂直方向 Flex 布局的关键用法，以及如何用数据驱动多层嵌套的 UI 结构。

为什么垂直 Flex 布局在 PC 端更重要？

在移动端，屏幕宽度有限，垂直布局几乎是唯一选择——所有元素从上到下堆叠。但在 PC 端，情况就复杂多了：PC 端屏幕宽度从 1280px 到 3840px 不等，用户可以自由调整窗口大小。

垂直 Flex 布局在 PC 端的优势：

• 自适应高度：内容增多时，容器自动扩展，不需要手动计算高度
• 弹性分配：使用layoutWeight可以按比例分配空间
• 嵌套灵活：垂直 Flex 套水平 Flex，轻松构建复杂布局
• 维护简单：添加或删除元素时，布局自动调整，不需要修改其他代码

在 HarmonyOS PC 端的个人中心页面中，通常采用"固定头部 + 滚动内容区"的模式：顶部用户信息卡固定高度，下方功能菜单区占满剩余空间并支持滚动。这种模式用垂直 Flex 布局实现最为简洁。

数据结构设计

个人中心有多个分组，每个分组里有多个菜单项。用两个interface描述这种嵌套关系：

/** * 菜单项数据结构 * 描述单个菜单项的属性和样式 */exportinterfaceMenuGroupItem{icon:string// 图标（Emoji 或图标名称）label:string// 菜单标签文字desc:string// 描述文字showArrow:boolean// 是否显示右箭头badgeNum:number// 徽章数量，0 表示不显示iconBg:string// 图标背景色}/** * 菜单分组数据结构 * 包含分组标题和菜单项列表 */exportinterfaceMenuGroup{groupTitle:string// 分组标题items:MenuGroupItem[]// 菜单项列表}

MenuGroup包含一个items数组，每个MenuGroupItem又包含图标、标签、描述、是否显示箭头、徽章数量等字段。这种"组 → 项"的嵌套结构直接对应 UI 的层次结构，代码和界面的对应关系非常直观。

为什么用两个 interface 而不是一个？

因为个人中心通常有多个分组（如"我的服务"、“账号安全”、"设置"等），每个分组内的菜单项结构相同，但分组标题不同。用嵌套结构可以清晰地表达这种层次关系，也方便后续扩展——新增分组只需往menuGroups数组里加一条记录。

实际数据如下：

privatemenuGroups: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'},]}]

两个分组，每组三个菜单项，数据完整清晰，后续想增加菜单项只需往数组里添加数据，组件代码完全不用改。

在 HarmonyOS PC 端应用中，这些数据通常会从云函数或本地数据库获取，支持动态配置。管理员可以在后台添加或移除菜单项，前端自动同步，无需发版。

头部用户信息区

顶部是用户信息卡，用Flex Row横向排列头像和用户详情：

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 Row负责头像和用户信息并排，内层Flex Column负责用户名、ID、关注粉丝数竖向堆叠。用户信息区用了.layoutWeight(1)自动占满右侧剩余宽度。

头像用borderRadius(36)做成圆形（宽高都是 72vp，圆角 36 恰好是一半），内部显示用户名的第一个字作为头像占位符。实际项目中，这里会替换为Image组件加载用户真实头像。

在 HarmonyOS PC 端，用户信息区通常需要更大的尺寸和更丰富的信息。建议头像尺寸放大到 80-96vp，字号也适当放大 10%-20%。

核心：Flex Column 垂直菜单组

菜单区域使用FlexDirection.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)=>{this.MenuItem(menuItem,idx===group.items.length-1)})}.backgroundColor('#FFFFFF').borderRadius(14).shadow({radius:6,color:'#10000000',offsetX:0,offsetY:2}).margin({left:16,right:16}).clip(true)}})}.layoutWeight(1)

这里有几个关键设计点值得细说。

1. 分割线的精准控制

if(idx<group.items.length-1){Divider().color('#F0F0F0').strokeWidth(1).margin({left:68})}

分割线只加在非最后一项下方，避免最后一项与卡片底部边距之间出现多余的线。margin({ left: 68 })让分割线从图标右侧开始，不贯穿整行——这是 iOS/Android 原生列表的经典处理方式，视觉上更精致，也更有层次感。

68vp 的由来：图标宽度 40vp + 左右各 14vp 的间距 = 68vp。这个数值需要与实际图标区域的宽度保持一致。

2. 徽章的条件渲染

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)}

ArkTS 在build()里支持if/else条件渲染。badgeNum > 0时显示红色徽章，等于 0 时不渲染任何东西，不会留下空白占位。这避免了"无徽章的菜单项右侧有个空方块"这类尴尬情况。

在 HarmonyOS PC 端，徽章的设计需要更加醒目——PC 端屏幕更大，用户离屏幕更远，较小的徽章可能看不清。建议字号放大到 12-13vp，padding 也适当增大。

点击高亮反馈

@StatepressedLabel:string=''// 点击时切换高亮.onClick(()=>{this.pressedLabel=this.pressedLabel===menuItem.label?'':menuItem.label})// 高亮背景色.backgroundColor(this.pressedLabel===menuItem.label?'#F5F5F5':'#FFFFFF')

pressedLabel记录当前"激活"的菜单项标签。点击同一项时切换（如果已经激活则取消），点击不同项时切换到新的项。背景色从白色变为浅灰#F5F5F5，幅度很小，表示"当前位置"而不是"强烈选中"，适合菜单导航场景。

这种轻量级的高亮反馈在 PC 端应用中非常常见——PC 端用户更多使用鼠标点击，需要即时的视觉反馈来确认操作是否生效。浅灰色高亮既提供了足够的反馈，又不会过于突兀，影响后续操作。

完整案例

下面是完整的个人中心菜单示例代码，可以直接复制到 DevEco Studio 中运行：

/** * 个人中心分组菜单完整示例 * 演示 Flex 垂直布局在 HarmonyOS PC 端的应用 * * 文件路径：entry/src/main/ets/components/ProfileMenu.ets * 运行环境：DevEco Studio 5.0 + HarmonyOS6 SDK */import{MenuGroup,MenuGroupItem}from'../model/MenuModel'@Entry@Componentstruct ProfileMenuDemo{@StatepressedLabel:string=''privatemenuGroups: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({space:0}){// 头部用户信息区this.HeaderSection()// 菜单区域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)=>{this.MenuItem(menuItem,idx===group.items.length-1)})}.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')}@BuilderHeaderSection(){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')}@BuilderMenuItem(menuItem:MenuGroupItem,isLast:boolean){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(!isLast){Divider().color('#F0F0F0').strokeWidth(1).margin({left:68})}}}}

运行步骤：

1. 在 DevEco Studio 中创建一个新的 HarmonyOS6 项目
2. 在entry/src/main/ets/目录下创建components/和model/文件夹
3. 创建MenuModel.ets定义MenuGroup和MenuGroupItem接口
4. 将上述代码保存为ProfileMenu.ets
5. 在Index.ets中引入并引用ProfileMenuDemo组件
6. 运行到模拟器或真机

常见问题与解决方案

1. 分组卡片高度不一致

问题：不同分组的菜单项数量不同，导致卡片高度不一致。

解决方案：这是正常的设计，不需要处理。不同分组有不同数量的菜单项是合理的，卡片高度不一致反而更自然。

如果希望所有卡片高度一致，可以使用alignItems(HorizontalAlign.Stretch)让卡片占满宽度，但高度仍然由内容决定。

2. 分割线位置不准确

问题：分割线没有从图标右侧开始，而是贯穿整行。

解决方案：确保Divider的margin({ left: 68 })与实际图标区域宽度一致。图标宽度 40vp + 左右各 14vp 的 padding = 68vp。

3. 点击区域太小

问题：菜单项的点击区域只有图标和文字，右侧空白区域无法点击。

解决方案：将整个Row包裹在onClick中，或者给Row添加.onClick()事件：

Row({space:12}){// ...}.width('100%').onClick(()=>{this.pressedLabel=menuItem.label})

写在最后

垂直方向的 Flex 布局配合ForEach和嵌套数据结构，能够非常干净地实现"分组列表"这类 UI 模式。数据的嵌套层次（MenuGroup → MenuGroupItem）和 UI 的嵌套层次（外层循环渲染分组、内层循环渲染菜单项）一一对应，代码逻辑清晰、维护方便。

徽章的条件渲染、分割线的位置控制、点击高亮的状态管理——这些细节累积起来就是界面体验的差距。HarmonyOS6 ArkUI 的if条件渲染、@State响应式和Flex弹性布局三者配合，写出来的代码量并不大，但视觉和交互效果相当完整。

在 HarmonyOS PC 端开发中，垂直 Flex 布局是构建个人中心、设置页面、列表页面等场景的首选方案。掌握它的用法，你就掌握了构建复杂界面的一半功力。