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 17Row(value?:{space?: string | number }) 18 19**Widget capability**: This API can be used in ArkTS widgets since API version 9. 20 21**Atomic service API**: This API can be used in atomic services since API version 11. 22 23**System capability**: SystemCapability.ArkUI.ArkUI.Full 24 25**Parameters** 26 27| Name| Type| Mandatory| Description| 28| -------- | -------- | -------- | -------- | 29| value | {space?: string \| number } | No| Horizontal spacing between two adjacent 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 can be a number greater than or equal to 0 or a string that can be converted to a number.| 30 31 32## Attributes 33 34In addition to the [universal attributes](ts-component-general-attributes.md), the following attributes are supported. 35 36### alignItems 37 38alignItems(value: VerticalAlign) 39 40Sets the alignment mode of child components in the vertical direction. 41 42**Widget capability**: This API can be used in ArkTS widgets since API version 9. 43 44**Atomic service API**: This API can be used in atomic services since API version 11. 45 46**System capability**: SystemCapability.ArkUI.ArkUI.Full 47 48**Parameters** 49 50| Name| Type | Mandatory| Description | 51| ------ | --------------------------------------------------- | ---- | ------------------------------------------------------------ | 52| value | [VerticalAlign](ts-appendix-enums.md#verticalalign) | Yes | Alignment mode of child components in the vertical direction.<br>Default value: **VerticalAlign.Center**| 53 54### justifyContent<sup>8+</sup> 55 56justifyContent(value: FlexAlign) 57 58Sets the alignment mode of the child components in the horizontal direction. 59 60**Widget capability**: This API can be used in ArkTS widgets since API version 9. 61 62**Atomic service API**: This API can be used in atomic services since API version 11. 63 64**System capability**: SystemCapability.ArkUI.ArkUI.Full 65 66**Parameters** 67 68| Name| Type | Mandatory| Description | 69| ------ | ------------------------------------------- | ---- | ---------------------------------------------------------- | 70| value | [FlexAlign](ts-appendix-enums.md#flexalign) | Yes | Alignment mode of child components in the horizontal direction.<br>Default value: **FlexAlign.Start**| 71 72> **NOTE** 73> 74> 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. 75 76### reverse<sup>12+</sup> 77 78reverse(isReversed: Optional\<boolean\>) 79 80Sets whether to reverse the arrangement of child components on the main axis (horizontal direction). 81 82**Widget capability**: This API can be used in ArkTS widgets since API version 12. 83 84**Atomic service API**: This API can be used in atomic services since API version 12. 85 86**System capability**: SystemCapability.ArkUI.ArkUI.Full 87 88**Parameters** 89 90| Name| Type | Mandatory| Description | 91| ------ | ------------------------------------------- | ---- | ---------------------------------------------------------- | 92| isReversed | Optional\<boolean\> | Yes | Whether whether to reverse the arrangement of child components on the main axis (horizontal direction).<br>Default value: **true**| 93 94> **NOTE** 95> 96> 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. 97 98## Events 99 100The [universal events](ts-component-general-events.md) are supported. 101 102## Example 103 104This example demonstrates how to set horizontal layout properties, such as spacing and alignment, using the **Row** component. 105 106```json 107// resources/base/element/string.json 108{ 109 "string": [ 110 { 111 "name": "stringSpace", 112 "value": "5" 113 } 114 ] 115} 116``` 117 118```ts 119// xxx.ets 120@Entry 121@Component 122struct RowExample { 123 build() { 124 Column({ space: 5 }) { 125 // Set the horizontal spacing between two adjacent child components to 5. 126 Text('space').width('90%') 127 Row({ space: 5 }) { 128 Row().width('30%').height(50).backgroundColor(0xAFEEEE) 129 Row().width('30%').height(50).backgroundColor(0x00FFFF) 130 }.width('90%').height(107).border({ width: 1 }) 131 132 // Set the alignment mode of the child components in the vertical direction. 133 Text('alignItems(Bottom)').width('90%') 134 Row() { 135 Row().width('30%').height(50).backgroundColor(0xAFEEEE) 136 Row().width('30%').height(50).backgroundColor(0x00FFFF) 137 }.width('90%').alignItems(VerticalAlign.Bottom).height('15%').border({ width: 1 }) 138 139 Text('alignItems(Center)').width('90%') 140 Row() { 141 Row().width('30%').height(50).backgroundColor(0xAFEEEE) 142 Row().width('30%').height(50).backgroundColor(0x00FFFF) 143 }.width('90%').alignItems(VerticalAlign.Center).height('15%').border({ width: 1 }) 144 145 // Set the alignment mode of the child components in the horizontal direction. 146 Text('justifyContent(End)').width('90%') 147 Row() { 148 Row().width('30%').height(50).backgroundColor(0xAFEEEE) 149 Row().width('30%').height(50).backgroundColor(0x00FFFF) 150 }.width('90%').border({ width: 1 }).justifyContent(FlexAlign.End) 151 152 Text('justifyContent(Center)').width('90%') 153 Row() { 154 Row().width('30%').height(50).backgroundColor(0xAFEEEE) 155 Row().width('30%').height(50).backgroundColor(0x00FFFF) 156 }.width('90%').border({ width: 1 }).justifyContent(FlexAlign.Center) 157 }.width('100%') 158 } 159} 160``` 161 162 163
