$$运算符为系统内置组件提供TS变量的引用,使得TS变量和系统内置组件的内部状态保持同步。
内部状态具体指什么取决于组件。例如,TextInput组件的text参数。
说明
$$还用于@Builder装饰器的按引用传递参数,开发者需要注意两种用法的区别。
一、使用规则
当前$$支持基础类型变量,以及@State、@Link和@Prop装饰的变量。
当前$$支持的组件:
组件 | 支持的参数/属性 | 起始API版本 |
---|---|---|
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 | index | 10 |
Tabs | index | 10 |
TextArea | text | 10 |
TextInput | text | 10 |
TextPicker | selected、 | value |
Toggle | isOn 10 | |
AlphabetIndexer | selected | 10 |
Select | selected、 | value 10 |
BindSheet | isShow | 10 |
BindContentCover | isShow | 10 |
Refresh | refreshing | 8 |
GridItem | selected | 10 |
ListItem | selected | 10 |
- $$绑定的变量变化时,会触发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)}
}
效果图