Row组件
Row沿水平方向布局容器
接口:
Row(value?:{space?: number | string })
参数:
参数名 | 参数类型 | 必填 | 参数描述 |
---|---|---|---|
space | string | number | 否 | 横向布局元素间距。 从API version 9开始,space为负数或者justifyContent设置为FlexAlign.SpaceBetween、FlexAlign.SpaceAround、FlexAlign.SpaceEvenly时不生效。 默认值:0,单位vp 说明: 可选值为大于等于0的数字,或者可以转换为数字的字符串。 |
属性:
名称 | 参数类型 | 描述 |
---|---|---|
alignItems | VerticalAlign | 设置子组件在垂直方向上的对齐格式。 默认值:VerticalAlign.Center 从API version 9开始,该接口支持在ArkTS卡片中使用。 |
justifyContent8+ | FlexAlign | 设置子组件在水平方向上的对齐格式。 默认值:FlexAlign.Start 从API version 9开始,该接口支持在ArkTS卡片中使用。 |
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)
}
}