The Stack component provides a stack container where child components are successively stacked and the latter one overwrites the previous one.
This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
The general attribute align supports the mirroring capability on this component.
APIs
Stack(options?: StackOptions)
The Stack component provides a stack container where child components are successively stacked and the latter one overwrites the previous one.
Excessive component nesting can lead to performance degradation. In some scenarios, using component attributes directly or leveraging system APIs can achieve the same effect as the stack container, reducing the number of nested components and optimizing performance. For best practices, see Preferentially Using Component Properties Instead of Nested Components.
Widget capability: This API can be used in ArkTS widgets since API version 9.
Atomic service API: This API can be used in atomic services since API version 11.
System capability: SystemCapability.ArkUI.ArkUI.Full
Parameters
| Name | Type | Mandatory | Description |
|---|---|---|---|
| options | StackOptions | No | Alignment of child components in the container. |
StackOptions18+
Sets the alignment method of the child component in the stack container.
To standardize anonymous object definitions, the element definitions here have been revised in API version 18. The initial version information of the historical anonymous objects has been retained, which may result in the outer element's @since version number being later than the inner element's version number. However, this does not affect the use of the API.
Widget capability: This API can be used in ArkTS widgets since API version 18.
Atomic service API: This API can be used in atomic services since API version 18.
System capability: SystemCapability.ArkUI.ArkUI.Full
| Name | Type | Read-Only | Optional | Description |
|---|---|---|---|---|
| alignContent7+ | Alignment | No | Yes | Alignment of child components in the container. Default value: Alignment.Center Invalid values are treated as the default value. Widget capability: This API can be used in ArkTS widgets since API version 9. Atomic service API: This API can be used in atomic services since API version 11. |
[h2]alignContent
alignContent(value: Alignment)
Sets the alignment of child components in the container. When both this attribute and the align attribute are set, whichever is set last takes effect. When this attribute and the constructor input parameters are set simultaneously, the attribute setting prevails.
Atomic service API: This API can be used in atomic services since API version 11.
Widget capability: This API can be used in ArkTS widgets since API version 9.
System capability: SystemCapability.ArkUI.ArkUI.Full
Parameters
| Name | Type | Mandatory | Description |
|---|---|---|---|
| value | Alignment | Yes | Alignment of child components in the container. Default value: Alignment.Center Invalid values are treated as the default value. |
[h2]syncLoad
syncLoad(enable: boolean)
Sets whether to synchronously load all child components in the stack container.
Since: 26.0.0
Atomic service API: This API can be used in atomic services since API version 26.0.0.
System capability: SystemCapability.ArkUI.ArkUI.Full
Model restriction: This API can be used only in the stage model.
Parameters
| Name | Type | Mandatory | Description |
|---|---|---|---|
| enable | boolean | Yes | Whether to synchronously load all child components in the stack container. true: yes; false: no. Default value: true NOTE If this parameter is set to false, during the initial display, if the current frame layout exceeds 50 ms, the child components that have not been laid out in the stack container will be delayed to the next frame for layout. |
Example
When the alignContent attribute of the Stack component is set to Alignment.Bottom and syncLoad is set to true, the child components are displayed horizontally centered at the bottom of the Stack component, and all child components are loaded within the same frame.
The syncLoad attribute is added since API version 26.0.0.
// xxx.ets
@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 })
// The syncLoad attribute is added since API version 26.0.0.
.syncLoad(true)
}
} 