学习笔记（九）：ArkUi-层叠布局 (Stack)

层叠布局（Stack）

用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局。

层叠布局通过Stack容器组件实现位置的固定定位与层叠，容器中的子元素依次入栈，后一个子元素覆盖前一个子元素，子元素可以叠加，也可以设置位置。

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

 

Stack组件为容器组件，容器内可包含各种子元素。其中子元素默认进行居中堆叠。子元素被约束在Stack下，进行自己的样式定义以及排列。

如下示例，Stack组件依次加入三个Text子元素，先加入的层级最低，默认居中堆叠

 

 

alignContent属性：

 

Stack({alignContent: Alignment.TopStart}){
}

 

 

 

设置 对齐方式，一共九种：

  

 

   

 

   

 

 zIndex属性：

Text('第二个加入的子元素')
          .fontColor(Color.White)
          .backgroundColor(0x00ff00)
          .width('60%')
          .height(120)
          .zIndex(3)

 

 举例，实现一个在右下角的悬浮按钮，功能为'新增'