• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Stack
2<!--Kit: ArkUI-->
3<!--Subsystem: ArkUI-->
4<!--Owner: @fenglinbailu-->
5<!--Designer: @lanshouren-->
6<!--Tester: @liuli0427-->
7<!--Adviser: @HelloCrease-->
8
9堆叠容器,子组件按照顺序依次入栈,后一个子组件覆盖前一个子组件。
10
11>  **说明:**
12>
13>  该组件从API version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
14
15
16## 子组件
17
18可以包含子组件。
19
20## 接口
21
22Stack(options?: StackOptions)
23
24> **说明:**
25>
26> 过多的嵌套组件数会导致性能劣化。在部分场景中,直接使用组件属性或借助系统API的能力可以替代层叠容器的效果,减少了嵌套组件数进而优化性能。最佳实践请参考[组件嵌套优化-优先使用组件属性代替嵌套组件](https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-component-nesting-optimization#section78181114123811)27
28**卡片能力:** 从API version 9开始,该接口支持在ArkTS卡片中使用。
29
30**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
31
32**系统能力:** SystemCapability.ArkUI.ArkUI.Full
33
34**参数:**
35
36| 参数名       | 类型                                    | 必填 | 说明                                                    |
37| ------------ | ------------------------------------------- | ---- | ----------------------------------------------------------- |
38| options | [StackOptions](#stackoptions18对象说明) | 否   | 设置子组件在容器内的对齐方式。 |
39
40## StackOptions<sup>18+</sup>对象说明
41
42> **说明:**
43>
44> 为规范匿名对象的定义,API 18版本修改了此处的元素定义。其中,保留了历史匿名对象的起始版本信息,会出现外层元素@since版本号高于内层元素版本号的情况,但这不影响接口的使用。
45
46**卡片能力:** 从API version 18开始,该接口支持在ArkTS卡片中使用。
47
48**原子化服务API:** 从API version 18开始,该接口支持在原子化服务中使用。
49
50**系统能力:** SystemCapability.ArkUI.ArkUI.Full
51
52| 名称 | 类型 | 只读 | 可选 | 说明 |
53| -------- | -------- | -------- | -------- | -------- |
54| alignContent<sup>7+</sup> | [Alignment](ts-appendix-enums.md#alignment) | 否 | 是   | 设置子组件在容器内的对齐方式。<br/>默认值:Alignment.Center <br />非法值:按默认值处理。<br/>**卡片能力:** 从API version 9开始,该接口支持在ArkTS卡片中使用。<br/>**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 |
55
56## 属性
57
58除支持[通用属性](ts-component-general-attributes.md)外,还支持以下属性:
59
60### alignContent
61
62alignContent(value: Alignment)
63
64设置子组件在容器内的对齐方式。该属性与[通用属性align](ts-universal-attributes-location.md#align)同时设置时,后设置的属性生效。该属性与接口的构造入参同时设置时,生效属性上的设置效果。
65
66**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
67
68**卡片能力:** 从API version 9开始,该接口支持在ArkTS卡片中使用。
69
70**系统能力:** SystemCapability.ArkUI.ArkUI.Full
71
72**参数:**
73
74| 参数名 | 类型                                        | 必填 | 说明                                                        |
75| ------ | ------------------------------------------- | ---- | ----------------------------------------------------------- |
76| value  | [Alignment](ts-appendix-enums.md#alignment) | 是   | 所有子组件在容器内的对齐方式。<br/>默认值:Alignment.Center <br />非法值:按默认值处理。 |
77
78## 事件
79
80支持[通用事件](ts-component-general-events.md)。
81
82## 示例
83
84Stack的alignContent设置为Alignment.Bottom条件下子组件显示效果。
85
86```ts
87// xxx.ets
88@Entry
89@Component
90struct StackExample {
91  build() {
92    Stack({ alignContent: Alignment.Bottom }) {
93      Text('First child, show in bottom').width('90%').height('100%').backgroundColor(0xd2cab3).align(Alignment.Top)
94      Text('Second child, show in top').width('70%').height('60%').backgroundColor(0xc1cbac).align(Alignment.Top)
95    }.width('100%').height(150).margin({ top: 5 })
96  }
97}
98```
99
100![zh-cn_image_0000001219982699](figures/zh-cn_image_0000001219982699.PNG)
101