鸿蒙 ArkUI 入门：@State 状态与 Stack 层叠布局详解（附同心圆实战）

一、一句话分清 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.msgvalue }) 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) } }