ts-container-stack.md 2.0 KB
Newer Older
Z
zengyawen 已提交
1 2
# Stack

Z
zengyawen 已提交
3 4
堆叠容器,子组件按照顺序依次入栈,后一个子组件覆盖前一个子组件。

T
fourth  
tianyu 已提交
5 6 7
>  **说明:**
>
>  该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
Z
zengyawen 已提交
8

Z
zengyawen 已提交
9 10

## 子组件
Z
zengyawen 已提交
11 12 13

可以包含子组件。

Z
zengyawen 已提交
14 15 16

## 接口

L
fix doc  
luoying_ace_admin 已提交
17
Stack(value?: { alignContent?: Alignment })
T
fourth  
tianyu 已提交
18

L
lanyill 已提交
19 20
从API version 9开始,该接口支持在ArkTS卡片中使用。

T
fourth  
tianyu 已提交
21
**参数:**
Z
zengyawen 已提交
22

23 24 25 26 27 28 29 30
| 参数名       | 参数类型                                    | 必填 | 参数描述                                                    |
| ------------ | ------------------------------------------- | ---- | ----------------------------------------------------------- |
| alignContent | [Alignment](ts-appendix-enums.md#alignment) | 否   | 设置子组件在容器内的对齐方式。<br/>默认值:Alignment.Center |

## 属性

除支持[通用属性](ts-universal-attributes-size.md)外,还支持以下属性:

Y
yamila 已提交
31 32 33
| 名称         | 参数类型                                    | 描述                                                         |
| ------------ | ------------------------------------------- | ------------------------------------------------------------ |
| alignContent | [Alignment](ts-appendix-enums.md#alignment) | 设置子组件在容器内的对齐方式。<br/>默认值:Alignment.Center<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。<br/>**说明:** <br/>该属性与[通用属性align](ts-universal-attributes-location.md)同时设置时,只有align属性生效。 |
Z
zengyawen 已提交
34 35 36


## 示例
Z
zengyawen 已提交
37

H
geshi  
HelloCrease 已提交
38 39
```ts
// xxx.ets
Z
zengyawen 已提交
40 41 42 43 44 45 46 47 48 49 50 51
@Entry
@Component
struct StackExample {
  build() {
    Stack({ alignContent: Alignment.Bottom }) {
      Text('First child, show in bottom').width('90%').height('100%').backgroundColor(0xd2cab3).align(Alignment.Top)
      Text('Second child, show in top').width('70%').height('60%').backgroundColor(0xc1cbac).align(Alignment.Top)
    }.width('100%').height(150).margin({ top: 5 })
  }
}
```

Y
yamila 已提交
52
![zh-cn_image_0000001219982699](figures/zh-cn_image_0000001219982699.PNG)