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 101