鸿蒙 - arkTs：容器组件

【代码】鸿蒙 - arkTs：容器组件。

Web Erek

1564人浏览 · 2023-12-20 15:24:26

Web Erek · 2023-12-20 15:24:26 发布

垂直布局 - Column({ space: Number})

space：纵向布局元素垂直方向间距。

使用示例：

Column() {
    // 容器内元素内容
}
    .justifyContent('FlexAlign枚举值')
    .alignItems('HorizontalAlign枚举值')

FlexAlign 枚举说明：（垂直方向元素对齐方式）

Start：元素在主轴方向首端对齐。
End：元素在主轴方向尾端对齐。
Center：元素在主轴方向中心对齐。
SpaceBetween：Flex主轴方向均匀分配弹性元素，其余元素之间距离相同。首尾元素距离两边没有间距。
SpaceAround：Flex主轴方向均匀分配弹性元素，其余元素之间距离相同。首尾元素距离两边间距是其他元素间距的一半。
SpaceEvenly：Flex主轴方向均匀等间距的分配弹性元素。

HorizontalAlign 枚举说明：（垂直方向元素对齐方式）

Start：按照语言方向起始端对齐。
End：按照语言方向末端对齐。
Center：居中对齐，默认对齐方式。

水平布局 - Row({ space: Number})

space：纵向布局元素垂直方向间距。

使用示例：

Row() {
    // 容器内元素内容
}
    .justifyContent('FlexAlign枚举值')
    .alignItems('VerticalAlign枚举值')

FlexAlign 枚举说明：（水平方向元素对齐方式）

Start：元素在主轴方向首端对齐。
End：元素在主轴方向尾端对齐。
Center：元素在主轴方向中心对齐。
SpaceBetween：Flex主轴方向均匀分配弹性元素，其余元素之间距离相同。首尾元素距离两边没有间距。
SpaceAround：Flex主轴方向均匀分配弹性元素，其余元素之间距离相同。首尾元素距离两边间距是其他元素间距的一半。
SpaceEvenly：Flex主轴方向均匀等间距的分配弹性元素。

VerticalAlign 枚举说明：（水平方向元素对齐方式）

Top：顶部对齐。
Bottom：底部对齐。
Center：居中对齐，默认对齐方式。

列表布局 - List({ space: Number})

space：列表元素之间的间距。

使用示例：

@Entry
@Component
struct Index {
  build() {
      List({space: 30}) {
       ForEach(
         [1,2,3,4,5,6,7,8,9],
         item=>{
           ListItem(){
             Text(`第${item}个元素`)
               .fontWeight(FontWeight.Bold)
               .height(50)
               .lineHeight(50)
           }
           .width('100%')
           .backgroundColor("#FFF")
           .padding(20)
         }
       )
      }
      .width('100%')
      .height('100%')
      .backgroundColor("#999")
      .listDirection('Axis枚举值')
  };
}

Axis枚举说明：

Vertical：（默认值）列表垂直排列
Horizontal：列表水平排列

堆叠容器 - Stack({ alignContent?: Alignment })

堆叠容器，子组件按照顺序依次入栈，后一个子组件覆盖前一个子组件。

alignContent：设置子组件在容器内的对齐方式。

使用示例：

@Entry
@Component
struct index {
  build() {
    Stack({ alignContent: 'Alignment枚举值' }) {
      Text('First child, show in bottom')
        .width('90%')
        .height('100%')
        .backgroundColor('#999')
        .align(Alignment.Top)
      Text('Second child, show in top')
        .width('70%')
        .height('60%')
        .backgroundColor('#D2CAB3')
        .align(Alignment.Top)
    }
    .width('100%')
    .height(150)
    .margin({ top: 5 })
  }
}