harmony 鸿蒙$$ Syntax: Two-Way Synchronization of Built-in Components
$$ 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)
}
}
你可能感兴趣的鸿蒙文章
harmony 鸿蒙app.json5 Configuration File
harmony 鸿蒙Internal Structure of the app Tag
harmony 鸿蒙Application Configuration File Overview (FA Model)
harmony 鸿蒙Application Configuration File Overview (Stage Model)
harmony 鸿蒙Application Installation and Uninstallation Process
harmony 鸿蒙Application Package Overview
harmony 鸿蒙Application Package Structure in FA Model
- 所属分类: 后端技术
- 本文标签:
热门推荐
-
2、 - 优质文章
-
3、 gate.io
-
8、 golang
-
9、 openharmony
-
10、 Vue中input框自动聚焦