前言
本文基于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