harmony 鸿蒙$$ Syntax: Two-Way Synchronization of Built-in Components

2023-06-24
浏览 (661)

$$ Syntax: Two-Way Synchronization of Built-in Components

The $$ operator provides a TS variable by-reference to a built-in component so that the variable value and the internal state of that component are kept in sync.

What the internal state is depends on the component. For example, for the bindPopup attribute method, it is the show parameter.

Rules of Use

$$ supports variables of simple types and variables decorated by \@State, \@Link, or \@Prop.
$$ supports the components listed below.

Component	Supported Parameter/Attribute	Initial API Version
Checkbox	select	10
CheckboxGroup	selectAll	10
DatePicker	selected	10
TimePicker	selected	10
MenuItem	selected	10
Panel	mode	10
Radio	checked	10
Rating	rating	10
Search	value	10
SideBarContainer	showSideBar	10
Slider	value	10
Stepper	index	10
Swiper	isOn	10
Tabs	index	10
TextArea	text	10
TextInput	text	10
TextPicker	selected, value	10
Toggle	isOn	10
AlphabetIndexer	selected	10
Select	selected, value	10
BindSheet	isShow	10
BindContentCover	isShow	10
bindPopup	show	8
Refresh	refreshing	8

When the variable bound to $$ changes, the UI is re-rendered synchronously.

Example

This example uses the text parameter of the <TextInput> component.

// xxx.ets
@Entry
@Component
struct TextInputExample {
  @State text: string = ''
  controller: TextInputController = new TextInputController()

  build() {
    Column({ space: 20 }) {
      Text(this.text)
      TextInput({ text: $$this.text, placeholder: 'input your word...', controller: this.controller })
        .placeholderColor(Color.Grey)
        .placeholderFont({ size: 14, weight: 400 })
        .caretColor(Color.Blue)
        .width(300)
    }.width('100%').height('100%').justifyContent(FlexAlign.Center)
  }
}

TextInputDouble