HarmonyOS实战开发-ArkUI常用布局容器对齐方式

介绍

基于ArkTS扩展的声明式开发范式，实现Flex、Column、Row和Stack四种常用布局容器对齐方式。

效果图如下：

相关概念

• 主轴：在布局容器中，默认存在两根轴，分别是主轴和交叉轴，不同的容器中主轴的方向不一样的。在Column容器中主轴的方向是垂直方向。在Row容器中主轴的方向是水平方向。在Flex容器中可以通过direction参数设置主轴的方向，设置为Column时，主轴的方向是垂直方向。设置为Row时，主轴的方向是水平方向。在Stack容器中没有明确主轴与交叉轴，通过设置alignContent参数来改变容器内组件的对齐方式。
• 交叉轴：与主轴垂直相交的轴线，如果主轴是垂直方向，则交叉轴就是水平方向；如果主轴是水平方向，则交叉轴是垂直方向。

环境搭建

软件要求

• DevEco Studio版本：DevEco Studio 3.1 Release。
• OpenHarmony SDK版本：API version 9。

硬件要求

• 开发板类型：润和RK3568开发板。
• OpenHarmony系统：3.2 Release。

环境搭建

完成本篇Codelab我们首先要完成开发环境的搭建，本示例以RK3568开发板为例，参照以下步骤进行：

1. 获取OpenHarmony系统版本：标准系统解决方案（二进制）。以3.2 Release版本为例：

2.搭建烧录环境。

1. 完成DevEco Device Tool的安装
2. 完成RK3568开发板的烧录

3.搭建开发环境。

1. 开始前请参考工具准备，完成DevEco Studio的安装和开发环境配置。
2. 开发环境配置完成后，请参考使用工程向导创建工程（模板选择“Empty Ability”）。
3. 工程创建完成后，选择使用真机进行调测。

代码结构解读

本篇Codelab只对核心代码进行讲解。

├──entry/src/main/ets	                // 代码区
│  ├──common
│  │  └──constants
│  │     └──CommonConstants.ets	        // 样式常量类
│  ├──entryability
│  │  └──EntryAbility.ts                // 程序入口类
│  ├──pages
│  │  ├──LayoutAlignIndex.ets           // 主界面
│  │  └──Second.ets                     // 视频播放界面		
│  ├──view
│  │  ├──ColumnAxisAlignRadioList.ets   // 自定义Column容器设置交叉轴对其方式属性
│  │  ├──ColumnMainAlignRadioList.ets   // 自定义Column容器设置主轴对其方式属性
│  │  ├──ColumnShowList.ets             // 自定义Column容器子元素列表文件
│  │  ├──CommonComponent.ets            // 自定义公共组件文件
│  │  ├──FlexAxisAlignRadioList.ets     // 自定义Flex容器设置交叉轴对其方式属性
│  │  ├──FlexMainAlignRadioList.ets     // 自定义Flex容器设置主轴对其方式属性
│  │  ├──FlexMainDirectionRadioList.ets // 自定义Flex容器设置主轴方向对其方式属性
│  │  ├──FlexShowList.ets               // 自定义Flex容器子元素列表文件
│  │  ├──RowAxisAlignRadioList.ets      // 自定义Row容器设置交叉轴对其方式属性
│  │  ├──RowMainAlignRadioList.ets      // 自定义Row容器设置主轴对其方式属性
│  │  ├──RowShowList.ets                // 自定义Row容器子元素列表文件
│  │  ├──StackAlignRadioList.ets        // 自定义Stack容器设置对其方式属性
│  │  └──StackComponent.ets             // 自定义Stack容器子元素文件
│  └──viewmodel
│     ├──AttributeModuleData.ets        // 属性模块数据
│     ├──ContainerModuleItem.ets        // 属性模块对象
│     ├──IndexData.ets                  // 首页数据
│     └──IndexListItem.ets              // 首页数据对象
└──entry/src/main/resource              // 应用静态资源目录

构建主界面

我们将完成示例主界面的设计，主界面由标题和４个容器模块的 List 组成，效果图如下：

1.在ets目录下，新建几个子目录，点击鼠标右键 >New>Directory，新建名为view的自定义子组件目录、common公共目录和viewmodel数据目录。

2.在LayoutAlignIndex.ets主界面中包含显示四种容器对齐方式的入口。

// LayoutAlignIndex.ets
@Entry
@Component
struct LayoutAlignIndex {
  private indexList: IndexListItem[] = getIndexList();

  build() {
    Column() {
      Text($r('app.string.index_title'))
        ...
      List() {
        ForEach(this.indexList, (item: IndexListItem) => {
          ListItem() {
            ListItemComp({ item: item })
              .margin({ top: MARGIN_FONT_SIZE_SPACE.SECOND_MARGIN })
          }
        }, (item: IndexListItem) => JSON.stringify(item))
      }
      .height(ALL_PERCENT)
      .width(ALL_PERCENT)
      .listDirection(Axis.Vertical)
      .margin({ top: MARGIN_FONT_SIZE_SPACE.EIGHTH_MARGIN })
    }
    ...
  }
}

@Component
struct ListItemComp {
  ...
}

构建不同容器对齐方式显示界面

1.在pages目录下，点击鼠标右键 >New>Page，新建Second.ets页面。

在view目录下，点击鼠标右键 >New>ArkTS File，新建五个ArkTS文件，分别为ColumnShowList.ets、FlexShowList.ets、RowShowList.ets、StackComponent.ets和CommonComponent.ets。

2.在ColumnShowList.ets中，自定组件ColumnShowList主要效果是在Column布局容器中，设置不同的主轴与交叉轴的对齐方式属性时，显示容器内元素的对齐方式，以及主轴对其方式和交叉轴对其方式属性设置模块。

具体代码如下：

// ColumnShowList.ets
@Component
export struct ColumnShowList {
  @Consume currentColumnJustifyContent: FlexAlign;
  @Consume currentColumnAlignItems: HorizontalAlign;

  build() {
    Column() {
      Column() {
        ForEach(LIST, (item: number) => {
          CommonItem({ item: item })
        }, (item: number) => JSON.stringify(item))
      }
      ...
      // 设置主轴对齐方式
      ColumnMainAlignRadioList()
        .margin({ top: MARGIN_FONT_SIZE_SPACE.EIGHTH_MARGIN })
      // 设置交叉轴对齐方式
      ColumnAxisAlignRadioList()
        .margin({ top: MARGIN_FONT_SIZE_SPACE.EIGHTH_MARGIN })
    }
    ...
  }
}

其中ColumnMainAlignRadioList子组件和ColumnAxisAlignRadioList子组件分别是设置主轴对齐方式单选框列表和设置交叉轴对齐方式单选框列表，并且在FlexShowList，RowShowList和StackComponent中都存在代码结构类似的子组件，只是设置的属性和参数单选框列表不同，后面不在重复其详细代码，这里选择其中一个单选框列表子组件来显示。

具体代码如下：

// ColumnMainAlignRadioList.ets @Component export struct ColumnMainAlignRadioList { ...

 build() {
   Column({ space: MARGIN_FONT_SIZE_SPACE.FIRST_MARGIN }) {
  // 单选框列表模块名称
     Row() {
       Text(this.moduleName)
         .fontSize(MARGIN_FONT_SIZE_SPACE.FOURTH_MARGIN)
     }
     .margin({ left: MARGIN_FONT_SIZE_SPACE.SECOND_MARGIN })

     Flex({
       direction: FlexDirection.Row,
       justifyContent: FlexAlign.SpaceBetween,
       wrap: FlexWrap.NoWrap
     }) {
       ForEach(this.radioList, (item: string, index?: number) => {
         MainAlignRadioItem({ textName: item, groupName: this.groupName, isChecked: index === 0 ? true : false })
           .margin({ right: MARGIN_FONT_SIZE_SPACE.COMMON_MARGIN })
       }, (item: string) => JSON.stringify(item))
     }
     ...
   }
   ...
 }

}
@Component struct MainAlignRadioItem { ...

 build() {
   Row() {
     Radio({ value: this.textName, group: this.groupName })
       .checked(this.isChecked)
       .height((MARGIN_FONT_SIZE_SPACE.SECOND_MARGIN))
       .width((MARGIN_FONT_SIZE_SPACE.SECOND_MARGIN))
       .onClick(() => {
         switch (this.textName) {
           case ATTRIBUTE.START:
             this.currentColumnJustifyContent = FlexAlign.Start;
             break;
           case ATTRIBUTE.CENTER:
             this.currentColumnJustifyContent = FlexAlign.Center;
             break;
           default:
             this.currentColumnJustifyContent = FlexAlign.End;
             break;
         }
       })
     Text(this.textName)
       .fontSize(MARGIN_FONT_SIZE_SPACE.THIRD_MARGIN)
       .opacity(ATTRIBUTE_OPACITY)
   }
 }

}

3. 在FlexShowList.ets中，自定组件FlexShowList主要效果是在Flex布局容器中，设置不同的参数时，显示容器内元素对齐方式。

![](figures/zh-cn_image_0000001458437253.png)

具体代码如下：

```typescript
// FlexShowList.ets
@Component
export struct FlexShowList {
  @Consume list: number[];
  @Consume currentFlexDirection: FlexDirection;
  @Consume currentFlexJustifyContent: FlexAlign;
  @Consume currentFlexAlignItems: ItemAlign;
  @Consume currentFlexWrap: FlexWrap;
  @Consume currentFlexAlignContent: FlexAlign;

  build() {
    Column() {
      Flex({
	    // 参数设置
        ...
      }) {
        ForEach(this.list, (item: number) => {
          CommonItem({ item: item })
        }, (item: number) => JSON.stringify(item))
      }
      ...
      // 设置主轴方向
      FlexMainDirectionRadioList()
        .margin({ top: MARGIN_FONT_SIZE_SPACE.EIGHTH_MARGIN })
      // 设置主轴方向
      FlexMainAlignRadioList()
        .margin({ top: MARGIN_FONT_SIZE_SPACE.EIGHTH_MARGIN })
      // 设置交叉轴对齐方式
      FlexAxisAlignRadioList()
        .margin({ top: MARGIN_FONT_SIZE_SPACE.EIGHTH_MARGIN })
    }
    ...
  }
}

4.在RowShowList.ets中，自定组件RowShowList主要效果是在Row布局容器中，当设置不同的主轴与交叉轴的对齐方式属性时，显示容器内元素的对齐方式。

代码如下：

// RowShowList.ets
@Component
export struct RowShowList {
  @Consume currentRowJustifyContent: FlexAlign;
  @Consume currentRowAlignItems: VerticalAlign;

  build() {
    Column() {
      Row() {
        ForEach(LIST, (item: number) => {
          CommonItem({ item: item })
        }, (item: number) => JSON.stringify(item))
      }
      ...
      // 设置主轴对齐方式
      RowMainAlignRadioList()
        .margin({ top: MARGIN_FONT_SIZE_SPACE.EIGHTH_MARGIN })
      // 设置交叉轴对齐方式
      RowAxisAlignRadioList()
        .margin({ top: MARGIN_FONT_SIZE_SPACE.EIGHTH_MARGIN })
    }
    ...
  }
}

5.在StackComponent.ets中，自定组件StackComponent主要效果是在Stack布局容器中，设置不同对齐方式属性时，容器内堆叠元素的对齐方式。

代码如下：

// StackComponent.ets
@Component
export struct StackComponent {
  ...

  build() {
    Column() {
      Stack({ alignContent: this.currentStackAlignContent }) {
        Text('')
          .width(ALL_PERCENT)
          .height(ALL_PERCENT)
          .fontSize(MARGIN_FONT_SIZE_SPACE.FOURTH_MARGIN)
          .backgroundColor($r('app.color.show_list_backgroundColor'))
        Text(this.message)
          ...
      }
      .margin({ top: MARGIN_FONT_SIZE_SPACE.FIRST_MARGIN })
      .width(ALL_PERCENT)
      .height(SHOW_LIST_HEIGHT_PERCENT.STACK_SHOW_LIST_HEIGHT)
      // 设置对齐方式
      StackAlignRadioList()
        .margin({ top: MARGIN_FONT_SIZE_SPACE.EIGHTH_MARGIN })
    }
    ...
  }
}

6.在CommonComponent.ets中，自定义组件CommonItem，代码如下：

// CommonComponent.ets
@Component
export struct CommonItem {
  private item: number = 0;

  build() {
    Text(this.item.toString())
      .fontSize(MARGIN_FONT_SIZE_SPACE.FIFTH_MARGIN)
      .width(MARGIN_FONT_SIZE_SPACE.NINTH_MARGIN)
      .height(MARGIN_FONT_SIZE_SPACE.NINTH_MARGIN)
      .fontColor($r("app.color.show_list_fontColor"))
      .textAlign(TextAlign.Center)
      .align(Alignment.Center)
      .backgroundColor($r("app.color.white"))
      .borderRadius(MARGIN_FONT_SIZE_SPACE.COMMON_PADDING)
      .margin(MARGIN_FONT_SIZE_SPACE.COMMON_PADDING)
  }
}

7.在Second.ets页面，根据首页跳转时的参数，渲染顶部不同的容器名称和条件渲染不同的子组件。

代码如下：

// Second.ets
@Entry
@Component
struct Second {
  ...

  aboutToAppear() {
    let params = router.getParams() as Record<string, Object>;
    this.moduleList = params.moduleList as ContainerModuleItem[];
    this.componentName = params.componentName as string;
    this.containerType = params.containerType as number;
  }

  build() {
    Row() {
      Column({ space: MARGIN_FONT_SIZE_SPACE.SIXTH_MARGIN }) {
        Column() {
          BackComp({ componentName: this.componentName })
          if (this.containerType === CONTAINER_TYPE.FLEX) {
            FlexShowList()
          } else if (this.containerType === CONTAINER_TYPE.COLUMN) {
            ColumnShowList()
          } else if (this.containerType === CONTAINER_TYPE.ROW) {
            RowShowList()
          } else {
            StackComponent()
          }
        }
        .width(ALL_PERCENT)
        .height(ALL_PERCENT)
      }
      .width(ALL_PERCENT)
    }
    .height(ALL_PERCENT)
  }
}

@Component
struct BackComp {
  ...
}

总结

目前你已经成功完成了 Codelab 并且学到了如何在四种常用的布局容器内，如何灵活的使用下列属性和参数：

1. justifyContent：作用在布局容器上，设置主轴的对齐方式。
2. alignItems：作用在布局容器上，设置交叉轴对齐方式。Flex 布局容器内子组件单行/列时生效，多行/列时不生效。
3. alignContent：作用在布局容器上，在 Flex 布局容器中设置交叉轴对齐方式，在 Stack 布局容器中设置容器内子组件整体的对齐方式。Flex 布局容器内子组件多行/列时生效，单行/列时不生效。
4. alignSelf：作用在子组件上，当想要布局容器内的某个子组件不按布局容器交叉轴方向设置的对齐方式排列时，可以用该属性覆盖 alignItems 的配置。
5. align：作用在子组件上，设置组件内容在组件范围内的对齐方式，只有当组件设置的 width 和 height 大小超过组件本身内容大小时生效。
6. 如果组件有相应的属性设置对齐方式，比如 text 组件的 textAlign 属性，可使用 align 搭配 textAlign一起使用来实现自己的UI布局。

为了帮助大家更深入有效的学习到鸿蒙开发知识点，小编特意给大家准备了一份全套最新版的HarmonyOS NEXT学习资源，获取完整版方式请点击→《HarmonyOS教学视频》

HarmonyOS教学视频：语法ArkTS、TypeScript、ArkUI等.....视频教程

鸿蒙生态应用开发白皮书V2.0PDF：

获取完整版白皮书请点击→《鸿蒙生态应用开发白皮书V2.0PDF》

鸿蒙 (Harmony OS)开发学习手册

一、入门必看

1. 应用开发导读(ArkTS)
2. ……

二、HarmonyOS 概念

1. 系统定义
2. 技术架构
3. 技术特性
4. 系统安全
5. ........

三、如何快速入门？《做鸿蒙应用开发到底学习些啥？》

1. 基本概念
2. 构建第一个ArkTS应用
3. ……

四、开发基础知识

1. 应用基础知识
2. 配置文件
3. 应用数据管理
4. 应用安全管理
5. 应用隐私保护
6. 三方应用调用管控机制
7. 资源分类与访问
8. 学习ArkTS语言
9. ……

五、基于ArkTS 开发

1. Ability开发
2. UI开发
3. 公共事件与通知
4. 窗口管理
5. 媒体
6. 安全
7. 网络与链接
8. 电话服务
9. 数据管理
10. 后台任务(Background Task)管理
11. 设备管理
12. 设备使用信息统计
13. DFX
14. 国际化开发
15. 折叠屏系列
16. ……

更多了解更多鸿蒙开发的相关知识可以参考：《鸿蒙 (Harmony OS)开发学习手册》