【鸿蒙开发】系统组件Row

Row组件

Row沿水平方向布局容器

接口：

Row(value?:{space?: number | string })

参数：

属性：

UI结构示例，1行里包含3行

@Entry
@Component
struct APage {
  build() {
    Row() {
      Row() {
        Text("左部")
          .width('100%')
          .fontColor(Color.White)
          .textAlign(TextAlign.Center)
      }
      .backgroundColor(Color.Red)
      .width(100)
      .height(100)

      Row() {
        Text("中间")
          .width('100%')
          .fontColor(Color.White)
          .textAlign(TextAlign.Center)
      }
      .backgroundColor(Color.Blue)
      .width(100)
      .height(100)

      Row() {
        Text("右部")
          .width('100%')
          .fontColor(Color.White)
          .textAlign(TextAlign.Center)
      }
      .backgroundColor(Color.Pink)
      .width(100)
      .height(100)
    }
    .width('100%')
    .height('100%')
  }
}

水平方向对齐

FlexAlign.Start

@Entry
@Component
struct APage {
  build() {
    Row() {
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Start)
  }
}

FlexAlign.Center

@Entry
@Component
struct APage {
  build() {
    Row() {
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

FlexAlign.End

@Entry
@Component
struct APage {
  build() {
    Row() {
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.End)
  }
}

FlexAlign.SpaceBetween

@Entry
@Component
struct APage {
  build() {
    Row() {
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.SpaceBetween)
  }
}

FlexAlign.SpaceAround

@Entry
@Component
struct APage {
  build() {
    Row() {
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.SpaceAround)
  }
}

FlexAlign.SpaceEvenly

@Entry
@Component
struct APage {
  build() {
    Row() {
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.SpaceEvenly)
  }
}

垂直方向对齐

VerticalAlign.Top

@Entry
@Component
struct APage {
  build() {
    Row() {
    }
    .width('100%')
    .height('100%')
    .alignItems(VerticalAlign.Top)
  }
}

VerticalAlign.Center

@Entry
@Component
struct APage {
  build() {
    Row() {
    }
    .width('100%')
    .height('100%')
    .alignItems(VerticalAlign.Center)
  }
}

VerticalAlign.Bottom

@Entry
@Component
struct APage {
  build() {
    Row() {
    }
    .width('100%')
    .height('100%')
    .alignItems(VerticalAlign.Bottom)
  }
}