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

系列短博文目录

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

短博文目录

一、前言

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 布局的示例代码：

//装饰器，指页面入口。
@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的这些布局组件可以帮助您在页面中实现不同的布局效果，提供更好的用户体验和界面设计。根据具体需求，您可以选择合适的布局组件来构建您的页面。同时，根据具体框架或库的要求进行相应的调整和修改，以实现更复杂的布局和功能。