• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Z序控制
2
3组件的Z序，设置组件的堆叠顺序。
4
5>  **说明：**
6>
7>  从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
8
9
10## 属性
11
12
13| 名称 | 参数类型 | 描述 |
14| -------- | -------- | -------- |
15| zIndex | number | 同一容器中兄弟组件显示层级关系。zIndex值越大，显示层级越高，即zIndex值大的组件会覆盖在zIndex值小的组件上方。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
16
17
18## 示例
19
20```ts
21// xxx.ets
22@Entry
23@Component
24struct ZIndexExample {
25  build() {
26    Column() {
27      Stack() {
28        // stack会重叠组件, 默认后定义的在最上面，具有较高zIndex值的元素在zIndex较小的元素前面
29        Text('1, zIndex(2)')
30          .size({ width: '40%', height: '30%' }).backgroundColor(0xbbb2cb)
31          .zIndex(2)
32        Text('2, default zIndex(1)')
33          .size({ width: '70%', height: '50%' }).backgroundColor(0xd2cab3).align(Alignment.TopStart)
34          .zIndex(1)
35        Text('3, zIndex(0)')
36          .size({ width: '90%', height: '80%' }).backgroundColor(0xc1cbac).align(Alignment.TopStart)
37      }.width('100%').height(200)
38    }.width('100%').height(200)
39  }
40}
41```
42Stack容器内子组件不设置zIndex的效果
43
44![nozindex.png](figures/nozindex.png)
45
46Stack容器子组件设置zIndex后效果
47
48![zindex.png](figures/zindex.png)
49
50