• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Stack Layout (Stack)
2
3
4## Overview
5
6The stack layout reserves an area on the screen to display elements in a component and allows the elements to be stacked. You can implement a stack layout through the [Stack](../reference/apis-arkui/arkui-ts/ts-container-stack.md) component, which provides a stack container where positioned or non-positioned child elements are pushed successively and the latter one sits on top of the previous one.
7
8The stack layout excels at page stacking and positioning, and is widely used in ad and widget arrangement.
9
10In the **Stack** component shown in Figure 1, the sequence of child elements is Item1 -> Item2 -> Item3.
11
12
13  **Figure 1** Stack layout
14
15![stack-layout](figures/stack-layout.png)
16
17> **NOTE**
18>
19> Excessive nesting of components can lead to performance degradation. In some scenarios, using component attributes directly or leveraging system APIs can achieve the same effect as the stack layout, reducing the number of nested components and optimizing performance. For best practices, see [Preferentially Using Component Properties Instead of Nested Components](https://developer.huawei.com/consumer/en/doc/best-practices/bpta-component-nesting-optimization#section78181114123811).
20
21## How to Develop
22
23The **Stack** component can contain various child elements, which are stacked in the center by default. While respecting the constraints of **Stack**, child elements are laid out in their respective style.
24
25```ts
26// xxx.ets
27let MTop:Record<string,number> = { 'top': 50 }
28
29@Entry
30@Component
31struct StackExample {
32  build() {
33    Column(){
34      Stack({ }) {
35        Column(){}.width('90%').height('100%').backgroundColor('#ff58b87c')
36        Text('text').width('60%').height('60%').backgroundColor('#ffc3f6aa')
37        Button('button').width('30%').height('30%').backgroundColor('#ff8ff3eb').fontColor('#000')
38      }.width('100%').height(150).margin(MTop)
39    }
40  }
41}
42```
43
44
45![stack-layout-sample](figures/stack-layout-sample.png)
46
47
48## Alignment
49
50Alignment of elements in the **Stack** component is set through the [alignContent](../reference/apis-arkui/arkui-ts/ts-container-stack.md#aligncontent) parameter. As shown in Figure 2, nine alignment modes are supported.
51
52  **Figure 2** Alignment modes in the Stack component
53
54![en-us_image_0000001562940621](figures/en-us_image_0000001562940621.png)
55
56```ts
57// xxx.ets
58@Entry
59@Component
60struct StackExample {
61  build() {
62    Stack({ alignContent: Alignment.TopStart }) {
63      Text('Stack').width('90%').height('100%').backgroundColor('#e1dede').align(Alignment.BottomEnd)
64      Text('Item 1').width('70%').height('80%').backgroundColor(0xd2cab3).align(Alignment.BottomEnd)
65      Text('Item 2').width('50%').height('60%').backgroundColor(0xc1cbac).align(Alignment.BottomEnd)
66    }.width('100%').height(150).margin({ top: 5 })
67  }
68}
69```
70
71## Z-order Control
72
73The stacking order of child elements in the **Stack** component is set through the [zIndex](../reference/apis-arkui/arkui-ts/ts-universal-attributes-z-order.md) attribute. A larger **zIndex** value indicates a higher display level.
74
75  In the stack layout, if the size of an element is greater than that of the one before it, the one before it is hidden.
76
77```ts
78Stack({ alignContent: Alignment.BottomStart }) {
79  Column() {
80    Text('Stacked element 1').textAlign(TextAlign.End).fontSize(20)
81  }.width(100).height(100).backgroundColor(0xffd306)
82
83  Column() {
84    Text('Stacked element 2').fontSize(20)
85  }.width(150).height(150).backgroundColor(Color.Pink)
86
87  Column() {
88    Text('Stacked element 3').fontSize(20)
89  }.width(200).height(200).backgroundColor(Color.Grey)
90}.width(350).height(350).backgroundColor(0xe0e0e0)
91```
92
93![en-us_image_0000001511900544](figures/en-us_image_0000001511900544.png)
94
95In the preceding figure, the size of the stacked element 3 is greater than that of all the elements before it. Therefore, the first two elements are completely hidden. To show these elements, modify their **zIndex** attribute settings.
96
97
98```ts
99Stack({ alignContent: Alignment.BottomStart }) {
100  Column() {
101    Text('Stacked element 1').fontSize(20)
102  }.width(100).height(100).backgroundColor(0xffd306).zIndex(2)
103
104  Column() {
105    Text('Stacked element 2').fontSize(20)
106  }.width(150).height(150).backgroundColor(Color.Pink).zIndex(1)
107
108  Column() {
109    Text('Stacked element 3').fontSize(20)
110  }.width(200).height(200).backgroundColor(Color.Grey)
111}.width(350).height(350).backgroundColor(0xe0e0e0)
112```
113
114![en-us_image_0000001563060797](figures/en-us_image_0000001563060797.png)
115
116
117## Example Scenario
118
119In this example, the stack layout is used to quickly set up a page.
120
121
122```ts
123@Entry
124@Component
125struct StackSample {
126  private arr: string[] = ['APP1', 'APP2', 'APP3', 'APP4', 'APP5', 'APP6', 'APP7', 'APP8'];
127
128  build() {
129    Stack({ alignContent: Alignment.Bottom }) {
130      Flex({ wrap: FlexWrap.Wrap }) {
131        ForEach(this.arr, (item:string) => {
132          Text(item)
133            .width(100)
134            .height(100)
135            .fontSize(16)
136            .margin(10)
137            .textAlign(TextAlign.Center)
138            .borderRadius(10)
139            .backgroundColor(0xFFFFFF)
140        }, (item:string):string => item)
141      }.width('100%').height('100%')
142
143      Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) {
144        Text('Contacts').fontSize(16)
145        Text('Settings').fontSize(16)
146        Text('Messaging').fontSize(16)
147      }
148      .width('50%')
149      .height(50)
150      .backgroundColor('#16302e2e')
151      .margin({ bottom: 15 })
152      .borderRadius(15)
153    }.width('100%').height('100%').backgroundColor('#CFD0CF')
154  }
155}
156```
157
158
159![en-us_image_0000001511421368](figures/en-us_image_0000001511421368.png)
160<!--RP1--><!--RP1End-->
161