• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# $$语法:内置组件双向同步
2
3
4$$运算符为系统内置组件提供TS变量的引用,使得TS变量和系统内置组件的内部状态保持同步。
5
6
7内部状态具体指什么取决于组件。例如,[TextInput](../reference/arkui-ts/ts-basic-components-textinput.md)组件的text参数。
8
9
10> **说明:**
11>
12> $$还用于[@Builder装饰器的按引用传递参数](arkts-builder.md#按引用传递参数),开发者需要注意两种用法的区别。
13
14
15## 使用规则
16
17- 当前$$支持基础类型变量,以及\@State、\@Link和\@Prop装饰的变量。
18
19- 当前$$支持的组件
20
21  | 组件                                                         | 支持的参数/属性 | 起始API版本 |
22  | ------------------------------------------------------------ | --------------- | ----------- |
23  | [Checkbox](../reference/arkui-ts/ts-basic-components-checkbox.md) | select          | 10          |
24  | [CheckboxGroup](../reference/arkui-ts/ts-basic-components-checkboxgroup.md) | selectAll       | 10          |
25  | [DatePicker](../reference/arkui-ts/ts-basic-components-datepicker.md) | selected        | 10          |
26  | [TimePicker](../reference/arkui-ts/ts-basic-components-timepicker.md) | selected        | 10          |
27  | [MenuItem](../reference/arkui-ts/ts-basic-components-menuitem.md) | selected        | 10          |
28  | [Panel](../reference/arkui-ts/ts-container-panel.md)         | mode            | 10          |
29  | [Radio](../reference/arkui-ts/ts-basic-components-radio.md)  | checked         | 10          |
30  | [Rating](../reference/arkui-ts/ts-basic-components-rating.md) | rating          | 10          |
31  | [Search](../reference/arkui-ts/ts-basic-components-search.md) | value           | 10          |
32  | [SideBarContainer](../reference/arkui-ts/ts-container-sidebarcontainer.md) | showSideBar     | 10          |
33  | [Slider](../reference/arkui-ts/ts-basic-components-slider.md) | value           | 10          |
34  | [Stepper](../reference/arkui-ts/ts-basic-components-stepper.md) | index           | 10          |
35  | [Swiper](../reference/arkui-ts/ts-container-swiper.md)       | index       | 10          |
36  | [Tabs](../reference/arkui-ts/ts-container-tabs.md)           | index           | 10          |
37  | [TextArea](../reference/arkui-ts/ts-basic-components-textarea.md) | text            | 10          |
38  | [TextInput](../reference/arkui-ts/ts-basic-components-textinput.md) | text            | 10          |
39  | [TextPicker](../reference/arkui-ts/ts-basic-components-textpicker.md) | selected、value | 10          |
40  | [Toggle](../reference/arkui-ts/ts-basic-components-toggle.md) | isOn            | 10          |
41  | [AlphabetIndexer](../reference/arkui-ts/ts-container-alphabet-indexer.md) | selected        | 10          |
42  | [Select](../reference/arkui-ts/ts-basic-components-select.md) | selected、value | 10          |
43  | [BindSheet](../reference/arkui-ts/ts-universal-attributes-sheet-transition.md) | isShow | 10          |
44  | [BindContentCover](../reference/arkui-ts/ts-universal-attributes-modal-transition.md) | isShow | 10          |
45  | [Refresh](../reference/arkui-ts/ts-container-refresh.md) | refreshing | 8 |
46  | [GridItem](../reference/arkui-ts/ts-container-griditem.md) | selected | 10 |
47
48- $$绑定的变量变化时,会触发UI的同步刷新。
49
50
51## 使用示例
52
53以[TextInput](../reference/arkui-ts/ts-basic-components-textinput.md)方法的text参数为例:
54
55
56```ts
57// xxx.ets
58@Entry
59@Component
60struct TextInputExample {
61  @State text: string = ''
62  controller: TextInputController = new TextInputController()
63
64  build() {
65    Column({ space: 20 }) {
66      Text(this.text)
67      TextInput({ text: $$this.text, placeholder: 'input your word...', controller: this.controller })
68        .placeholderColor(Color.Grey)
69        .placeholderFont({ size: 14, weight: 400 })
70        .caretColor(Color.Blue)
71        .width(300)
72    }.width('100%').height('100%').justifyContent(FlexAlign.Center)
73  }
74}
75```
76
77
78![TextInputDouble](figures/TextInputDouble.gif)
79