鸿蒙开发之ArkTs开发布局之层叠布局（Stack）和弹性布局（Flex）

层叠布局（Stack）

层叠布局（StackLayout）用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局。层叠布局通过Stack容器组件实现位置的固定定位与层叠，容器中的子元素（子组件）依次入栈，后一个子元素覆盖前一个子元素，子元素可以叠加，也可以设置位置。

层叠布局具有较强的页面层叠、位置定位能力，其使用场景有广告、卡片层叠效果等。

Stack组件可以实现容器堆叠，子组件按照顺序依次入栈，后一个子组件覆盖前一个子组件。

Stack作为容器，容器内的子元素（子组件）的顺序为Item1->Item2->Item3

接口

Stack(value?: { alignContent?: Alignment })

参数：

参数名	参数类型	必填	参数描述
alignContent	Alignment	否	设置子组件在容器内的对齐方式。 默认值：Alignment.Center

对齐方式

Stack组件通过alignContent参数实现位置的相对移动。如图2所示，支持九种对齐方式。

图2 Stack容器内元素的对齐方式

 Stack({alignContent:Alignment.Bottom}) {
          Text('1234567').height('100%').fontColor(Color.Red).backgroundColor(Color.Gray)
          Text('ssddgsgsfdgsdfg').height('50%').fontColor(Color.Blue).backgroundColor(Color.Orange)
        }.height(80)

zIndex控制层级

Stack子组件中 zIndex控制层级,通过设置子组件的zindex可以控制层级，zindex越大越在上层

  Stack({alignContent:Alignment.Bottom}) {
          Text('1234567').height('100%').fontColor(Color.Red).backgroundColor(Color.Gray).zIndex(2)
          Text('ssddgsgsfdgsdfg').height('50%').fontColor(Color.Blue).backgroundColor(Color.Orange).zIndex(1)
        }.height(80)