关于@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组件官方资料
免责声明：本网站内容主要来自原创、合作伙伴供稿和第三方自媒体作者投稿，凡在本网站出现的信息，均仅供参考。本网站将尽力确保所提供信息的准确性及可靠性，但不保证有关资料的准确性及可靠性，读者在使用前请进一步核实，并对任何自主决定的行为负责。本网站对有关资料所引致的错误、不确或遗漏，概不负任何法律责任。任何单位或个人认为本网站中的网页或链接内容可能涉嫌侵犯其知识产权或存在不实内容时，应及时向本网站提出书面权利通知或不实情况说明，并提供身份证明、权属证明及详细侵权或不实情况证明。本网站在收到上述法律文件后，将会依法尽快联系相关文章源头核实，沟通删除相关内容或断开相关链接。