说明
通过 $$ 语法,当改变 UI 时,同时会改变 @State 状态变量的值
类似 VUE、React 的双向绑定
支持的状态变量
当前$$支持基础类型变量,以及 @State、@Link 和 @Prop 装饰的变量。
支持的组件
| 组件 | 支持的参数/属性 |
|---|---|
| Checkbox | select |
| CheckboxGroup | selectAll |
| DatePicker | selected |
| TimePicker | selected |
| MenuItem | selected |
| Panel | mode |
| Radio | checked |
| Rating | rating |
| Search | value |
| SideBarContainer | showSideBar |
| Slider | value |
| Stepper | index |
| Swiper | index |
| Tabs | index |
| TextArea | text |
| TextInput | text |
| TextPicker | selected、value |
| Toggle | isOn |
| AlphabetIndexer | selected |
| Select | selected、value |
| BindSheet | isShow |
| BindContentCover | isShow |
| Refresh | refreshin |
| GridItem | selected |
| ListItem | selected |
例子
// xxx.ets
@Entry
@Component
struct TextInputExample {
@State text: string = ''
build() {
Column({ space: 20 }) {
Text(this.text)
TextInput({ text: $$this.text })
.placeholderColor(Color.Grey)
.width(300)
}.width('100%').height('100%').justifyContent(FlexAlign.Center)
}
}