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 | string \| number | 否 | 横向布局元素间距。<br/>从API version 9开始，space为负数或者justifyContent设置为FlexAlign.SpaceBetween、FlexAlign.SpaceAround、FlexAlign.SpaceEvenly时不生效。<br/>默认值：0，单位vp<br/>**说明：** <br/>可选值为大于等于0的数字，或者可以转换为数字的字符串。 | 26 27 28## 属性 29 30| 名称 | 参数类型 | 描述 | 31| -------- | -------- | -------- | 32| alignItems | [VerticalAlign](ts-appendix-enums.md#verticalalign) | 设置子组件在垂直方向上的对齐格式。<br/>默认值：VerticalAlign.Center <br/>从API version 9开始，该接口支持在ArkTS卡片中使用。| 33| justifyContent<sup>8+</sup> | [FlexAlign](ts-appendix-enums.md#flexalign) | 设置子组件在水平方向上的对齐格式。<br/>FlexAlign.Start <br/>从API version 9开始，该接口支持在ArkTS卡片中使用。| 34 35 36## 示例 37 38```ts 39// xxx.ets 40@Entry 41@Component 42struct RowExample { 43 build() { 44 Column({ space: 5 }) { 45 // 设置子组件水平方向的间距为5 46 Text('space').fontSize(9).fontColor(0xCCCCCC).width('90%') 47 Row({ space: 5 }) { 48 Row().width('30%').height(50).backgroundColor(0xAFEEEE) 49 Row().width('30%').height(50).backgroundColor(0x00FFFF) 50 }.width('90%').height(107).border({ width: 1 }) 51 52 // 设置子元素垂直方向对齐方式 53 Text('alignItems(Bottom)').fontSize(9).fontColor(0xCCCCCC).width('90%') 54 Row() { 55 Row().width('30%').height(50).backgroundColor(0xAFEEEE) 56 Row().width('30%').height(50).backgroundColor(0x00FFFF) 57 }.width('90%').alignItems(VerticalAlign.Bottom).height('15%').border({ width: 1 }) 58 59 Text('alignItems(Center)').fontSize(9).fontColor(0xCCCCCC).width('90%') 60 Row() { 61 Row().width('30%').height(50).backgroundColor(0xAFEEEE) 62 Row().width('30%').height(50).backgroundColor(0x00FFFF) 63 }.width('90%').alignItems(VerticalAlign.Center).height('15%').border({ width: 1 }) 64 65 // 设置子元素水平方向对齐方式 66 Text('justifyContent(End)').fontSize(9).fontColor(0xCCCCCC).width('90%') 67 Row() { 68 Row().width('30%').height(50).backgroundColor(0xAFEEEE) 69 Row().width('30%').height(50).backgroundColor(0x00FFFF) 70 }.width('90%').border({ width: 1 }).justifyContent(FlexAlign.End) 71 72 Text('justifyContent(Center)').fontSize(9).fontColor(0xCCCCCC).width('90%') 73 Row() { 74 Row().width('30%').height(50).backgroundColor(0xAFEEEE) 75 Row().width('30%').height(50).backgroundColor(0x00FFFF) 76 }.width('90%').border({ width: 1 }).justifyContent(FlexAlign.Center) 77 }.width('100%') 78 } 79} 80``` 81 82 83
