HarmonyOS鸿蒙学习笔记（5）@State作用说明和简单案例 |
您所在的位置：网站首页 › 华为鸿蒙系统什么作用 › HarmonyOS鸿蒙学习笔记（5）@State作用说明和简单案例 |
HarmonyOS鸿蒙学习笔记（5）@State作用说明和简单案例
|
关于@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组件官方资料 @State组件官方资料 |
选中状态: 
同时使用了Column组件的alignItems和justifyContent是的图片居中展示。【本文地址】