传奇开心果短博文系列
- 系列短博文目录
- 鸿蒙开发技术点案例示例短博文系列
- 短博文目录
- 一、前言
- 二、ArkUI 中常用的布局方式介绍
- 三、Flex 布局示例代码
- 四、Grid 布局示例代码
- 五、Stack 布局示例代码
- 六、Panel 布局示例代码
- 七、Tab 布局示例代码
- 八、Drawer 布局示例代码
- 九、Card 布局示例代码
- 十、Form 布局示例代码
- 十一、归纳总结
系列短博文目录
鸿蒙开发技术点案例示例短博文系列
短博文目录
一、前言
ArkUI 是 ArkTS 框架中的一个UI组件库，提供了多种布局方式来帮助开发者构建灵活和美观的界面。
二、ArkUI 中常用的布局方式介绍
以下是 ArkUI 中常用的布局方式：
-
Flex 布局：ArkUI 的 Flex 布局使用 FlexContainer 和 FlexItem 组件来实现。FlexContainer 用于创建一个容器，其中的子元素按照水平或垂直方向排列，并根据设置的比例自动调整大小。FlexItem 用于定义 FlexContainer 中的子元素，可以设置元素的大小、对齐方式和伸缩性等属性。
-
Grid 布局：ArkUI 的 Grid 布局使用 GridContainer 和 GridItem 组件来实现。GridContainer 用于创建一个网格容器，可以自定义行数和列数，以及设置每个单元格的大小和对齐方式。GridItem 用于定义 GridContainer 中的单元格，可以指定单元格所占的行数和列数。
-
Stack 布局：ArkUI 的 Stack 布局使用 StackContainer 和 StackItem 组件来实现。StackContainer 用于创建一个堆叠容器，其中的子元素按照层级顺序依次叠加显示。StackItem 用于定义 StackContainer 中的子元素，可以设置元素的位置、大小和层级。
-
Panel 布局：ArkUI 的 Panel 布局使用 Panel 组件来实现。Panel 可以包含多个面板，每个面板可以根据需要设置标题、内容和样式。面板可以水平或垂直排列，支持折叠和展开等交互效果。
-
Tab 布局：ArkUI 的 Tab 布局使用 TabContainer 和 TabItem 组件来实现。TabContainer 用于创建一个选项卡容器，其中的子元素作为选项卡标签，可以通过切换选项卡来显示不同的内容。TabItem 用于定义 TabContainer 中的选项卡，可以设置选项卡的标题和对应的内容。
-
Drawer 布局：ArkUI 的 Drawer 布局使用 DrawerContainer 和 DrawerContent 组件来实现。DrawerContainer 用于创建一个抽屉容器，其中的子元素作为抽屉内容，可以通过打开或关闭抽屉来显示或隐藏内容。DrawerContent 用于定义 DrawerContainer 中的抽屉内容。
-
Card 布局：ArkUI 的 Card 布局使用 Card 组件来实现。Card 可以用于包裹其他组件或内容，形成一个卡片式的布局。Card 可以设置标题、图像、文本等内容，并支持自定义样式和交互效果。
-
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 布局的示例代码：
//装饰器，指页面入口。
@Entry
//装饰器，指下面开始自定义组件
@Component
//自定义组件
struct TabLayoutExample {
//构造函数，UI声明
build() {
//TabContainer 组件，创建一个选项卡容器
TabContainer {
//TabItem 组件，定义第一个选项卡
TabItem(title: 'Tab 1') {
//选项卡内容
Text('This is the content of Tab 1.')
//设置字号
.fontSize(16)
//设置字体颜色
.color('#333');
}
//TabItem 组件，定义第二个选项卡
TabItem(title: 'Tab 2') {
//选项卡内容
Text('This is the content of Tab 2.')
//设置字号
.fontSize(16)
//设置字体颜色
.color('#333');
}
//TabItem 组件，定义第三个选项卡
TabItem(title: 'Tab 3') {
//选项卡内容
Text('This is the content of Tab 3.')
//设置字号
.fontSize(16)
//设置字体颜色
.color('#333');
}
}
}
}
在给定的代码中，我们使用了 TabContainer 组件创建一个选项卡容器，并在其中使用 TabItem 组件定义了三个选项卡。每个选项卡都有一个标题和对应的内容。这里我们使用了文本组件来展示选项卡的内容。
八、Drawer 布局示例代码
以下是一个使用 ArkUI 中的 Drawer 布局的示例代码：
//装饰器，指页面入口。
@Entry
//装饰器，指下面开始自定义组件
@Component
//自定义组件
struct DrawerLayoutExample {
//构造函数，UI声明
build() {
//DrawerContainer 组件，创建一个抽屉容器
DrawerContainer(
//设置抽屉的位置为右侧
position: DrawerPosition.Right,
//设置抽屉的宽度
width: '300px',
//设置抽屉的背景色
backgroundColor: '#f5f5f5',
) {
//抽屉内容
Text('This is the content of the drawer.')
//设置字号
.fontSize(16)
//设置字体颜色
.color('#333');
}
}
}
在给定的代码中，我们使用了 DrawerContainer 组件创建一个抽屉容器，并设置抽屉的位置为右侧、宽度和背景色。抽屉容器内部可以包含任意内容，这里我们使用了一个文本组件来展示抽屉的内容。
九、Card 布局示例代码
以下是一个使用 ArkUI 中的 Card 布局的示例代码：
//装饰器，指页面入口。
@Entry
//装饰器，指下面开始自定义组件
@Component
//自定义组件
struct CardLayoutExample {
//构造函数，UI声明
build() {
//Card 组件，创建一个卡片容器
Card(
//设置卡片宽度
width: '300px',
//设置卡片高度
height: '200px',
//设置卡片背景色
backgroundColor: '#f5f5f5',
) {
//卡片内容
Text('This is the content of the card.')
//设置字号
.fontSize(16)
//设置字体颜色
.color('#333');
}
}
}
在给定的代码中，我们使用了 Card 组件创建一个卡片容器，并设置卡片的宽度、高度和背景色。卡片容器内部可以包含任意内容，这里我们使用了一个文本组件来展示卡片的内容。
十、Form 布局示例代码
以下是一个使用 ArkUI 中的 Form 布局的示例代码：
//装饰器，指页面入口。
@Entry
//装饰器，指下面开始自定义组件
@Component
//自定义组件
struct FormLayoutExample {
//构造函数，UI声明
build() {
//Form 组件，创建一个表单容器
Form {
//FormItem 组件，定义一个表单项
FormItem(label: 'Username') {
//输入框组件，用于输入用户名
Input(placeholder: 'Enter your username');
}
//FormItem 组件，定义另一个表单项
FormItem(label: 'Password') {
//输入框组件，用于输入密码
Input(placeholder: 'Enter your password', type: 'password');
}
//FormItem 组件，定义第三个表单项
FormItem(label: 'Email') {
//输入框组件，用于输入邮箱
Input(placeholder: 'Enter your email', type: 'email');
}
//FormItem 组件，定义第四个表单项
FormItem(label: 'Phone') {
//输入框组件，用于输入手机号码
Input(placeholder: 'Enter your phone number', type: 'tel');
}
//按钮组件，用于提交表单
Button(text: 'Submit', type: 'primary');
}
}
}
在给定的代码中，我们使用了 Form 组件创建一个表单容器，并在其中使用 FormItem 组件定义了多个表单项。每个表单项都有一个标签和对应的输入框组件。最后，我们使用了一个按钮组件来提交表单。
请注意，这只是一个简单示例，实际应用中您可以根据需要进行更复杂的表单布局和字段验证。同时，您可能还需要根据具体框架或库的要求进行相应的调整和修改。
十一、归纳总结
ArkUI 是 ArkTS 框架中的一个UI组件库，ArkUI的这些布局组件可以帮助您在页面中实现不同的布局效果，提供更好的用户体验和界面设计。根据具体需求，您可以选择合适的布局组件来构建您的页面。同时，根据具体框架或库的要求进行相应的调整和修改，以实现更复杂的布局和功能。
