HarmonyOS鸿蒙学习笔记@State作用说明和简单案例

Posted 2022-09-10 郭梧悠

关于@State的作用，官方文档上有一句话描述：@State装饰的变量是组件内部的状态数据，当这些状态数据被修改时，将会调用所在组件的build方法进行UI刷新。也就是说@State修饰的变量发生变化时，会刷新相关页面更新UI。这一点类似Flutter的StatefulWidget。

利用@State的这个特性可以实现效果，当未点击“我的”按钮的时候是黑色图标，当点击过后变成红色图标，再次点击又变成未选中状态的黑色图标。也就是实现选中和未选中的效果.

未选中状态:

选中状态:

代码实现也很简单：

@Entry
@Component
struct StatePage 
  //使用@State
  @State private icon: string = 'nav/icon-my-unselect.png'
  private isSelected = false;

  build() 
    Column() 
      Image($rawfile(this.icon))
        .height(30)
        .width(30).onClick(() => 
            //当
            this.icon = this.isSelected ? 'nav/icon-my-unselect.png' : 'nav/icon-my-select.png'
            this.isSelected = !this.isSelected
      )
    
    .height('100%')
    .width('100%')
    .alignItems(HorizontalAlign.Center)//让图片水平居中
    .justifyContent(FlexAlign.Center)//让图片垂直居中
  

其中两个图片位置在resource->main->rawfile->nav文件夹下

同时使用了Column组件的alignItems和justifyContent是的图片居中展示。

参考资料：

Column组件官方资料
@State组件官方资料