• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Stack
2
3堆叠容器,子组件按照顺序依次入栈,后一个子组件覆盖前一个子组件。
4
5>  **说明:**
6>
7>  该组件从API version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
8
9
10## 子组件
11
12可以包含子组件。
13
14
15## 接口
16
17Stack(options?: StackOptions)
18
19**卡片能力:** 从API version 9开始,该接口支持在ArkTS卡片中使用。
20
21**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
22
23**系统能力:** SystemCapability.ArkUI.ArkUI.Full
24
25**参数:**
26
27| 参数名       | 类型                                    | 必填 | 说明                                                    |
28| ------------ | ------------------------------------------- | ---- | ----------------------------------------------------------- |
29| options | [StackOptions](#stackoptions14对象说明) | 否   | 设置子组件在容器内的对齐方式。 |
30
31## StackOptions<sup>14+</sup>对象说明
32
33**卡片能力:** 从API version 14开始,该接口支持在ArkTS卡片中使用。
34
35**原子化服务API:** 从API version 14开始,该接口支持在原子化服务中使用。
36
37**系统能力:** SystemCapability.ArkUI.ArkUI.Full
38
39| 名称          | 类型            | 必填 | 说明                        |
40| ------------ | --------------- | ---- | --------------------------- |
41| alignContent<sup>7+</sup> | [Alignment](ts-appendix-enums.md#alignment) | 否   | 设置子组件在容器内的对齐方式。<br/>默认值:Alignment.Center<br/>**卡片能力:** 从API version 9开始,该接口支持在ArkTS卡片中使用。<br/>**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 |
42
43## 属性
44
45除支持[通用属性](ts-component-general-attributes.md)外,还支持以下属性:
46
47### alignContent
48
49alignContent(value: Alignment)
50
51设置所有子组件在容器内的对齐方式。该属性与[通用属性align](ts-universal-attributes-location.md#align)同时设置时,后设置的属性生效。
52
53**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
54
55**卡片能力:** 从API version 9开始,该接口支持在ArkTS卡片中使用。
56
57**系统能力:** SystemCapability.ArkUI.ArkUI.Full
58
59**参数:**
60
61| 参数名 | 类型                                        | 必填 | 说明                                                        |
62| ------ | ------------------------------------------- | ---- | ----------------------------------------------------------- |
63| value  | [Alignment](ts-appendix-enums.md#alignment) | 是   | 所有子组件在容器内的对齐方式。<br/>默认值:Alignment.Center |
64
65
66## 示例
67
68Stack的alignContent设置为Alignment.Bottom条件下子组件显示效果。
69
70```ts
71// xxx.ets
72@Entry
73@Component
74struct StackExample {
75  build() {
76    Stack({ alignContent: Alignment.Bottom }) {
77      Text('First child, show in bottom').width('90%').height('100%').backgroundColor(0xd2cab3).align(Alignment.Top)
78      Text('Second child, show in top').width('70%').height('60%').backgroundColor(0xc1cbac).align(Alignment.Top)
79    }.width('100%').height(150).margin({ top: 5 })
80  }
81}
82```
83
84![zh-cn_image_0000001219982699](figures/zh-cn_image_0000001219982699.PNG)
85