• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Row
2
3沿水平方向布局容器。
4
5>  **说明：**
6>
7>  该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
8
9
10## 子组件
11
12可以包含子组件。
13
14
15## 接口
16
17Row(value?:{space?:  number | string })
18
19从API version 9开始，该接口支持在ArkTS卡片中使用。
20
21**参数：**
22
23| 参数名 | 参数类型 | 必填 | 参数描述 |
24| -------- | -------- | -------- | -------- |
25| space | string&nbsp;\|&nbsp;number | 否 | 横向布局元素间距。<br/>从API version 9开始，space为负数或者justifyContent设置为FlexAlign.SpaceBetween、FlexAlign.SpaceAround、FlexAlign.SpaceEvenly时不生效。<br/>默认值：0，单位vp<br/>**说明：** <br/>可选值为大于等于0的数字，或者可以转换为数字的字符串。 |
26
27
28## 属性
29
30| 名称 | 参数类型 | 描述 |
31| -------- | -------- | -------- |
32| alignItems | [VerticalAlign](ts-appendix-enums.md#verticalalign) | 设置子组件在垂直方向上的对齐格式。<br/>默认值：VerticalAlign.Center <br/>从API version 9开始，该接口支持在ArkTS卡片中使用。|
33| justifyContent<sup>8+</sup> | [FlexAlign](ts-appendix-enums.md#flexalign) | 设置子组件在水平方向上的对齐格式。<br/>默认值：FlexAlign.Start <br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
34
35>  **说明：**
36>
37>  Row布局时若子组件不设置flexShrink则默认不会压缩子组件，即所有子组件主轴大小累加可超过容器主轴。
38
39
40## 示例
41
42```ts
43// xxx.ets
44@Entry
45@Component
46struct RowExample {
47  build() {
48    Column({ space: 5 }) {
49      // 设置子组件水平方向的间距为5
50      Text('space').width('90%')
51      Row({ space: 5 }) {
52        Row().width('30%').height(50).backgroundColor(0xAFEEEE)
53        Row().width('30%').height(50).backgroundColor(0x00FFFF)
54      }.width('90%').height(107).border({ width: 1 })
55
56      // 设置子元素垂直方向对齐方式
57      Text('alignItems(Bottom)').width('90%')
58      Row() {
59        Row().width('30%').height(50).backgroundColor(0xAFEEEE)
60        Row().width('30%').height(50).backgroundColor(0x00FFFF)
61      }.width('90%').alignItems(VerticalAlign.Bottom).height('15%').border({ width: 1 })
62
63      Text('alignItems(Center)').width('90%')
64      Row() {
65        Row().width('30%').height(50).backgroundColor(0xAFEEEE)
66        Row().width('30%').height(50).backgroundColor(0x00FFFF)
67      }.width('90%').alignItems(VerticalAlign.Center).height('15%').border({ width: 1 })
68
69      // 设置子元素水平方向对齐方式
70      Text('justifyContent(End)').width('90%')
71      Row() {
72        Row().width('30%').height(50).backgroundColor(0xAFEEEE)
73        Row().width('30%').height(50).backgroundColor(0x00FFFF)
74      }.width('90%').border({ width: 1 }).justifyContent(FlexAlign.End)
75
76      Text('justifyContent(Center)').width('90%')
77      Row() {
78        Row().width('30%').height(50).backgroundColor(0xAFEEEE)
79        Row().width('30%').height(50).backgroundColor(0x00FFFF)
80      }.width('90%').border({ width: 1 }).justifyContent(FlexAlign.Center)
81    }.width('100%')
82  }
83}
84```
85
86![row](figures/row.png)
87