Stack

The Stack component provides a stack container where child components are successively stacked and the latter one overwrites the previous one.

NOTE

• 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.

Child Components

Supported.

APIs

Stack(options?: StackOptions)

NOTE

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.

StackOptions¹⁸⁺

NOTE

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.

Attributes

In addition to the universal attributes, the following attributes are supported.

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.

Events

The universal events are supported.

Example

This example demonstrates the display effect of child components when the alignContent attribute of the Stack component is set to Alignment.Bottom.

// 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 })
  }
}