1# Row
2
3沿水平方向布局容器。
4
5>  **说明：**
6>
7>  该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
8
9
10## 子组件
11
12可以包含子组件。
13
14
15## 接口
16
17Row(value?:{space?:  string | number })
18
19**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。
20
21**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
22
23**系统能力：** SystemCapability.ArkUI.ArkUI.Full
24
25**参数：**
26
27| 参数名 | 类型 | 必填 | 说明 |
28| -------- | -------- | -------- | -------- |
29| value | {space?:  string&nbsp;\|&nbsp;number } | 否 | 横向布局元素间距。<br/>从API version 9开始，space为负数或者justifyContent设置为FlexAlign.SpaceBetween、FlexAlign.SpaceAround、FlexAlign.SpaceEvenly时不生效。<br/>默认值：0，单位vp<br/>**说明：** <br/>可选值为大于等于0的数字，或者可以转换为数字的字符串。 |
30
31
32## 属性
33
34除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
35
36### alignItems
37
38alignItems(value: VerticalAlign)
39
40设置子组件在垂直方向上的对齐格式。
41
42**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。
43
44**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
45
46**系统能力：** SystemCapability.ArkUI.ArkUI.Full
47
48**参数：**
49
50| 参数名 | 类型                                                | 必填 | 说明                                                         |
51| ------ | --------------------------------------------------- | ---- | ------------------------------------------------------------ |
52| value  | [VerticalAlign](ts-appendix-enums.md#verticalalign) | 是   | 子组件在垂直方向上的对齐格式。<br/>默认值：VerticalAlign.Center |
53
54### justifyContent<sup>8+</sup>
55
56justifyContent(value: FlexAlign)
57
58设置子组件在水平方向上的对齐格式。
59
60**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。
61
62**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
63
64**系统能力：** SystemCapability.ArkUI.ArkUI.Full
65
66**参数：**
67
68| 参数名 | 类型                                        | 必填 | 说明                                                       |
69| ------ | ------------------------------------------- | ---- | ---------------------------------------------------------- |
70| value  | [FlexAlign](ts-appendix-enums.md#flexalign) | 是   | 子组件在水平方向上的对齐格式。<br/>默认值：FlexAlign.Start |
71
72>  **说明：**
73>
74>  Row布局时若子组件不设置[flexShrink](ts-universal-attributes-flex-layout.md#flexshrink)则默认不会压缩子组件，即所有子组件主轴大小累加可超过容器主轴。
75
76### reverse<sup>12+</sup>
77
78reverse(isReversed: Optional\<boolean\>)
79
80设置子组件在主轴（即水平方向）上的排列是否反转。
81
82**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。
83
84**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
85
86**系统能力：** SystemCapability.ArkUI.ArkUI.Full
87
88**参数：**
89
90| 参数名 | 类型                                        | 必填 | 说明                                                       |
91| ------ | ------------------------------------------- | ---- | ---------------------------------------------------------- |
92| isReversed  | Optional\<boolean\> | 是   | 子组件在主轴（即水平方向）上的排列是否反转。<br/>默认值：true |
93
94>  **说明：**
95>
96>  若未设置reverse属性，主轴方向不反转；若设置了reverse属性，且参数值为undefined，则视为默认值true，主轴方向反转。<br/>由于主轴排列方向受通用属性direction影响，若设置了direction属性，则当reverse属性设置为true时，总在direction属性生效的结果上再做一次反转。
97
98## 事件
99
100支持[通用事件](ts-universal-events-click.md)。
101
102## 示例
103
104设置水平方向的布局属性，如间距、对齐方式等。
105
106```ts
107// xxx.ets
108@Entry
109@Component
110struct RowExample {
111  build() {
112    Column({ space: 5 }) {
113      // 设置子组件水平方向的间距为5
114      Text('space').width('90%')
115      Row({ space: 5 }) {
116        Row().width('30%').height(50).backgroundColor(0xAFEEEE)
117        Row().width('30%').height(50).backgroundColor(0x00FFFF)
118      }.width('90%').height(107).border({ width: 1 })
119
120      // 设置子元素垂直方向对齐方式
121      Text('alignItems(Bottom)').width('90%')
122      Row() {
123        Row().width('30%').height(50).backgroundColor(0xAFEEEE)
124        Row().width('30%').height(50).backgroundColor(0x00FFFF)
125      }.width('90%').alignItems(VerticalAlign.Bottom).height('15%').border({ width: 1 })
126
127      Text('alignItems(Center)').width('90%')
128      Row() {
129        Row().width('30%').height(50).backgroundColor(0xAFEEEE)
130        Row().width('30%').height(50).backgroundColor(0x00FFFF)
131      }.width('90%').alignItems(VerticalAlign.Center).height('15%').border({ width: 1 })
132
133      // 设置子元素水平方向对齐方式
134      Text('justifyContent(End)').width('90%')
135      Row() {
136        Row().width('30%').height(50).backgroundColor(0xAFEEEE)
137        Row().width('30%').height(50).backgroundColor(0x00FFFF)
138      }.width('90%').border({ width: 1 }).justifyContent(FlexAlign.End)
139
140      Text('justifyContent(Center)').width('90%')
141      Row() {
142        Row().width('30%').height(50).backgroundColor(0xAFEEEE)
143        Row().width('30%').height(50).backgroundColor(0x00FFFF)
144      }.width('90%').border({ width: 1 }).justifyContent(FlexAlign.Center)
145    }.width('100%')
146  }
147}
148```
149
150![row](figures/row.png)
151