ts-container-row.md 2.6 KB
Newer Older
E
ester.zhou 已提交
1
# Row
Z
zengyawen 已提交
2

E
esterzhou 已提交
3 4
> **NOTE**
>
E
ester.zhou 已提交
5
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
Z
zengyawen 已提交
6 7


E
ester.zhou 已提交
8 9 10 11
The **<Row\>** component lays out child components horizontally.


## Required Permissions
Z
zengyawen 已提交
12 13 14

None

E
ester.zhou 已提交
15 16 17 18 19 20 21 22

## Child Components

Supported


## APIs

E
esterzhou 已提交
23
Row(value?:{space?: Length})
E
ester.zhou 已提交
24 25

- Parameters
E
esterzhou 已提交
26
  | Name| Type| Mandatory| Default Value| Description|
E
ester.zhou 已提交
27
  | -------- | -------- | -------- | -------- | -------- |
E
esterzhou 已提交
28
  | space | Length | No| 0 | Space between two adjacent child components in the horizontal layout.|
E
ester.zhou 已提交
29 30 31 32


## Attributes

E
esterzhou 已提交
33
| Name| Type| Default Value| Description|
E
ester.zhou 已提交
34
| -------- | -------- | -------- | -------- |
E
esterzhou 已提交
35 36
| alignItems | [VerticalAlign](ts-appendix-enums.md#verticalalign) | VerticalAlign.Center | Alignment mode of the child components in the vertical direction.|
| justifyContent<sup>8+</sup> | [FlexAlign](ts-appendix-enums.md#flexalign) | FlexAlign.Start | Alignment mode of the child components in the horizontal direction.|
E
ester.zhou 已提交
37 38 39


## Example
Z
zengyawen 已提交
40

E
esterzhou 已提交
41 42
```ts
// xxx.ets
Z
zengyawen 已提交
43 44 45 46 47 48
@Entry
@Component
struct RowExample {
  build() {
    Column({ space: 5 }) {
      Text('space').fontSize(9).fontColor(0xCCCCCC).width('90%')
E
ester.zhou 已提交
49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76
        Row({ space: 5 }) {
          Row().width('30%').height(50).backgroundColor(0xAFEEEE)
          Row().width('30%').height(50).backgroundColor(0x00FFFF)
        }.width('90%').height(107).border({ width: 1 })

        Text('alignItems(Top)').fontSize(9).fontColor(0xCCCCCC).width('90%')
        Row() {
          Row().width('30%').height(50).backgroundColor(0xAFEEEE)
          Row().width('30%').height(50).backgroundColor(0x00FFFF)
        }.alignItems(VerticalAlign.Top).height('15%').border({ width: 1 })

        Text('alignItems(Center)').fontSize(9).fontColor(0xCCCCCC).width('90%')
        Row() {
          Row().width('30%').height(50).backgroundColor(0xAFEEEE)
          Row().width('30%').height(50).backgroundColor(0x00FFFF)
        }.alignItems(VerticalAlign.Center).height('15%').border({ width: 1 })

        Text('justifyContent(End)').fontSize(9).fontColor(0xCCCCCC).width('90%')
        Row() {
          Row().width('30%').height(50).backgroundColor(0xAFEEEE)
          Row().width('30%').height(50).backgroundColor(0x00FFFF)
        }.width('90%').border({ width: 1 }).justifyContent(FlexAlign.End)

        Text('justifyContent(Center)').fontSize(9).fontColor(0xCCCCCC).width('90%')
        Row() {
          Row().width('30%').height(50).backgroundColor(0xAFEEEE)
          Row().width('30%').height(50).backgroundColor(0x00FFFF)
        }.width('90%').border({ width: 1 }).justifyContent(FlexAlign.Center)
Z
zengyawen 已提交
77 78 79 80 81
    }.width('100%')
  }
}
```

E
esterzhou 已提交
82
![en-us_image_0000001174422908](figures/row.png)
新手
引导
客服 返回
顶部