• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Stack
2
3The **Stack** component provides a stack container where child components are successively stacked and the latter one overwrites the previous one.
4
5>  **NOTE**
6>
7>  This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
8
9
10## Child Components
11
12This component can contain child components.
13
14
15## APIs
16
17Stack(options?: StackOptions)
18
19**Widget capability**: This API can be used in ArkTS widgets since API version 9.
20
21**Atomic service API**: This API can be used in atomic services since API version 11.
22
23**System capability**: SystemCapability.ArkUI.ArkUI.Full
24
25**Parameters**
26
27| Name      | Type                                   | Mandatory| Description                                                   |
28| ------------ | ------------------------------------------- | ---- | ----------------------------------------------------------- |
29| options | [StackOptions](#stackoptions14) | No  | Alignment of child components in the container.|
30
31## StackOptions<sup>14+</sup>
32
33**Widget capability**: This API can be used in ArkTS widgets since API version 14.
34
35**Atomic service API**: This API can be used in atomic services since API version 14.
36
37**System capability**: SystemCapability.ArkUI.ArkUI.Full
38
39| Name         | Type           | Mandatory| Description                       |
40| ------------ | --------------- | ---- | --------------------------- |
41| alignContent | [Alignment](ts-appendix-enums.md#alignment) | No  | Alignment of child components in the container.<br>Default value: **Alignment.Center**|
42
43## Attributes
44
45In addition to the [universal attributes](ts-component-general-attributes.md), the following attributes are supported.
46
47### alignContent
48
49alignContent(value: Alignment)
50
51Sets the alignment of all child components in the container. When both this attribute and the universal attribute [align](ts-universal-attributes-location.md#align) are set, whichever is set last takes effect.
52
53**Atomic service API**: This API can be used in atomic services since API version 11.
54
55**Widget capability**: This API can be used in ArkTS widgets since API version 9.
56
57**System capability**: SystemCapability.ArkUI.ArkUI.Full
58
59**Parameters**
60
61| Name| Type                                       | Mandatory| Description                                                       |
62| ------ | ------------------------------------------- | ---- | ----------------------------------------------------------- |
63| value  | [Alignment](ts-appendix-enums.md#alignment) | Yes  | Alignment of child components in the container.<br>Default value: **Alignment.Center**|
64
65
66## Example
67
68This example demonstrates the display effect of child components when the **alignContent** attribute of the **Stack** component is set to **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![en-us_image_0000001219982699](figures/en-us_image_0000001219982699.PNG)
85