鸿蒙 - arkTs:容器组件

2023-12-20 19:38:36

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

  1. space:纵向布局元素垂直方向间距。

使用示例:

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

FlexAlign 枚举说明:(垂直方向元素对齐方式)

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

HorizontalAlign 枚举说明:(垂直方向元素对齐方式)

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

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

  1. space:纵向布局元素垂直方向间距。

使用示例:

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

FlexAlign 枚举说明:(水平方向元素对齐方式)

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

VerticalAlign 枚举说明:(水平方向元素对齐方式)

  • Top:顶部对齐。
  • Bottom:底部对齐。
  • Center:居中对齐,默认对齐方式。

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

  1. 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:列表水平排列

文章来源:https://blog.csdn.net/weixin_45536484/article/details/135106338
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。