第五篇【传奇开心果短博文系列】鸿蒙开发技术点案例示例：ArkUI 组件库常用布局方式_arkts ui库

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

系列短博文目录

鸿蒙开发技术点案例示例短博文系列

短博文目录

一、前言

ArkUI 是 ArkTS 框架中的一个UI组件库，提供了多种布局方式来帮助开发者构建灵活和美观的界面。

二、ArkUI 中常用的布局方式介绍

以下是 ArkUI 中常用的布局方式：

1. Flex 布局：ArkUI 的 Flex 布局使用 FlexContainer 和 FlexItem 组件来实现。FlexContainer 用于创建一个容器，其中的子元素按照水平或垂直方向排列，并根据设置的比例自动调整大小。FlexItem 用于定义 FlexContainer 中的子元素，可以设置元素的大小、对齐方式和伸缩性等属性。
2. Grid 布局：ArkUI 的 Grid 布局使用 GridContainer 和 GridItem 组件来实现。GridContainer 用于创建一个网格容器，可以自定义行数和列数，以及设置每个单元格的大小和对齐方式。GridItem 用于定义 GridContainer 中的单元格，可以指定单元格所占的行数和列数。
3. Stack 布局：ArkUI 的 Stack 布局使用 StackContainer 和 StackItem 组件来实现。StackContainer 用于创建一个堆叠容器，其中的子元素按照层级顺序依次叠加显示。StackItem 用于定义 StackContainer 中的子元素，可以设置元素的位置、大小和层级。
4. Panel 布局：ArkUI 的 Panel 布局使用 Panel 组件来实现。Panel 可以包含多个面板，每个面板可以根据需要设置标题、内容和样式。面板可以水平或垂直排列，支持折叠和展开等交互效果。
5. Tab 布局：ArkUI 的 Tab 布局使用 TabContainer 和 TabItem 组件来实现。TabContainer 用于创建一个选项卡容器，其中的子元素作为选项卡标签，可以通过切换选项卡来显示不同的内容。TabItem 用于定义 TabContainer 中的选项卡，可以设置选项卡的标题和对应的内容。
6. Drawer 布局：ArkUI 的 Drawer 布局使用 DrawerContainer 和 DrawerContent 组件来实现。DrawerContainer 用于创建一个抽屉容器，其中的子元素作为抽屉内容，可以通过打开或关闭抽屉来显示或隐藏内容。DrawerContent 用于定义 DrawerContainer 中的抽屉内容。
7. Card 布局：ArkUI 的 Card 布局使用 Card 组件来实现。Card 可以用于包裹其他组件或内容，形成一个卡片式的布局。Card 可以设置标题、图像、文本等内容，并支持自定义样式和交互效果。
8. Form 布局：ArkUI 的 Form 布局使用 Form 组件来实现表单布局。Form 可以用于将表单字段组织在一起，并提供统一的样式和布局。Form 可以包含输入框、选择框、按钮等表单元素，并支持表单验证和提交等功能。

这些布局方式都是 ArkUI 提供的常用布局方式，可以根据具体的界面需求选择合适的布局方式。同时，ArkUI 还提供了其他一些特殊用途的布局组件，如 Steps 布局用于实现多步骤流程、Collapse 布局用于实现可折叠内容等，开发者可以根据具体需求选择合适的组件和布局方式来构建界面。

三、Flex 布局示例代码

以下是一个使用 ArkUI 中的 Flex 布局的示例代码：

//装饰器，指页面入口。
@Entry
//装饰器，指下面开始自定义组件
@Component
//自定义组件
struct FlexLayoutExample {
//构造函数，UI声明
build() {
//FlexContainer 组件，创建一个 Flex 容器
FlexContainer(
//设置方向为垂直排列
direction: FlexDirection.Vertical,
//设置子元素在主轴上的对齐方式为居中对齐
justifyContent: JustifyContent.Center,
//设置子元素在交叉轴上的对齐方式为居中对齐
alignItems: AlignItems.Center,
//设置容器高度占满可用空间
height: ‘100vh’,
//设置容器背景色
backgroundColor: ‘#f5f5f5’,
) {
//FlexItem 组件，定义一个子元素
FlexItem(
//设置子元素占据的空间比例为1
flex: 1,
//设置子元素的对齐方式为居中对齐
alignSelf: AlignSelf.Center,
) {
//文本组件，显示内容
Text(‘Flex Item 1’)
//设置字号
.fontSize(24)
//设置字体颜色
.color(‘#333’);
}

//FlexItem 组件，定义另一个子元素
FlexItem(
//设置子元素占据的空间比例为2
flex: 2,
//设置子元素的对齐方式为居中对齐
alignSelf: AlignSelf.Center,
) {
//文本组件，显示内容
Text(‘Flex Item 2’)
//设置字号
.fontSize(24)
//设置字体颜色
.color(‘#333’);
}

//FlexItem 组件，定义第三个子元素
FlexItem(
//设置子元素占据的空间比例为3
flex: 3,
//设置子元素的对齐方式为居中对齐
alignSelf: AlignSelf.Center,
) {
//文本组件，显示内容
Text(‘Flex Item 3’)
//设置字号
.fontSize(24)
//设置字体颜色
.color(‘#333’);
}
}
}
}

在给定的代码中，我们使用了 FlexContainer 组件创建一个 Flex 容器，设置其方向为垂直排列，并设置子元素在主轴和交叉轴上的对齐方式为居中对齐。然后使用 FlexItem 组件定义了三个子元素，分别设置它们的占据空间比例和对齐方式。每个子元素内部都包含一个文本组件，用于显示内容。

四、Grid 布局示例代码

以下是一个使用 ArkUI 中的 Grid 布局的示例代码：

//装饰器，指页面入口。
@Entry
//装饰器，指下面开始自定义组件
@Component
//自定义组件
struct GridLayoutExample {
//构造函数，UI声明
build() {
//GridContainer 组件，创建一个 Grid 容器
GridContainer(
//设置网格行数为2
rows: ‘auto auto’,
//设置网格列数为3
columns: ‘1fr 1fr 1fr’,
//设置容器高度占满可用空间
height: ‘100vh’,
//设置容器背景色
backgroundColor: ‘#f5f5f5’,
) {
//GridItem 组件，定义一个单元格
GridItem(
//设置单元格所在行为第一行
row: 1,
//设置单元格所在列为第一列
column: 1,
//设置单元格跨越的行数为1
rowSpan: 1,
//设置单元格跨越的列数为1
columnSpan: 1,
//设置单元格背景色
backgroundColor: ‘#ff8080’,
) {
//文本组件，显示内容
Text(‘Grid Item 1’)
//设置字号
.fontSize(24)
//设置字体颜色
.color(‘#fff’);
}

//GridItem 组件，定义另一个单元格
GridItem(
//设置单元格所在行为第一行
row: 1,
//设置单元格所在列为第二列
column: 2,
//设置单元格跨越的行数为1
rowSpan: 1,
//设置单元格跨越的列数为2
columnSpan: 2,
//设置单元格背景色
backgroundColor: ‘#80b3ff’,
) {
//文本组件，显示内容
Text(‘Grid Item 2’)
//设置字号
.fontSize(24)
//设置字体颜色
.color(‘#fff’);
}

//GridItem 组件，定义第三个单元格
GridItem(
//设置单元格所在行为第二行
row: 2,
//设置单元格所在列为第一列
column: 1,
//设置单元格跨越的行数为1
rowSpan: 1,
//设置单元格跨越的列数为3
columnSpan: 3,
//设置单元格背景色
backgroundColor: ‘#99ff99’,
) {
//文本组件，显示内容
Text(‘Grid Item 3’)
//设置字号
.fontSize(24)
//设置字体颜色
.color(‘#333’);
}
}
}
}

在给定的代码中，我们使用了 GridContainer 组件创建一个 Grid 容器，设置其行数为2，列数为3，并设置容器高度占满可用空间。然后使用 GridItem 组件定义了三个单元格，分别设置它们所在的行和列、跨越的行数和列数，以及单元格的背景色。每个单元格内部都包含一个文本组件，用于显示内容。

五、Stack 布局示例代码

以下是一个使用 ArkUI 中的 Stack 布局的示例代码：

//装饰器，指页面入口。
@Entry
//装饰器，指下面开始自定义组件
@Component
//自定义组件
struct StackLayoutExample {
//构造函数，UI声明
build() {
//StackContainer 组件，创建一个堆叠容器
StackContainer(
//设置容器高度占满可用空间
height: ‘100vh’,
//设置容器背景色
backgroundColor: ‘#f5f5f5’,
) {
//StackItem 组件，定义一个子元素
StackItem(
//设置子元素的层级为1
zIndex: 1,
) {
//文本组件，显示内容
Text(‘Stack Item 1’)
//设置字号
.fontSize(24)
//设置字体颜色
.color(‘#333’);
}

//StackItem 组件，定义另一个子元素
StackItem(
//设置子元素的层级为2
zIndex: 2,
) {
//文本组件，显示内容
Text(‘Stack Item 2’)
//设置字号
.fontSize(24)
//设置字体颜色
.color(‘#333’);
}

//StackItem 组件，定义第三个子元素
StackItem(
//设置子元素的层级为3
zIndex: 3,
) {
//文本组件，显示内容
Text(‘Stack Item 3’)
//设置字号
.fontSize(24)
//设置字体颜色
.color(‘#333’);
}
}
}
}

在给定的代码中，我们使用了 StackContainer 组件创建一个堆叠容器，并设置容器高度占满可用空间。然后使用 StackItem 组件定义了三个子元素，分别设置它们的层级。每个子元素内部都包含一个文本组件，用于显示内容。

六、Panel 布局示例代码

以下是一个使用 ArkUI 中的 Panel 布局的示例代码：

//装饰器，指页面入口。
@Entry
//装饰器，指下面开始自定义组件
@Component
//自定义组件
struct PanelLayoutExample {
//构造函数，UI声明
build() {
//Panel 组件，创建一个面板容器
Panel(
//设置面板标题
title: ‘Example Panel’,
//设置面板折叠状态，默认为展开
collapsed: false,
//设置面板背景色
backgroundColor: ‘#f5f5f5’,
) {
//面板内容
Text(‘This is the content of the panel.’)
//设置字号
.fontSize(16)
//设置字体颜色
.color(‘#333’);
}
}
}

在给定的代码中，我们使用了 Panel 组件创建一个面板容器，并设置面板的标题、折叠状态和背景色。面板容器内部可以包含任意内容，这里我们使用了一个文本组件来展示面板的内容。

七、Tab 布局示例代码

以下是一个使用 ArkUI 中的 Tab 布局的示例代码：

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

[外链图片转存中…(img-UtDTxrt4-1715398010140)]
[外链图片转存中…(img-E8qJZJuQ-1715398010140)]

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！