鸿蒙UI开发快速入门 —— part06:组件状态管理之@State装饰器

1、说在前面的话

在前五个章节中,我们构建的页面基本都是静态的页面,如果希望构建一个动态的、有交互的界面,就需要引入“状态”的概念,以便随着用户的交互,界面随着发生变化,例如如下的动图:

图片

上面的示例中,用户与应用程序的交互触发了文本状态变更,状态变更引起了UI渲染,UI从“Hello World”变更为“Hello ArkUI”。

在声明式UI编程框架中,UI是程序状态的运行结果,用户构建了一个UI模型,其中应用的运行时的状态是参数。当参数改变时,UI作为返回结果,也将进行对应的改变。这些运行时的状态变化所带来的UI的重新渲染,在ArkUI中统称为状态管理机制。

自定义组件拥有变量,变量必须被装饰器装饰才可以成为状态变量,状态变量的改变会引起UI的渲染刷新。如果不使用状态变量,UI只能在初始化时渲染,后续将不会再刷新。下图展示了State和View(UI)之间的关系。

图片

  • View(UI):UI渲染,指将build方法内的UI描述和@Builder装饰的方法内的UI描述映射到界面。

  • State:状态,指驱动UI更新的数据。用户通过触发组件的事件方法,改变状态数据。状态数据的改变,引起UI的重新渲染。


1.1、一些基本概念

  • 状态变量

被状态装饰器(@State)装饰的变量,状态变量值的改变会引起UI的渲染更新。示例如下,其中@State是状态装饰器,num是状态变量。

@Componentstruct MyComponent {
    @State num: number = 1;  build() {
    // ...  }}
  • 常规变量

没有被状态装饰器装饰的变量,通常应用于辅助计算。它的改变不会引起UI的刷新。以下示例中increaseBy变量为常规变量。

  • 数据源/同步源

状态变量的原始来源,可以同步给不同的状态数据。通常意义为父组件传给子组件的数据。示例代码如下,以下示例中数据源为count: 1。

@Componentstruct MyComponent {
    @State count: number = 0;  build() {
    }}@Componentstruct Parent {
    build() {
      Column() {
        // 从父组件初始化,覆盖本地定义的默认值      MyComponent({ count: 1})    }  }}<
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值