前言

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

参数说明

1. space：控制同层级组件横向间距；
2. 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%')
  }
  }

核心知识点

1. id：组件唯一标识，用作其他组件定位锚点；
2. anchor:'__container__'：锚定父容器；anchor:'title'：锚定指定 id 组件。

新手避坑总结

1. 容器未设 width:"100%"，居中、对齐样式失效；
2. Column 管垂直排布，Row 管水平排布，不要混淆；
3. RelativeContainer 内组件必须配置 id 与 alignRules，否则全部堆叠左上角；
4. space 只控制同层组件间距，嵌套容器间距用 margin 补充。

练习顺序建议

1. 先写 RowBaseArk，熟悉 Row 基础横向排布；
2. 练习 RowAlign，吃透三种主轴对齐；
3. 完成 RowAndColu，掌握 Column 嵌套 Row 业务布局；
4. 最后写 Relativ2，理解相对锚定定位。