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

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

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

未选中状态:

选中状态:

代码实现也很简单：

@Entry@Componentstruct 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组件官方资料