1# Row 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @camlostshi--> 5<!--Designer: @lanshouren--> 6<!--Tester: @liuli0427--> 7<!--Adviser: @HelloCrease--> 8 9沿水平方向布局的容器。 10 11> **说明：** 12> 13> 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 14> 15> Row未设置宽度或高度时，在主轴或交叉轴方向上自适应子组件大小。 16 17 18## 子组件 19 20可以包含子组件。 21 22 23## 接口 24### Row 25 26Row(options?: RowOptions) 27 28创建水平方向线性布局容器，可以设置子组件的间距，间距类型为number或string类型。 29 30> **说明：** 31> 32> 在复杂界面中使用多组件嵌套时，若布局组件的嵌套层数过深或嵌套的组件数量过多，将会产生额外开销。建议通过移除冗余节点、利用布局边界减少布局计算、合理采用渲染控制语法及布局组件方法来优化性能。最佳实践请参考[合理使用布局](https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-improve-layout-performance)。 33 34**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 35 36**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 37 38**系统能力：** SystemCapability.ArkUI.ArkUI.Full 39 40**参数：** 41 42| 参数名 | 类型 | 必填 | 说明 | 43| -------- | -------- | -------- | -------- | 44| options | [RowOptions<sup>18+</sup>](#rowoptions18对象说明) | 否 | 横向布局元素间距。 | 45 46### Row<sup>18+</sup> 47Row(options?: RowOptions | RowOptionsV2) 48 49创建水平方向线性布局容器，可以设置子组件的间距，间距类型为number、string或Resource类型。 50 51**卡片能力：** 从API version 18开始，该接口支持在ArkTS卡片中使用。 52 53**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 54 55**系统能力：** SystemCapability.ArkUI.ArkUI.Full 56 57**参数：** 58 59| 参数名 | 类型 | 必填 | 说明 | 60| -------- | -------- | -------- | -------- | 61| options | [RowOptions](#rowoptions18对象说明) \| [RowOptionsV2](#rowoptionsv218对象说明) | 否 | 横向布局元素间距。 | 62 63## RowOptions<sup>18+</sup>对象说明 64 65设置Row组件的子组件间距属性。 66 67> **说明：** 68> 69> 为规范匿名对象的定义，API 18版本修改了此处的元素定义。其中，保留了历史匿名对象的起始版本信息，会出现外层元素@since版本号高于内层元素版本号的情况，但这不影响接口的使用。 70 71**卡片能力：** 从API version 18开始，该接口支持在ArkTS卡片中使用。 72 73**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 74 75**系统能力：** SystemCapability.ArkUI.ArkUI.Full 76 77| 名称 | 类型 | 只读 | 可选 | 说明 | 78| -------- | -------- | -------- | -------- | -------- | 79| space<sup>7+</sup> | string \| number | 否 | 是 | 横向布局元素间距。<br/>从API version 9开始，space为负数或者justifyContent设置为FlexAlign.SpaceBetween、FlexAlign.SpaceAround、FlexAlign.SpaceEvenly时不生效。<br/>默认值：0，单位vp <br />非法值：按默认值处理。<br/>**说明：** <br/>space取值是大于等于0的数字，或者可以转换为数字的字符串。<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 80 81## RowOptionsV2<sup>18+</sup>对象说明 82 83设置Row组件的子组件间距属性。间距类型SpaceType支持number、string或Resource类型。 84 85**卡片能力：** 从API version 18开始，该接口支持在ArkTS卡片中使用。 86 87**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 88 89**系统能力：** SystemCapability.ArkUI.ArkUI.Full 90 91| 名称 | 类型 | 只读 | 可选 | 说明 | 92| -------- | -------- | -------- | -------- | -------- | 93| space | [SpaceType](ts-container-column.md#spacetype18) | 否 | 是 | 横向布局元素间距。<br/>space为负数或者justifyContent设置为FlexAlign.SpaceBetween、FlexAlign.SpaceAround、FlexAlign.SpaceEvenly时不生效。<br/>默认值：0，单位vp <br />非法值：按默认值处理。<br/>**说明：** <br/>space取值是大于等于0的数字，或者可以转换为数字的字符串，或者可以转换为数字的Resource类型数据。| 94 95## 属性 96 97除支持[通用属性](ts-component-general-attributes.md)外，还支持以下属性： 98 99### alignItems 100 101alignItems(value: VerticalAlign) 102 103设置子组件在垂直方向上的对齐格式。 104 105**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 106 107**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 108 109**系统能力：** SystemCapability.ArkUI.ArkUI.Full 110 111**参数：** 112 113| 参数名 | 类型 | 必填 | 说明 | 114| ------ | --------------------------------------------------- | ---- | ------------------------------------------------------------ | 115| value | [VerticalAlign](ts-appendix-enums.md#verticalalign) | 是 | 子组件在垂直方向上的对齐格式。<br/>默认值：VerticalAlign.Center | 116 117### justifyContent<sup>8+</sup> 118 119justifyContent(value: FlexAlign) 120 121设置子组件在水平方向上的对齐格式。 122 123**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 124 125**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 126 127**系统能力：** SystemCapability.ArkUI.ArkUI.Full 128 129**参数：** 130 131| 参数名 | 类型 | 必填 | 说明 | 132| ------ | ------------------------------------------- | ---- | ---------------------------------------------------------- | 133| value | [FlexAlign](ts-appendix-enums.md#flexalign) | 是 | 子组件在水平方向上的对齐格式。<br/>默认值：FlexAlign.Start | 134 135> **说明：** 136> 137> Row布局时若子组件不设置[flexShrink](ts-universal-attributes-flex-layout.md#flexshrink)则默认不会压缩子组件，即所有子组件主轴大小累加可超过容器主轴，此时FlexAlign.Center和FlexAlign.End会失效。 138 139### reverse<sup>12+</sup> 140 141reverse(isReversed: Optional\<boolean\>) 142 143设置子组件在水平方向上的排列是否反转。 144 145**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 146 147**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 148 149**系统能力：** SystemCapability.ArkUI.ArkUI.Full 150 151**参数：** 152 153| 参数名 | 类型 | 必填 | 说明 | 154| ------ | ------------------------------------------- | ---- | ---------------------------------------------------------- | 155| isReversed | Optional\<boolean\> | 是 | 子组件在水平方向上的排列是否反转。<br/>默认值：true，设置true表示子组件在水平方向上反转排列，设置false表示子组件在水平方向上正序排列。 | 156 157> **说明：** 158> 159> 若未设置reverse属性，主轴方向不反转；若设置了reverse属性，且参数值为undefined，则视为默认值true，主轴方向反转。<br/>由于主轴排列方向受通用属性direction影响，若设置了direction属性，则当reverse属性设置为true时，总在direction属性生效的结果上再做一次反转。 160 161## 事件 162 163支持[通用事件](ts-component-general-events.md)。 164 165## 示例 166 167设置水平方向的布局属性，如间距、对齐方式等。 168 169```json 170// resources/base/element/string.json 171{ 172 "string": [ 173 { 174 "name": "stringSpace", 175 "value": "5" 176 } 177 ] 178} 179``` 180 181```ts 182// xxx.ets 183@Entry 184@Component 185struct RowExample { 186 build() { 187 Column({ space: 5 }) { 188 // 设置子组件水平方向的间距为5 189 Text('space').width('90%') 190 Row({ space: 5 }) { 191 Row().width('30%').height(50).backgroundColor(0xAFEEEE) 192 Row().width('30%').height(50).backgroundColor(0x00FFFF) 193 }.width('90%').height(107).border({ width: 1 }) 194 195 // 通过资源引用方式设置子组件水平方向的间距 196 Text('Resource space').width('90%') 197 Row({ space: $r("app.string.stringSpace") }) { 198 Row().width('30%').height(50).backgroundColor(0xAFEEEE) 199 Row().width('30%').height(50).backgroundColor(0x00FFFF) 200 }.width('90%').height(107).border({ width: 1 }) 201 202 // 设置子元素垂直方向对齐方式 203 Text('alignItems(Bottom)').width('90%') 204 Row() { 205 Row().width('30%').height(50).backgroundColor(0xAFEEEE) 206 Row().width('30%').height(50).backgroundColor(0x00FFFF) 207 }.width('90%').alignItems(VerticalAlign.Bottom).height('15%').border({ width: 1 }) 208 209 Text('alignItems(Center)').width('90%') 210 Row() { 211 Row().width('30%').height(50).backgroundColor(0xAFEEEE) 212 Row().width('30%').height(50).backgroundColor(0x00FFFF) 213 }.width('90%').alignItems(VerticalAlign.Center).height('15%').border({ width: 1 }) 214 215 // 设置子元素水平方向对齐方式 216 Text('justifyContent(End)').width('90%') 217 Row() { 218 Row().width('30%').height(50).backgroundColor(0xAFEEEE) 219 Row().width('30%').height(50).backgroundColor(0x00FFFF) 220 }.width('90%').border({ width: 1 }).justifyContent(FlexAlign.End) 221 222 Text('justifyContent(Center)').width('90%') 223 Row() { 224 Row().width('30%').height(50).backgroundColor(0xAFEEEE) 225 Row().width('30%').height(50).backgroundColor(0x00FFFF) 226 }.width('90%').border({ width: 1 }).justifyContent(FlexAlign.Center) 227 }.width('100%') 228 } 229} 230``` 231 232
