• 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/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
18## How to Develop
19
20The **\<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.
21
22
23
24```ts
25let MTop:Record<string,number> = { 'top': 50 }
26Column(){
27  Stack({ }) {
28    Column(){}.width('90%').height('100%').backgroundColor('#ff58b87c')
29    Text('text').width('60%').height('60%').backgroundColor('#ffc3f6aa')
30    Button('button').width('30%').height('30%').backgroundColor('#ff8ff3eb').fontColor('#000')
31  }.width('100%').height(150).margin(MTop)
32}
33```
34
35
36![stack-layout-sample](figures/stack-layout-sample.png)
37
38
39## Alignment
40
41Alignment of elements in the **\<Stack>** component is set through the [alignContent](../reference/arkui-ts/ts-appendix-enums.md#alignment) parameter. As shown in Figure 2, nine alignment modes are supported.
42
43  **Figure 2** Alignment modes in the \<Stack> component
44
45![en-us_image_0000001562940621](figures/en-us_image_0000001562940621.png)
46
47```ts
48// xxx.ets
49@Entry
50@Component
51struct StackExample {
52  build() {
53    Stack({ alignContent: Alignment.TopStart }) {
54      Text('Stack').width('90%').height('100%').backgroundColor('#e1dede').align(Alignment.BottomEnd)
55      Text('Item 1').width('70%').height('80%').backgroundColor(0xd2cab3).align(Alignment.BottomEnd)
56      Text('Item 2').width('50%').height('60%').backgroundColor(0xc1cbac).align(Alignment.BottomEnd)
57    }.width('100%').height(150).margin({ top: 5 })
58  }
59}
60```
61
62## Z-order Control
63
64The stacking order of child elements in the **\<Stack>** component is set through the **[zIndex](../reference/arkui-ts/ts-universal-attributes-z-order.md)** attribute. A larger **zIndex** value indicates a higher display level.
65
66  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.
67
68```ts
69let MTopM1:Record<string,number> = { 'top': 100 }
70Stack({ alignContent: Alignment.BottomStart }) {
71  Column() {
72    Text ('Stacked element 1').textAlign (TextAlign.End).fontSize (20)
73  }.width(100).height(100).backgroundColor(0xffd306)
74
75  Column() {
76    Text ('Stacked element 2').fontSize (20)
77  }.width(150).height(150).backgroundColor(Color.Pink)
78
79  Column() {
80    Text ('Stacked element 3').fontSize (20)
81  }.width(200).height(200).backgroundColor(Color.Grey)
82}.margin(MTopM1).width(350).height(350).backgroundColor(0xe0e0e0)
83```
84
85![en-us_image_0000001511900544](figures/en-us_image_0000001511900544.png)
86
87In 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.
88
89
90```ts
91let MTopM:Record<string,number> = { 'top': 100 }
92Stack({ alignContent: Alignment.BottomStart }) {
93  Column() {
94    Text ('Stacked element 1').fontSize (20)
95  }.width(100).height(100).backgroundColor(0xffd306).zIndex(2)
96
97  Column() {
98    Text ('Stacked element 2').fontSize (20)
99  }.width(150).height(150).backgroundColor(Color.Pink).zIndex(1)
100
101  Column() {
102    Text ('Stacked element 3').fontSize (20)
103  }.width(200).height(200).backgroundColor(Color.Grey)
104}.margin(MTopM).width(350).height(350).backgroundColor(0xe0e0e0)
105```
106
107![en-us_image_0000001563060797](figures/en-us_image_0000001563060797.png)
108
109
110## Example Scenario
111
112In this example, the stack layout is used to quickly set up a page.
113
114
115```ts
116@Entry
117@Component
118struct StackSample {
119  private arr: string[] = ['APP1', 'APP2', 'APP3', 'APP4', 'APP5', 'APP6', 'APP7', 'APP8'];
120
121  build() {
122    Stack({ alignContent: Alignment.Bottom }) {
123      Flex({ wrap: FlexWrap.Wrap }) {
124        ForEach(this.arr, (item:string) => {
125          Text(item)
126            .width(100)
127            .height(100)
128            .fontSize(16)
129            .margin(10)
130            .textAlign(TextAlign.Center)
131            .borderRadius(10)
132            .backgroundColor(0xFFFFFF)
133        }, (item:string):string => item)
134      }.width('100%').height('100%')
135
136      Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) {
137        Text ('Contacts').fontSize (16)
138        Text ('Settings').fontSize (16)
139        Text ('Messaging').fontSize (16)
140      }
141      .width('50%')
142      .height(50)
143      .backgroundColor('#16302e2e')
144      .margin({ bottom: 15 })
145      .borderRadius(15)
146    }.width('100%').height('100%').backgroundColor('#CFD0CF')
147  }
148}
149```
150
151
152![en-us_image_0000001511421368](figures/en-us_image_0000001511421368.png)
153