HarmonyOS NEXT - @State状态变量

ArkUI作为一种声明式UI,具有状态驱动UI更新的特点。当用户进行界面交互或有外部事件引起状态改变时,状态的变化会触发组件自动更新。所以在ArkUI中,我们只需要通过一个变量来记录状态。当改变状态的时候,ArkUI就会自动更新界面中受影响的部分。

概述 @State装饰的变量,与声明式范式中的其他被装饰变量一样,是私有的,只能从组件内部访问,在声明时必须指定其类型和本地初始化。初始化也可选择使用命名参数机制从父组件完成初始化。

@State装饰的变量拥有以下特点:

  • @State装饰的变量与子组件中的@Prop装饰变量之间建立单向数据同步,与@Link、@ObjectLink装饰变量之间建立双向数据同步。
  • @State装饰的变量生命周期与其所属自定义组件的生命周期相同。

限制条件 @State装饰的变量必须初始化,否则编译期会报错。 @State不支持装饰Function类型的变量,框架会抛出运行时错误。 不允许在build里改变状态变量,状态管理框架会在运行时报出Error级别日志。

State支持联合类型实例 @State支持联合类型和undefined和null,在下面的示例中,count类型为number | undefined,点击Button改变count的属性或者类型,视图会随之刷新。

变量的传递和访问规则说明

  • 从父组件初始化:可选,从父组件初始化或者本地初始化。如果从父组件初始化,并且从父组件传入的值非undefined,将会覆盖本地初始化;如果从父组件传入的值为undefined,则初值为@State装饰变量自身的初值。支持父组件中常规变量(常规变量对@State赋值,只是数值的初始化,常规变量的变化不会触发UI刷新,只有状态变量才能触发UI刷新)
  • 用于初始化子组件:@State装饰的变量支持初始化子组件的常规变量
  • 是否支持组件外访问:不支持,只能在组件内访问。

@State装饰的变量,或称为状态变量,一旦变量拥有了状态属性,就可以触发其直接绑定UI组件的刷新。当状态改变时,UI会发生对应的渲染改变。 代码实例

@Entry
@Component
struct StatePage {
  @State message: string = '第1节 @State';
  count:number=0
  @State stateCount:number=0

  build() {
    Column({space:10}) {
      Text(this.message)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)

      Button('增加次数').onClick(()=>{
        this.count++
        this.stateCount++
      })
      Text('count='+this.count)
      Text('stateCount='+this.stateCount)
    }
    .height('100%')
    .width('100%')
  }
}
全部评论

相关推荐

评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客企业服务