HarmonyOS ArkTS Stack定位组件的用法

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

HarmonyOS仿小米App实战教程： https://www.itying.com/goods-1193.html

HarmonyOS ArkTS Stack基本使用

@Entry
@Component
struct Index {
  build() {
    Column({ space: 10 }) {
      Stack({alignContent:Alignment.BottomStart}){
        Row(){
          Text("HarmonyOS").fontSize(40).textAlign(TextAlign.Center)
        }.width(300).height(300).backgroundColor(Color.Red)

        Row(){

        }.width(100).height(100).backgroundColor(Color.Blue)

      }


    }
    .height('100%')
    .width('100%')
    .margin(5)
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
  }
}

HarmonyOS ArkTS Stack子组件中 zIndex控制层级

Stack({ alignContent: Alignment.BottomStart }) {
  Column() {
    Text('Stack子元素1').fontSize(20)
  }.width(100).height(100).backgroundColor(0xffd306).zIndex(2)

  Column() {
    Text('Stack子元素2').fontSize(20)
  }.width(150).height(150).backgroundColor(Color.Pink).zIndex(1)

  Column() {
    Text('Stack子元素3').fontSize(20)
  }.width(200).height(200).backgroundColor(Color.Grey)
}.margin({ top: 100 }).width(350).height(350).backgroundColor(0xe0e0e0)

HarmonyOS ArkTS Stack结合List实现动态列表

@Entry
@Component
struct Index {
  @State list:number[]=[1,2,3];
  build() {
    Column() {
      Stack({alignContent:Alignment.BottomEnd}){
        Column(){
          List({space:10}){
            ForEach(this.list,(item)=>{

              ListItem(){
                Text(`${item}`)
                  .fontSize(20)
                  .height(50)
                  .width('100%')
                  .backgroundColor("#eee")
                  .textAlign(TextAlign.Center)
              }
            })
          }
        }
        .margin(10)
        .height('100%')

        Button({ type: ButtonType.Circle, stateEffect: true }) {
          Text("+").fontSize(40).fontColor(Color.White)
        }.width(55)
        .height(55)
        .margin({ right: 20,bottom:20 })
        .backgroundColor(0x317aff)
        .onClick(()=>{
          this.doAdd()
        })
      }
    }
    .height('100%')
    .width('100%')
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Start)
  }
  doAdd(){
    this.list.push(this.list[this.list.length-1]+1);
  }
}