#HarmonyOS NEXT体验官# 掌握 HarmonyOS 布局管理：灵活构建用户界面（上） 原创

掌握 HarmonyOS 布局管理：灵活构建用户界面（上）

本文将探讨 HarmonyOS 中常用的布局容器组件，如 Column、Row 和 Grid，并学习如何通过这些组件创建和管理界面元素。通过实际的代码示例，你将掌握这些组件的属性及其使用方式，从而能够设计出灵活且响应迅速的用户界面。

一、 Column 容器组件

Column 是一种垂直布局容器，用于将子组件从上到下排列。以下是 Column 的属性和使用示例：

1. Column 组件的属性

   • alignItems: 设置子项的水平对齐方式，如 Center、Start、End 等。
   • justifyContent: 设置子项的垂直分布方式，如 SpaceBetween、Center、Start 等。

2. 垂直线性布局示例

   • 以下代码展示了如何创建一个简单的垂直布局，将多个文本组件垂直排列：

     @Component
     export struct VerticalLayoutDemo {
       build() {
         Column() {
           Text('Item 1')  
           Text('Item 2')  
           Text('Item 3')  
         }
         .alignItems(HorizontalAlign.Center)
         .justifyContent(FlexAlign.SpaceBetween)
         .width('100%')
         .height('100%')
         .padding(10)
       }
     }
     

预览效果：

二、 Row 容器组件

Row 是一种水平布局容器，用于将子组件从左到右排列。以下是 Row 的属性和使用示例：

1. Row 组件的属性

   • alignItems: 设置子项的垂直对齐方式，如 Center、Start、End 等。
   • justifyContent: 设置子项的水平分布方式，如 SpaceAround、Center、Start 等。

2. 水平线性布局示例

   • 以下代码展示了如何创建一个简单的水平布局，将多个文本组件水平排列：

     @Component
     export struct HorizontalLayoutDemo {
       build() {
         Row() {
           Text('Item 1')  
           Text('Item 2')  
           Text('Item 3')  
         }
         .alignItems(VerticalAlign.Center)
         .justifyContent(FlexAlign.SpaceAround)
         .width('100%')
         .height('100%')
         .padding(10)
       }
     }
     

预览效果：

三、 Grid 容器组件

Grid 是一种网格布局容器，适用于需要在行和列中排列多个子项的场景。以下是 Grid 和 GridItem 的属性和使用示例：

1. Grid 组件的属性

   • columnsTemplate: 定义列的布局模板，例如 1fr 1fr 表示两个等宽列。
   • rowsTemplate: 定义行的布局模板，例如 1fr 1fr 表示两行。

2. 网格布局示例

   • 下面的代码展示了如何创建一个两行两列的网格布局：

     @Component
     export struct GridLayoutDemo {
       @State items: string[] = ['Item 1', 'Item 2', 'Item 3', 'Item 4']
     
       build() {
         Grid() {
           ForEach(this.items, (item: string) => {
             GridItem() {
               Text(item)
                 .fontSize(16)
                 .backgroundColor(0xF9CF93)
                 .width('100%')
                 .height('100%')
                 .textAlign(TextAlign.Center)
             }
           }, (item: string) => item)
         }
         .columnsTemplate('1fr 1fr')
         .rowsTemplate('1fr 1fr')
         .columnsGap(10)
         .rowsGap(10)
         .width('100%')
         .height(200)
         .backgroundColor(0xFAEEE0)
         .margin({ top: 5 })
       }
     }
     

预览效果：