• 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?:  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| 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```ts
105// xxx.ets
106@Entry
107@Component
108struct RowExample {
109  build() {
110    Column({ space: 5 }) {
111      // 设置子组件水平方向的间距为5
112      Text('space').width('90%')
113      Row({ space: 5 }) {
114        Row().width('30%').height(50).backgroundColor(0xAFEEEE)
115        Row().width('30%').height(50).backgroundColor(0x00FFFF)
116      }.width('90%').height(107).border({ width: 1 })
117
118      // 设置子元素垂直方向对齐方式
119      Text('alignItems(Bottom)').width('90%')
120      Row() {
121        Row().width('30%').height(50).backgroundColor(0xAFEEEE)
122        Row().width('30%').height(50).backgroundColor(0x00FFFF)
123      }.width('90%').alignItems(VerticalAlign.Bottom).height('15%').border({ width: 1 })
124
125      Text('alignItems(Center)').width('90%')
126      Row() {
127        Row().width('30%').height(50).backgroundColor(0xAFEEEE)
128        Row().width('30%').height(50).backgroundColor(0x00FFFF)
129      }.width('90%').alignItems(VerticalAlign.Center).height('15%').border({ width: 1 })
130
131      // 设置子元素水平方向对齐方式
132      Text('justifyContent(End)').width('90%')
133      Row() {
134        Row().width('30%').height(50).backgroundColor(0xAFEEEE)
135        Row().width('30%').height(50).backgroundColor(0x00FFFF)
136      }.width('90%').border({ width: 1 }).justifyContent(FlexAlign.End)
137
138      Text('justifyContent(Center)').width('90%')
139      Row() {
140        Row().width('30%').height(50).backgroundColor(0xAFEEEE)
141        Row().width('30%').height(50).backgroundColor(0x00FFFF)
142      }.width('90%').border({ width: 1 }).justifyContent(FlexAlign.Center)
143    }.width('100%')
144  }
145}
146```
147
148![row](figures/row.png)
149