欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 新闻 > 资讯 > 鸿蒙开发:了解$$运算符

鸿蒙开发:了解$$运算符

2025/5/28 3:20:33 来源:https://blog.csdn.net/ming_147/article/details/148213493  浏览:    关键词:鸿蒙开发:了解$$运算符

前言

本文基于Api13

有这样一个需求,一个Text组件,一个TextInput组件,要求Text组件同步展示TextInput组件里的内容,也就是TextInput组件输入什么内容,就要在Text组件里展示什么内容,这个需求如何实现呢?

聪明的同学肯定能够想到,这不就是双向绑定吗,这还不简单,@State装饰器就可以搞定啊,确实,@State装饰器可以实现,当TextInput的内容发生变化时,我们给@State装饰器修饰的变量进行赋值,Text组件加载这个变量即可。

简单代码如下:

@Entry
@Component
struct Index {@State message: string = ""build() {Column() {Text(this.message).fontSize(18)TextInput().onChange((value: string) => {this.message = value})}.height("100%").width("100%").justifyContent(FlexAlign.Center)}
}

运行之后效果:

那么除了以上的方式,还有没有一个更简单的方式呢?哎,必须有,这就是$$运算符,使用它,可以让双向绑定实现起来更加的简单,我们把代码修改一下:

 Text(this.message).fontSize(18)
TextInput({ text: $$this.message })

以上的代码,运行之后,和上面的效果是一模一样的,可以看到,使用了$$运算符后,我们不用再单独的去监听输入框的内容变化,它自身就实现了TS变量和系统组件的内部状态保持同步。

什么是$$运算符

一句话解读:$$运算符是系统组件提供ts变量的引用,使用它可以使得ts变量和组件的内部状态保持同步,有一点需要知道,那就是当前仅基础类型变量,至于装饰器的话,也仅仅支持三个,分别是@State、@Link和@Prop装饰器。

支持双向绑定的组件就比较多了,凡是有内部状态属性的组件基本上都支持,像输入组件,单选组件,多选组件等等都是支持的,目前支持的组件列表如下:

组件

支持的参数/属性

Checkbox

select

CheckboxGroup

selectAll

DatePicker

selected

TimePicker

selected

MenuItem

selected

Panel

mode

Radio

checked

Rating

rating

Search

value

SideBarContainer

showSideBar

Slider

value

Stepper

index

Swiper

index

Tabs

index

TextArea

text

TextInput

text

TextPicker

selected、value

Toggle

isOn

AlphabetIndexer

selected

Select

selected、value

BindSheet

isShow

BindContentCover

isShow

Refresh

refreshing

GridItem

selected

ListItem

selected

使用方式,基本上是一致的,比如Checkbox组件,我们实现select属性,进行绑定即可。

  Text(this.select.toString())Checkbox().select($$this.select)

相关总结

$$运算符相对来说还是比较的简单,它的出现,解决了组件状态和变量同步的问题,还有一点需要知道,在$$绑定的变量变化时,会触发UI的同步刷新,当然了在你使用到该变量的时候。

本文标签:HarmonyOS/ArkUI

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词