HarmonyOS:$$语法:内置组件双向同步

48 阅读1分钟

$$运算符为系统内置组件提供TS变量的引用,使得TS变量和系统内置组件的内部状态保持同步。
内部状态具体指什么取决于组件。例如,TextInput组件的text参数。

说明 $$还用于@Builder装饰器的按引用传递参数,开发者需要注意两种用法的区别。

一、使用规则

当前$$支持基础类型变量,以及@State@Link@Prop装饰的变量。
当前$$支持的组件:

组件支持的参数/属性起始API版本
Checkboxselect10
CheckboxGroupselectAll10
DatePickerselected10
TimePickerselected10
MenuItemselected10
Panelmode10
Radiochecked10
Ratingrating10
Searchvalue10
SideBarContainershowSideBar10
Slidervalue10
Stepperindex10
Swiperindex10
Tabsindex10
TextAreatext10
TextInputtext10
TextPickerselected、value10
ToggleisOn 10
AlphabetIndexerselected10
Selectselected、value 10
BindSheetisShow10
BindContentCoverisShow10
Refreshrefreshing8
GridItemselected10
ListItemselected10
  • $$绑定的变量变化时,会触发UI的同步刷新。

二、使用示例

以TextInput方法的text参数为例:

// TextInputExample.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)
  }
}

效果图 在这里插入图片描述