ArkUI - 页面布局（Column、Row）

[cnwutianhao]

一、线性布局组件

1. Column 容器

   从上到下，纵向排列

   示例：

   Column() {
     Text('文字一')
     Text('文字二')
     Text('文字三')
     Text('文字四')
     Text('文字五')
   }
   

   效果：
   

2. Row 容器

   从左到右，横向排列

   示例：

   Row() {
     Text('文字一')
     Text('文字二')
     Text('文字三')
     Text('文字四')
     Text('文字五')
   }
   

   效果：
   

二、常见布局属性

在容器内部，元素排列是有方向的。Column 容器的元素是从上往下，垂直方向的排列；Row 容器的元素是从左往右，水平方向的排列。把容器内部元素排列方向上的这个轴线称之为主轴，把与主轴垂直的轴线称之为交叉轴，元素的对其方式就跟这两个轴有关系。除了对其以外，元素与元素之间还会有一定的间隔，称之为 Space，默认值是 0，也就是说默认情况下元素与元素之间是紧贴着的，在创建容器时可以对 Space 赋值，来改变容器的元素间隔。

1. 对齐方式

   属性方法名	说明	参数
   justifyContent	设置子元素在主轴方向的对齐格式	FlexAlign 枚举
   alignItems	设置子元素在交叉轴方向的对齐格式	Row 容器使用 VerticalAlign 枚举 Column 容器使用 HorizontalAlign 枚举

   示例：

   @Entry
   @Component
   struct Index {
     build() {
       Column({ space: 10 }) {
         Text('文字一')
         Text('文字二')
         Text('文字三')
         Text('文字四')
         Text('文字五')
       }
       .width('100%')
       .height('100%')
       .justifyContent(FlexAlign.Center)
       .alignItems(HorizontalAlign.Center)
     }
   }
   

   • 首先声明一个 Column 容器，在容器初始化参数里传了一个对象 space（间隔），这样容器内部的元素就会有间隔。
   • 然后在 Column 内部定义四个 Text，由于是 Column 布局，纵向排列，所以四个 Text 是从上往下排列。
   • 最后设置 Column 的属性方法，宽、高 100% 占满整个屏幕，定义 justifyContent 来控制元素在主轴方向的对齐方式，定义 alignItems 来控制元素在交叉轴方向的对齐方式。

   效果：
   

2. FlexAlign 枚举（以 Column 容器为例）

   
   • FlexAlign.Start：元素与主轴方向的起点位置对齐
   • FlexAlign.Center：元素与主轴方向的中间位置对齐，元素到起点和终点的位置是一致的
   • FlexAlign.End：元素与主轴方向的终点位置对齐
   • FlexAlign.SpaceBetween：把主轴空间平均分配到元素之间
   • FlexAlign.SpaceAround：首尾元素和起点、终点的距离是元素之间距离的一半
   • FlexAlign.SpaceEvenly：首尾元素和起点、终点的距离等同于是元素之间距离

3. HorizontalAlign 枚举（VerticalAlign 同理）

   
   • HorizontalAlign.Start：在交叉轴的起点位置
   • HorizontalAlign.Center：在交叉轴的中间位置
   • HorizontalAlign.End：在交叉轴的终点位置