1# Row 2 3The **Row** component lays out child components horizontally. 4 5> **NOTE** 6> 7> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 8 9 10## Child Components 11 12Supported 13 14 15## APIs 16### Row 17 18Row(options?: RowOptions) 19 20Creates a horizontal linear layout container. You can set the spacing between child components, which can be of type number or string. 21 22**Widget capability**: This API can be used in ArkTS widgets since API version 9. 23 24**Atomic service API**: This API can be used in atomic services since API version 11. 25 26**System capability**: SystemCapability.ArkUI.ArkUI.Full 27 28**Parameters** 29 30| Name| Type| Mandatory| Description| 31| -------- | -------- | -------- | -------- | 32| options | [RowOptions](#rowoptions14) | No| Spacing between child components.| 33 34### Row<sup>16+</sup> 35Row(options?: RowOptions | RowOptionsV2) 36 37Creates a horizontal linear layout container. You can set the spacing between child components, which can be of type number, string, or Resource. 38 39**Widget capability**: This API can be used in ArkTS widgets since API version 16. 40 41**Atomic service API**: This API can be used in atomic services since API version 16. 42 43**System capability**: SystemCapability.ArkUI.ArkUI.Full 44 45**Parameters** 46 47| Name| Type| Mandatory| Description| 48| -------- | -------- | -------- | -------- | 49| options | [RowOptions](#rowoptions14) \| [RowOptionsV2](#rowoptionsv216) | No| Spacing between child components.| 50 51## RowOptions<sup>14+</sup> 52 53Defines the spacing properties for child components used for constructing a **Row** component. 54 55**Widget capability**: This API can be used in ArkTS widgets since API version 14. 56 57**Atomic service API**: This API can be used in atomic services since API version 14. 58 59**System capability**: SystemCapability.ArkUI.ArkUI.Full 60 61| Name| Type| Mandatory| Description| 62| -------- | -------- | -------- | -------- | 63| space | number \| string | No| Spacing between child components.<br>Since API version 9, this parameter does not take effect when it is set to a negative number or when **justifyContent** is set to **FlexAlign.SpaceBetween**, **FlexAlign.SpaceAround** or **FlexAlign.SpaceEvenly**.<br>Default value: **0**, in vp<br>**NOTE**<br>The value of **space** can be a number greater than or equal to 0 or a string that can be converted to a number.| 64 65## RowOptionsV2<sup>16+</sup> 66 67Defines the spacing properties for child components used for constructing a **Row** component. 68 69**Widget capability**: This API can be used in ArkTS widgets since API version 16. 70 71**Atomic service API**: This API can be used in atomic services since API version 16. 72 73**System capability**: SystemCapability.ArkUI.ArkUI.Full 74 75| Name| Type| Mandatory| Description| 76| -------- | -------- | -------- | -------- | 77| space | [SpaceType](ts-container-column.md#spacetype16) | No| Horizontal spacing between two adjacent child components.<br>This parameter does not take effect if the value specified is a negative number, or if **justifyContent** is set to **FlexAlign.SpaceBetween**, **FlexAlign.SpaceAround**, or **FlexAlign.SpaceEvenly**.<br>Default value: **0**, in vp<br>**NOTE**<br>The value of **space** can be a number greater than or equal to 0, a string that can be converted to a number, or a Resource type that can be converted to a number.| 78 79## Attributes 80 81In addition to the [universal attributes](ts-component-general-attributes.md), the following attributes are supported. 82 83### alignItems 84 85alignItems(value: VerticalAlign) 86 87Sets the alignment mode of child components in the vertical direction. 88 89**Widget capability**: This API can be used in ArkTS widgets since API version 9. 90 91**Atomic service API**: This API can be used in atomic services since API version 11. 92 93**System capability**: SystemCapability.ArkUI.ArkUI.Full 94 95**Parameters** 96 97| Name| Type | Mandatory| Description | 98| ------ | --------------------------------------------------- | ---- | ------------------------------------------------------------ | 99| value | [VerticalAlign](ts-appendix-enums.md#verticalalign) | Yes | Alignment mode of child components in the vertical direction.<br>Default value: **VerticalAlign.Center**| 100 101### justifyContent<sup>8+</sup> 102 103justifyContent(value: FlexAlign) 104 105Sets the alignment mode of the child components in the horizontal direction. 106 107**Widget capability**: This API can be used in ArkTS widgets since API version 9. 108 109**Atomic service API**: This API can be used in atomic services since API version 11. 110 111**System capability**: SystemCapability.ArkUI.ArkUI.Full 112 113**Parameters** 114 115| Name| Type | Mandatory| Description | 116| ------ | ------------------------------------------- | ---- | ---------------------------------------------------------- | 117| value | [FlexAlign](ts-appendix-enums.md#flexalign) | Yes | Alignment mode of child components in the horizontal direction.<br>Default value: **FlexAlign.Start**| 118 119> **NOTE** 120> 121> During row layout, child components do not shrink if [flexShrink](ts-universal-attributes-flex-layout.md#flexshrink) is not set for them. In this case, the total size of the child components on the main axis can exceed the size of the container on the main axis. 122 123### reverse<sup>12+</sup> 124 125reverse(isReversed: Optional\<boolean\>) 126 127Sets whether to reverse the arrangement of child components on the main axis (horizontal direction). 128 129**Widget capability**: This API can be used in ArkTS widgets since API version 12. 130 131**Atomic service API**: This API can be used in atomic services since API version 12. 132 133**System capability**: SystemCapability.ArkUI.ArkUI.Full 134 135**Parameters** 136 137| Name| Type | Mandatory| Description | 138| ------ | ------------------------------------------- | ---- | ---------------------------------------------------------- | 139| isReversed | Optional\<boolean\> | Yes | Whether whether to reverse the arrangement of child components on the main axis (horizontal direction).<br>Default value: **true**| 140 141> **NOTE** 142> 143> If the **reverse** attribute is not set, the arrangement on the main axis remains in the normal order. If the attribute is set to **undefined**, it defaults to **true**, which reverses the arrangement on the main axis.<br>Keep in mind that the main axis arrangement direction is also affected by the **direction** attribute. If **reverse** is set to **true**, it effectively reverses the arrangement that results from the **direction** attribute settings. 144 145## Events 146 147The [universal events](ts-component-general-events.md) are supported. 148 149## Example 150 151This example demonstrates how to set horizontal layout properties, such as spacing and alignment, using the **Row** component. 152 153```json 154// resources/base/element/string.json 155{ 156 "string": [ 157 { 158 "name": "stringSpace", 159 "value": "5" 160 } 161 ] 162} 163``` 164 165```ts 166// xxx.ets 167@Entry 168@Component 169struct RowExample { 170 build() { 171 Column({ space: 5 }) { 172 // Set the horizontal spacing between two adjacent child components to 5. 173 Text('space').width('90%') 174 Row({ space: 5 }) { 175 Row().width('30%').height(50).backgroundColor(0xAFEEEE) 176 Row().width('30%').height(50).backgroundColor(0x00FFFF) 177 }.width('90%').height(107).border({ width: 1 }) 178 179 // Set the spacing between child components using the Resource type. 180 Text('Resource space').width('90%') 181 Row({ space: $r("app.string.stringSpace") }) { 182 Row().width('30%').height(50).backgroundColor(0xAFEEEE) 183 Row().width('30%').height(50).backgroundColor(0x00FFFF) 184 }.width('90%').height(107).border({ width: 1 }) 185 186 // Set the alignment mode of the child components in the vertical direction. 187 Text('alignItems(Bottom)').width('90%') 188 Row() { 189 Row().width('30%').height(50).backgroundColor(0xAFEEEE) 190 Row().width('30%').height(50).backgroundColor(0x00FFFF) 191 }.width('90%').alignItems(VerticalAlign.Bottom).height('15%').border({ width: 1 }) 192 193 Text('alignItems(Center)').width('90%') 194 Row() { 195 Row().width('30%').height(50).backgroundColor(0xAFEEEE) 196 Row().width('30%').height(50).backgroundColor(0x00FFFF) 197 }.width('90%').alignItems(VerticalAlign.Center).height('15%').border({ width: 1 }) 198 199 // Set the alignment mode of the child components in the horizontal direction. 200 Text('justifyContent(End)').width('90%') 201 Row() { 202 Row().width('30%').height(50).backgroundColor(0xAFEEEE) 203 Row().width('30%').height(50).backgroundColor(0x00FFFF) 204 }.width('90%').border({ width: 1 }).justifyContent(FlexAlign.End) 205 206 Text('justifyContent(Center)').width('90%') 207 Row() { 208 Row().width('30%').height(50).backgroundColor(0xAFEEEE) 209 Row().width('30%').height(50).backgroundColor(0x00FFFF) 210 }.width('90%').border({ width: 1 }).justifyContent(FlexAlign.Center) 211 }.width('100%') 212 } 213} 214``` 215 216 217
