HarmonyOS ArkTS Column组件如何调整垂直方向显示方式

发布于 3 个月前 作者 itying888 113 次浏览 最后一次编辑是 3 个月前 来自 分享

HarmonyOS ArkTS Column是沿垂直方向布局的容器，可以包含多个子组件，多个子组件会在垂直方向上按照顺序排列。

HarmonyOS 仿小米App实战教程： https://www.itying.com/goods-1193.html

HarmonyOS ArkTS Column 调整垂直方向上的对齐格式的属性

名称 参数类型 描述
alignItems HorizontalAlign 设置子组件在水平方向上的对齐格式。默认值：HorizontalAlign.Center从API version 9开始，该接口支持在ArkTS卡片中使用。
justifyContent FlexAlign 设置子组件在垂直方向上的对齐格式。默认值：FlexAlign.Start从API version 9开始，该接口支持在ArkTS卡片中使用。

HarmonyOS ArkTS Column组件中可以使用justifyContent调整垂直方向显示方式

@Entry
@Component
struct Index {
  build() {
    Column({ space: 10 }) {
      Row(){
        Image($r('app.media.icon')).width(100).height(100)
      }.width(140)
      .height(140)
      .backgroundColor(Color.Red)
      .alignItems(VerticalAlign.Center)
      .justifyContent(FlexAlign.Center)
    }.width('100%')
    .height('100%')
    .margin({ top: 5 })
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Start)
  }
}

FlexAlign.Start

元素在主轴方向首端对齐，第一个元素与行首对齐，同时后续的元素与前一个对齐。

FlexAlign.Center

元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。

FlexAlign.End

元素在主轴方向尾部对齐，最后一个元素与行尾对齐，其他元素与后一个对齐。

FlexAlign.SpaceBetween

Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。第一个元素与行首对齐，最后一个元素与行尾对齐。

FlexAlign.SpaceAround

Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。

FlexAlign.SpaceEvenly

Flex主轴方向均匀分配弹性元素，相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。

回到顶部