前言Row 横向、Column 纵向、RelativeContainer 相对布局是鸿蒙页面搭建最基础的三大容器绝大多数 APP 页面都靠它们组合实现。本文按最简横向布局→对齐控制→综合业务页面→相对定位布局顺序分层讲解贴合学生管理系统场景适合有少量鸿蒙基础的新手实操。一、入门Row 基础横向布局 RowBaseArk.ets学习目标掌握 Row 水平容器、间距、居中属性实现顶部导航栏代码运行结果描述页面顶部出现浅蓝色横向导航栏内部 “首页、课程、消息、我的” 四个文字水平均匀隔开整体在导航栏区域水平、垂直双向居中。完整代码Entry Component struct RowBaseArk { build() { //水平布局 Row({space:30}){ Text(首页).fontSize(25) Text(课程).fontSize(25) Text(消息).fontSize(25) Text(我的).fontSize(25) } .width(100%) .height(15%) .justifyContent(FlexAlign.Center) .alignItems(VerticalAlign.Center) .backgroundColor(0xE8F4FF) } }参数说明space控制同层级组件横向间距justifyContent水平主轴对齐alignItems垂直交叉轴对齐。二、进阶Row 三种对齐方式 RowAlign.ets学习目标掌握 Row 居左、居中、居右三种主轴对齐模式代码运行结果描述页面垂直排列三组按钮行第一组两个按钮靠左摆放第二组两个按钮居中摆放第三组两个按钮靠右摆放三组行之间留有均匀垂直间距。完整代码Entry Component struct RowAlign{ build() { Column({space:25}){ Row({space:25}){ Button(左一).width(88).height(35) Button(左二).width(80).height(35) } .width(100%) .justifyContent(FlexAlign.Start) Row({space:25}){ Button(中一).width(80).height(35) Button(中二).width(80).height(35) } .width(100%) .justifyContent(FlexAlign.Center) Row({space:25}){ Button(右一).width(80).height(35) Button(右二).width(80).height(35) } .width(100%) .justifyContent(FlexAlign.End) } .width(100%) .height(100%) .padding(20) } }对齐参数对照Start靠左Center居中End靠右注意Row 必须设 width:100%对齐效果才会生效三、综合实战Column 嵌套 Row 学生个人中心 RowAndColu.ets学习目标学会 Column 套 Row搭建完整功能菜单页面代码运行结果描述纯白全屏页面从上至下依次展示大标题、欢迎提示文字下方分为三行功能按钮每行两个浅蓝色按钮所有按钮整体页面水平居中各模块上下间距宽松。完整代码Entry Component struct RowAndColu { build() { Column({ space: 50 }) { Text(个人中心页面) .fontSize(28) .fontWeight(FontWeight.Bold) Text(欢迎你这是一个学生管理系统你可以进行一下操作) .fontSize(28) .fontWeight(FontWeight.Bold) .margin({ bottom: 40 }) Row({ space: 30 }) { Button(查看课表).width(120).height(45).backgroundColor(0x77DFFD) Button(查看成绩).width(120).height(45).backgroundColor(0x77DFFD) } Row({ space: 30 }) { Button(奖励学分申请).width(120).height(45).backgroundColor(0x77DFFD) Button(申请缓考).width(120).height(45).backgroundColor(0x77DFFD) } Row({ space: 30 }) { Button(申请补考).width(120).height(45).backgroundColor(0x77DFFD) Button(查看总学分).width(120).height(45).backgroundColor(0x77DFFD) } } .backgroundColor(0xFFFFFFFF) .justifyContent(FlexAlign.Start) .alignItems(HorizontalAlign.Center) .padding(20) .height(100%) .width(100%) } }布局逻辑外层 Column 垂直分行内层 Row 实现单行多组件横向排列是业务页面最通用写法。四、拓展RelativeContainer 相对布局 Relativ2.ets学习目标掌握组件互相锚定定位实现不规则图文排版代码运行结果描述全屏页面左上角先显示大号院校名称文本院校名称下方、左侧对齐位置显示稍小的系部名称文本两段文字均预留内边距。完整代码Entry Component struct Relativ2 { build() { // RelativeContainer(){ Text(河北学院) .id(title) .fontSize(28) .fontWeight(FontWeight.Bolder) .alignRules({ top:{anchor:__contatiner__,align:VerticalAlign.Top}, left:{anchor:__contatiner__,align:HorizontalAlign.Start} }) .padding(10) Text(计算机应用工程系) .id(title2) .fontSize(24) .alignRules({ top:{anchor:title,align:VerticalAlign.Bottom}, left:{anchor:title,align:HorizontalAlign.Start} }) .padding(30) } .width(100%) .height(100%) } }核心知识点id组件唯一标识用作其他组件定位锚点anchor:__container__锚定父容器anchor:title锚定指定 id 组件。新手避坑总结容器未设 width:100%居中、对齐样式失效Column 管垂直排布Row 管水平排布不要混淆RelativeContainer 内组件必须配置 id 与 alignRules否则全部堆叠左上角space 只控制同层组件间距嵌套容器间距用 margin 补充。练习顺序建议先写 RowBaseArk熟悉 Row 基础横向排布练习 RowAlign吃透三种主轴对齐完成 RowAndColu掌握 Column 嵌套 Row 业务布局最后写 Relativ2理解相对锚定定位。