1# Row 2 3沿水平方向布局容器。 4 5> **说明：** 6> 7> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 子组件 11 12可以包含子组件。 13 14 15## 接口 16 17Row(value?:{space?: number | string }) 18 19从API version 9开始，该接口支持在ArkTS卡片中使用。 20 21**参数：** 22 23| 参数名 | 参数类型 | 必填 | 参数描述 | 24| -------- | -------- | -------- | -------- | 25| space | number \| string | 否 | 横向布局元素间距。<br/>从API version 9开始，space为负数或者justifyContent设置为FlexAlign.SpaceBetween、FlexAlign.SpaceAround、FlexAlign.SpaceEvenly时不生效。<br/>默认值：0，单位vp<br/>**说明：** <br/>可选值为大于等于0的数字，或者可以转换为数字的字符串。 | 26 27 28## 属性 29 30除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： 31 32| 名称 | 参数类型 | 描述 | 33| -------- | -------- | -------- | 34| alignItems | [VerticalAlign](ts-appendix-enums.md#verticalalign) | 设置子组件在垂直方向上的对齐格式。<br/>默认值：VerticalAlign.Center <br/>从API version 9开始，该接口支持在ArkTS卡片中使用。| 35| justifyContent<sup>8+</sup> | [FlexAlign](ts-appendix-enums.md#flexalign) | 设置子组件在水平方向上的对齐格式。<br/>默认值：FlexAlign.Start <br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 36 37> **说明：** 38> 39> Row布局时若子组件不设置[flexShrink](ts-universal-attributes-flex-layout.md#flexshrink)则默认不会压缩子组件，即所有子组件主轴大小累加可超过容器主轴。 40 41## 事件 42 43支持[通用事件](ts-universal-events-click.md)。 44 45## 示例 46 47```ts 48// xxx.ets 49@Entry 50@Component 51struct RowExample { 52 build() { 53 Column({ space: 5 }) { 54 // 设置子组件水平方向的间距为5 55 Text('space').width('90%') 56 Row({ space: 5 }) { 57 Row().width('30%').height(50).backgroundColor(0xAFEEEE) 58 Row().width('30%').height(50).backgroundColor(0x00FFFF) 59 }.width('90%').height(107).border({ width: 1 }) 60 61 // 设置子元素垂直方向对齐方式 62 Text('alignItems(Bottom)').width('90%') 63 Row() { 64 Row().width('30%').height(50).backgroundColor(0xAFEEEE) 65 Row().width('30%').height(50).backgroundColor(0x00FFFF) 66 }.width('90%').alignItems(VerticalAlign.Bottom).height('15%').border({ width: 1 }) 67 68 Text('alignItems(Center)').width('90%') 69 Row() { 70 Row().width('30%').height(50).backgroundColor(0xAFEEEE) 71 Row().width('30%').height(50).backgroundColor(0x00FFFF) 72 }.width('90%').alignItems(VerticalAlign.Center).height('15%').border({ width: 1 }) 73 74 // 设置子元素水平方向对齐方式 75 Text('justifyContent(End)').width('90%') 76 Row() { 77 Row().width('30%').height(50).backgroundColor(0xAFEEEE) 78 Row().width('30%').height(50).backgroundColor(0x00FFFF) 79 }.width('90%').border({ width: 1 }).justifyContent(FlexAlign.End) 80 81 Text('justifyContent(Center)').width('90%') 82 Row() { 83 Row().width('30%').height(50).backgroundColor(0xAFEEEE) 84 Row().width('30%').height(50).backgroundColor(0x00FFFF) 85 }.width('90%').border({ width: 1 }).justifyContent(FlexAlign.Center) 86 }.width('100%') 87 } 88} 89``` 90 91 92
