鸿蒙开发笔记-状态变量

最新推荐文章于 2024-11-02 23:48:09 发布

鸿蒙笔记

最新推荐文章于 2024-11-02 23:48:09 发布

阅读量320

点赞数 9

文章标签：笔记鸿蒙鸿蒙系统

本文链接：https://blog.csdn.net/2301_79082288/article/details/141495855

版权

一、状态管理概述

当运行时状态变量的变化，带来UI的重新渲染，在ArkUI中统称为状态管理机制；
变量必须被装饰器修饰才可以成为状态变量。

二、@State自己的状态

不是状态变量的所有改变都会引起刷新，只有可以被框架观察到的修改才会UI的刷新；
boolean，string，number类型都可以观察到数据的变化；
class或者Object时，可观察自身赋值的变化（即第一层数值值的变化），所有Object.key(observedObject)返回的熟悉。

三、talk is cheap, show me the code

@Component
struct Index {
  //被State修饰，当其发生改变时，UI会被刷新
  @State message: string = 'hello, world'

  build() {
    Column({ space: 30 }) {
      Text(this.message)
        .fontColor(Color.Brown)
        .fontSize(30)
        .margin({ top: 50 })

      Button('修改message值')
        .onClick(() => {
          //message值更改后，立马被框架观察到，UI即刻刷新
          this.message = '你好，世界'
        })
    }
    .backgroundColor('#F1F3F5')
    .height('100%')
    .width('100%')
  }
}

四、效果图

在这里插入图片描述

五、被@State修饰的值修改了一定会引起UI刷新吗？（看注释）

interface Person {
  name: string
  car: Car
}

interface Car {
  carName: string
}

@Entry
@Component
struct Index {
  //被State修饰，当其发生改变时，UI一定会被刷新吗？？？
  @State person: Person = {
    name: 'Tom',
    car: {
      carName: '蔚来'
    }
  }

  build() {
    Column({ space: 30 }) {
      Text(JSON.stringify(this.person))
        .fontColor(Color.Brown)
        .fontSize(30)
        .margin({ top: 50 })

      Button('修改message值')
        .onClick(() => {
          //person值更改后，立马被框架观察到，UI一定会即刻刷新吗？？？
          //this.person.name = 'Jack' //UI确实刷新了
          //this.person.car.carName = '理想 L6' //UI确实没有刷新

          //如何解决
          //1、name和carName一起改，UI会刷新
          //this.person.name = 'Jack'
          //this.person.car.carName = '理想 L6'
          //2、直接修改car的值（而不是修改carName）
          this.person.car = { carName: '小鹏' }
        })
    }
    .backgroundColor('#F1F3F5')
    .height('100%')
    .width('100%')
  }
}