HarmonyOS鸿蒙学习笔记(13)@Watch的作用 ——监听状态的变化
Posted 郭梧悠
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HarmonyOS鸿蒙学习笔记(13)@Watch的作用 ——监听状态的变化相关的知识,希望对你有一定的参考价值。
在HarmonyOS鸿蒙学习笔记(12)@Link的作用我们知道@Link修饰的变量可以将子组件和父组件的数据进行双向绑定,当数据发生变化的时候会更改父组件或者子组件的UI状态。那么我们如果想要监听数据的变化该怎么办呢?@Watch的就是用来干这个的。
官方释义:@Watch用于监听状态变量的变化,语法结构为:
@State @Watch("onChanged") count : number = 0
下面写个代码测试下,该代码改编自博主上一篇博文HarmonyOS鸿蒙学习笔记(12)@Link的作用。代码如下:
@Entry
@Component
struct Player
//使用@Watch监听isPlaying,当isPlaying发生变化的时候执行valueChange方法
@State @Watch("valueChange") isPlaying: boolean = false
build()
Column()
PlayButton( buttonPlaying: $isPlaying )
Text(`Player is $this.isPlaying ? '' : 'not' playing`).fontSize(30).onClick(() =>
this.isPlaying = !this.isPlaying;
)
/**
* 当isPlaying的值发生变化的时候执行valueChange方法
* @param propName 值为isPlaying
*/
valueChange(propName: string): void
console.log("invoke valueChange method " + propName)
@Component
struct PlayButton
@Link buttonPlaying: boolean
build()
Column()
Button()
Text(this.buttonPlaying ? '暂停' : '播放')
.textAlign(TextAlign.Center).fontSize(30).width('100%')
.onClick(() =>
this.buttonPlaying = !this.buttonPlaying
)
运行后的UI效果图:
点击播放的时候变量isPlaying
的值会改变,此时就会触发valueChange的执行,对此点击按钮之后,输入log如下:
[default][Console DEBUG] 09/30 13:50:47 18056 app Log: invoke valueChange method isPlaying
[default][Console DEBUG] 09/30 13:50:47 18056 app Log: invoke valueChange method isPlaying
[default][Console DEBUG] 09/30 13:50:48 18056 app Log: invoke valueChange method isPlaying
[default][Console DEBUG] 09/30 13:51:05 18056 app Log: invoke valueChange method isPlaying
参考资料:
@Watch官方文档
HarmonyOS鸿蒙学习笔记(12)@Link的作用
以上是关于HarmonyOS鸿蒙学习笔记(13)@Watch的作用 ——监听状态的变化的主要内容,如果未能解决你的问题,请参考以下文章
HarmonyOS鸿蒙学习笔记(13)@Watch的作用 ——监听状态的变化
HarmonyOS鸿蒙学习笔记(15)Swiper实现抖音切换视频播放效果
HarmonyOS鸿蒙学习笔记(15)Swiper实现抖音切换视频播放效果
HarmonyOS鸿蒙学习笔记(15)Swiper实现抖音切换视频播放效果