一、一句话分清 @State 和 Stack

先解决最关键的疑问：二者完全不是一类东西

1.@state

定义： Stack是ArkUI层叠布局容器，和Column（上下排列）、Row（左右排列）同级。内部所有子组件会重叠摆放，适合做同心圆、文字浮层、消息小红点等叠加效果。

@state发生改变，这个页面实时发生更新

堆叠顺序：先写的组件在底层，后写的组件在上层，后写的覆盖先写的

格式：@State 变量名: 类型 = 初始值;

例子：

我在TextInput文本框输入123，下边会自动写出123，以此来实现@state的实时更新

@Entry
@Component
struct StstesDemo1{
  @State msg:string=""
  build() {
    Column({space:20}){
      TextInput({text:this.msg,placeholder:"请输入信息"})
        .height(50)
        .width('100%')
        .onChange((value:string)=>{
          this.msg=value
        })

      Text("你输入的信息是：")
        .height(50)
        .width('100%')
        .fontSize(20)

      Text(this.msg)
        .width('100%')
        .padding(20)
        .fontSize(30)
        .backgroundColor(Color.Grey)
      
    }
    .width('100%')
    .height('100%')
    .padding(20)
  }
}

2.stack层叠布局

定义：Stack 是层叠容器，内部所有子组件会重叠摆放：

堆叠顺序规则（最重要）：先写的组件在底层，后写的组件在上层，后写的会盖住前面的Huawei Developer

以同心圆为例，

@Entry
@Component
struct CircleDemo {
  build() {
    Column() {
      Stack() {

        Stack()
          .width(200)
          .height(200)
          .backgroundColor(Color.Grey)
          .borderRadius(100)

        Stack()
          .width(120)
          .height(120)
          .backgroundColor(Color.Black)
          .borderRadius(60)
      }
      .width(150)
      .height(150)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}