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 85