企业官网建设流程全解析

前言

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，理解相对锚定定位。