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数据目录。