鸿蒙系列之一Stack定位组件

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

2.Stack接口参数 Stack(value?:{alignContent?:Alignment})

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

3.Stack的基本使用

@Entry
@Component
struct StackTestPage {
  @State message: string = 'Hello World'

  build() {
    Column(){
      Stack({alignContent:Alignment.BottomStart}){
        Row(){

        }
        .width(200)
        .height(200)
        .backgroundColor(Color.Red)

        Row(){}
        .width(100)
        .height(100)
        .backgroundColor(Color.Yellow)

        Row(){}
        .width(50)
        .height(50)
        .backgroundColor(Color.Blue)
        



      }
    }
    .height("100%")
    .width("100%")
  }
}

4.Stack子组件中zIndex控制层级

@Entry
@Component
struct StackTestPage {
  @State message: string = 'Hello World'

  build() {
    Column(){
      Stack({alignContent:Alignment.BottomStart}){
        Row(){

        }
        .width(200)
        .height(200)
        .backgroundColor(Color.Red)
        .zIndex(2)

        Row(){}
        .width(100)
        .height(100)
        .backgroundColor(Color.Yellow)
        .zIndex(1)

        Row(){}
        .width(50)
        .height(50)
        .backgroundColor(Color.Blue)
        .zIndex(2)




      }
    }
    .height("100%")
    .width("100%")
  }
}

5. Stack结合List实现动态列表

    5.1实现浮动按钮
    5.2点击按钮让列表的数字加一
   

@Entry
@Component
struct StackTest1Page {
  @State message: string = 'Hello World'
  @State list:Array<number>=[1,2,3,4]
  build() {
      Column(){
        Stack({alignContent:Alignment.BottomEnd}){
          List({space:5}){
            ForEach(this.list,(item,index)=>{
              ListItem(){
                Text(`${item}`)
                  .fontSize(36)
                  .backgroundColor("#eee")
                  .width('100%')
                  .height(50)
                  .textAlign(TextAlign.Center)
              }
            },item=>item)
          }.height('100%')
          Button(){
            Text('+')
              .fontSize(40)
              .fontColor(Color.White)
          }
          .width(50)
          .height(50)
          .margin({right:10,bottom:10})
          .backgroundColor(0x317aff)
          .onClick(()=>{
              this.list.push(this.list.length+1)
          })
        }
        .width('100%')
        .height('100%')
      }
    .width('100%')
    .height('100%')
  }
}

6. Stack结合List实现动态列表并且添加浮动导航

@Entry
@Component
struct StackTest1Page {
  @State message: string = 'Hello World'
  @State list:Array<number>=[1,2,3,4]
  build() {
    Column(){
      Stack({alignContent:Alignment.TopStart}){
        Column(){
          Stack({alignContent:Alignment.BottomEnd}){
            List({space:5}){
              ForEach(this.list,(item,index)=>{
                ListItem(){
                  Text(`${item}`)
                    .fontSize(36)
                    .backgroundColor("#eee")
                    .width('100%')
                    .height(50)
                    .textAlign(TextAlign.Center)
                }
              },item=>item)
            }.height('100%')
            .margin({top:50})
            Button(){
              Text('+')
                .fontSize(40)
                .fontColor(Color.White)
            }
            .width(50)
            .height(50)
            .margin({right:10,bottom:10})
            .backgroundColor(0x317aff)
            .onClick(()=>{
              this.list.push(this.list.length+1)
            })
          }
          .width('100%')
          .height('100%')

        }
        .width('100%')
        .height('100%')

        Row(){
          Text('导航')
            .fontColor(Color.Black)
            .fontSize(36)
            .textAlign(TextAlign.Center)
            .width('100%')
            .height(50)
        }
        .width('100%')
        .height(50)
        .backgroundColor(Color.Yellow)
      }
    }
    .width('100%')
    .height('100%')
  }
}