企业官网建设流程全解析

引言

HarmonyOS 应用的页面由多个组件构成，需要通过布局管理让组件有序排列。布局是指应用特定的组件或属性来管理页面中 UI 组件的大小和位置关系，组件依照布局要求依次排列，最终构成完整的应用界面。布局属于特殊的容器组件，可以包含其他组件，也支持嵌套其他布局组件实现复杂页面。本节课将讲解 HarmonyOS 开发中 UI 布局的基础概念、三种核心基础布局，重点讲解线性布局Column与Row容器的参数、属性与对齐规则。

核心内容

布局基础概念

常用基础布局类型

HarmonyOS ArkUI 提供了多种基础布局，满足不同场景需求：

其他布局类型

除三种基础布局外，ArkUI 还提供List列表、栅格GridRow/GridCol、网格Grid、轮播Swiper等复杂布局，可根据场景选用。

布局容器支持嵌套，通过多层嵌套可以实现任意复杂的页面布局。实际开发中需要根据场景选择最简洁的布局实现，相对布局可以大幅简化分散定位元素的开发复杂度。

布局选型对比案例：当需要实现一个容器内五个元素分别位于左上、右上、右下、左下、中间位置时：

• 使用线性布局需要嵌套多层Column和Row容器才能实现，结构复杂。

• 使用相对布局只需要一个RelativeContainer容器，每个子组件基于父容器设置位置即可实现，代码更加简洁。

线性布局核心概念

线性布局是所有布局的基础，通过Row和Column构建。

主轴与交叉轴定义

线性容器默认包含两根相互垂直的轴：

容器接口与参数

Column和Row的接口定义一致：

Column(value?: { space?: string | number }) Row(value?: { space?: string | number })

可选入参space：用于设置子组件在主轴方向上的统一间距，可以快速实现等间距排列效果。

容器核心属性

justifyContent 主轴对齐属性详解

参数类型为FlexAlign，不同取值效果如下：

三种均匀间距模式的区别是高频考点，需要重点区分SpaceBetween、SpaceAround、SpaceEvenly的边界间距规则。

alignItems 交叉轴对齐属性详解

Column 容器的交叉轴对齐

Column 的交叉轴为水平方向，参数类型为HorizontalAlign：

Row 容器的交叉轴对齐

Row 的交叉轴为垂直方向，参数类型为VerticalAlign：

Column和Row的交叉轴方向不同，alignItems参数的类型和取值完全不同，开发时不要混淆。

布局开发实践流程

开发步骤

拿到 UI 设计稿后，遵循以下流程开发：

1. 确定页面整体布局结构，拆分页面层级。

2. 分析页面的元素构成，确定每个区域使用的基础组件。

3. 根据排列方向选择合适的布局容器，设置对齐方式和间距，控制元素的位置与大小。

案例：登录页面布局

以常见登录页面为例，整体内容从上到下排列：

1. 整体从上到下排列，顶层使用Column容器。

2. 顶部依次排列 Logo 图片、标题文本、账号输入框、密码输入框，直接作为 Column 子组件。

3. “短信验证码登录”和“忘记密码”需要水平排列，嵌套Row容器并设置两端对齐（justifyContent: SpaceBetween）。

4. 之后依次排列登录按钮、注册文本。

5. 最后底部“其他登录方式”的三个按钮需要水平排列，再次嵌套Row容器，通过space参数设置三个按钮的等间距。

代码结构示例：

build() { Column() { Image(...) Text(...) Text(...) TextInput(...) TextInput(...) Row() { Text(...) Text(...) } .justifyContent(FlexAlign.SpaceBetween) Button(...) Text(...) Text(...) Row({ space: 10 }) { Button(...) Button(...) Button(...) } } }

总结

本节课讲解了布局的核心概念与实践方法：

1. 布局基础：布局是管理 UI 组件大小和位置关系的特殊容器组件，支持嵌套实现复杂页面。ArkUI 提供线性布局（Column/Row）、层叠布局（Stack）、相对布局（RelativeContainer）三种基础布局，以及List、Grid、Swiper等复杂布局。

2. 线性布局核心：Column主轴垂直、交叉轴水平；Row主轴水平、交叉轴垂直。space参数设置主轴统一间距，justifyContent控制主轴对齐，alignItems控制交叉轴对齐。

3. 开发流程：先确定页面结构、分析元素构成，再选择合适的容器，通过justifyContent和alignItems调整对齐方式，通过space调整子组件间距。

4. 布局选型：元素分散定位的复杂场景优先选择相对布局，减少嵌套，提升代码可读性和性能。