Row

About 3 min

Row

沿水平方向布局容器。

权限列表

子组件

可以包含子组件。

接口

Row(options?: { space?: Length })

  • 参数

    参数名

    参数类型

    必填

    默认值

    参数描述

    space

    Length

    0

    横向布局元素间距。

属性

名称

参数类型

默认值

描述

alignItems

VerticalAlign

Center

在垂直方向上子组件的对齐格式。

  • VerticalAlign枚举说明

    名称

    描述

    Top

    顶部对齐。

    Center

    居中对齐,默认对齐方式。

    Bottom

    底部对齐。

示例

@Entry
@Component
struct RowExample {
  build() {
    Column({ space: 5 }) {
      Text('space').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Row({ space: 20 }) {
        Row().width(150).height(50).backgroundColor(0xAFEEEE)
        Row().width(150).height(50).backgroundColor(0x00FFFF)
      }.width(321).height(52).border({ width: 1 })

      Text('alignItems(Bottom)').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Row() {
        Row().width('50%').height(50).backgroundColor(0xAFEEEE)
        Row().width('50%').height(50).backgroundColor(0x00FFFF)
      }.alignItems(VerticalAlign.Bottom).width('90%').height(100).border({ width: 1 })

      Text('alignItems(Top)').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Row() {
        Row().width('50%').height(50).backgroundColor(0xAFEEEE)
        Row().width('50%').height(50).backgroundColor(0x00FFFF)
      }.alignItems(VerticalAlign.Top).width('90%').height(100).border({ width: 1 })
    }.width('100%')
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25