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

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

线性布局参考 https://txwtech.blog.csdn.net/article/details/137186122

 

import FaultLogger from '@ohos.faultLogger'
import promt2 from '@ohos.prompt'
import promt_action from '@ohos.promptAction'
@Entry
@Component
struct Index {
  private arr_value:string[] = ['AP1','AP2','AP3','AP4','AP5','AP6','AP7','AP8'];
  @State message: string = '调试'
  @State message2: string = '测试'
  @State message3: string = 'demo by txwtech'
  @State handlePopup2:boolean = false

 //堆叠布局示范，堆叠布局放两个弹性布局
  build() {
   // Stack({}){
   //   Column(){}.width('80%').height('70%').backgroundColor(Color.Blue)//线性布局在底层
   //   Text('堆叠布局').width('99%').height(100).margin({top:5}).backgroundColor(Color.Yellow) //text在中层
   //   Button('按钮').width('80%').height(100).margin({top:50})//按钮在最上层
   // }
    //堆叠结合弹性布局
    Stack({alignContent:Alignment.Bottom}){
      Flex({wrap:FlexWrap.Wrap}){ //弹性布局
        ForEach(this.arr_value,(item)=>{
          Text(item)
            .width(100)
            .height(100)
            .fontSize(18)
            .fontColor(Color.White)
            .textAlign(TextAlign.Center)
            .borderRadius(10)
            .backgroundColor(Color.Green)
          Text(' ')

        },item=>item)

      }.width('100%').height('100%')
      Flex({justifyContent:FlexAlign.SpaceAround,alignItems:ItemAlign.Center}){
        Text('信息').fontSize(18).fontColor(Color.White)
        Text('通知').fontSize(18).fontColor(Color.White)
        Text('设置').fontSize(18).fontColor(Color.White)
      }
      .width('50%')
      .height(50)
      .backgroundColor(Color.Blue)
      .margin({bottom:20})
      .borderRadius(20)

    }.width('100%').height('100%').backgroundColor(Color.Gray)




  }
}