鸿蒙Next 支持数据双向绑定的组件:Checkbox--Search--TextInput

Checkbox

语法,$$绑定的变量发生变化时,会触发UI的刷新 ```javascript @Entry @Component struct MvvmCase { @State isMarry:boolean = false @State searchText:string = '' build() { Grid(){ GridItem(){ Column(){ Text("checkbox 的双向绑定") Checkbox() .select($$this.isMarry) Text(this.isMarry+"") Button('改变') .onClick(()=>{ this.isMarry=!this.isMarry }) } } .height(200) .backgroundColor(Color.Yellow) } .width('100%') .height('100%') .columnsTemplate("1fr 1fr") .columnsGap(20) .rowsGap(20) } } ``` ![](https://file.jishuzhan.net/article/1770739551564730370/43ca675c8e14472cb93ab61996b0400f.webp)![](https://file.jishuzhan.net/article/1770739551564730370/eab5dd4e8386e965fab4c25531e87585.webp) #### Search ![](https://file.jishuzhan.net/article/1770739551564730370/a597328db2eb81452a16d5d9f8381194.webp) ```javascript @Entry @Component struct MvvmCase { @State isMarry:boolean = false @State searchText:string = '' build() { Grid(){ GridItem(){ Column(){ Text("search 的双向绑定") Search({value:$$this.searchText}) Text(this.searchText+"") Button('改变') .onClick(()=>{ this.searchText='老宋你好' }) } } .height(200) .backgroundColor(Color.Pink) } .width('100%') .height('100%') .columnsTemplate("1fr 1fr") .columnsGap(20) .rowsGap(20) } } ``` ​​​​​​​![](https://file.jishuzhan.net/article/1770739551564730370/4fee6f0742e74fdc30860d4ce8e99f5c.webp) ![](https://file.jishuzhan.net/article/1770739551564730370/8be4fb59ce992e8c331ac5d9c9c2a639.webp) #### TextInput ![](https://file.jishuzhan.net/article/1770739551564730370/71a4263caae50583abb19bbb3d666f2a.webp) @Entry @Component struct MvvmCase { @State isMarry:boolean = false @State searchText:string = '' controller: TextInputController = new TextInputController() build() { Grid(){ GridItem(){ Column(){ Text("TextInput 的双向绑定") TextInput({ text: $$this.searchText, placeholder: 'TextInput 的双向绑定', controller: this.controller }) Text(this.searchText+"") Button('改变') .onClick(()=>{ this.searchText='老宋你好01' }) } } .height(200) .backgroundColor(Color.Pink) } .width('100%') .height('100%') .columnsTemplate("1fr 1fr") .columnsGap(20) .rowsGap(20) } } ![](https://file.jishuzhan.net/article/1770739551564730370/aeb1a1252f435d1db3d980a4a97b0c96.webp)![](https://file.jishuzhan.net/article/1770739551564730370/def7a3062abb85a538ed26f840a3b983.webp) 还有很多组件都支持双向绑定 ![](https://file.jishuzhan.net/article/1770739551564730370/a5b70bdf9fe8f127f084b10b7169045f.webp)

相关推荐
麦聪聊数据7 小时前
数据服务轻量化:基于API架构的企业数据统一交付与消费方案
数据库·架构
努力发光的程序员7 小时前
互联网大厂Java面试故事:Spring Boot与微服务全栈技术实战问答
java·spring boot·spring cloud·微服务·kafka·hibernate·面试技巧
无相孤君7 小时前
我用 Docker + JunimoServer 搭了一个星露谷物语无头服,还顺手做了个本地管理面板
linux·游戏·docker·开源
SuperArc19997 小时前
jar包文件修改(java编译与反编译)
java·开发语言·后端·jar·反编译
小碗羊肉8 小时前
【Redis | 第三篇】缓存(Cache)
数据库·redis·缓存
阿维的博客日记8 小时前
简单介绍一下CompletableFuture,从最简单的用法介绍,
java
OceanBase数据库官方博客8 小时前
常州公积金采用OceanBase,三年稳定运行并实现智慧服务新范式
数据库·oceanbase
zandy10118 小时前
2026 BI平台安全治理体系构建:从权限模型到零信任架构
java·开发语言
SuniaWang8 小时前
《Agentx专栏》02-技术选型:预算有限时如何做出正确的技术决策
java·spring·架构·langchain·milvus·agenx·opl
羡寒.8 小时前
接口突然变慢,你怎么排查?
java·后端·spring