DEV Community

Cover image for HarmonyOS Development: Understanding the $$Operator
程序员一鸣
程序员一鸣

Posted on

HarmonyOS Development: Understanding the $$Operator

#harmonyos

Foreword 

this article is based on Api13 

there is a requirement that a Text component and a TextInput component require the Text component to simultaneously display the contents of the TextInput component, that is, what content is input by the TextInput component and what content is displayed in the Text component. How can this requirement be realized? 

Smart students can certainly think that this is two-way binding, it is not simple, @ State decorator can do it, indeed, @ State decorator can do it, when the content of TextInput changes, we assign values to the variables modified by @ State decorator, and the Text component can load this variable. 

The simple code is as follows:

 

@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)

  }
}
Enter fullscreen mode Exit fullscreen mode

effect after running: 

Image description

is there a simpler way besides the above? Well, there must be, this is  $$ operator, using it, you can make two-way binding easier to implement. Let's modify the code:

 

 Text(this.message)
        .fontSize(18)
TextInput({ text: $$this.message })
Enter fullscreen mode Exit fullscreen mode

after the above code is run, the effect is exactly the same as the above. It can be seen that after using the $$operator, we no longer need to monitor the content changes of the input box separately, and it realizes the synchronization between the TS variable and the internal state of the system components. 

What is the $$operator? 

One sentence interpretation:$$operator is a reference to ts variables provided by system components. Using it can keep ts variables synchronized with the internal State of components. One thing to know is that currently only basic type variables are supported. As for decorators, only three are supported, namely @ State, @ Link and @ Prop decorators.

There are many components that support two-way binding. All components with internal state attributes are basically supported, such as input components, single-selection components, multiple-selection components, etc. Currently, the supported components are listed as follows: 

components  supported Parameters/Properties 
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

The usage method is basically the same. For example, for the Checkbox component, we can implement the select attribute and bind it.

  Text(this.select.toString())
      Checkbox()
        .select($$this.select)
Enter fullscreen mode Exit fullscreen mode

Related Summary

The $$operator is relatively simple. Its appearance solves the problem of component state and variable synchronization. It is also important to know that when the $$bound variable changes, it will trigger the synchronous refresh of UI, of course, when you use the variable. 

This article tags: HarmonyOS/ArkUI

Top comments (0)