鸿蒙双向绑定组件:TextArea、TextInput、Search、Checkbox,文本输入组件,图案解锁组件PatternLock

对象暂不支持双向绑定,

效果:

代码:

复制代码
@Entry
@Component
struct MvvmCase {
  @State
  isSelect: boolean = false
  @State
  searchText: String = ""
  @State
  inputText: string = ""
  @State
  areaText: string = ""

  build() {

    Grid() {
      GridItem() {
        Column() {
          Text("checkbox的双向绑定")
          Checkbox()
            .select($$this.isSelect) //双向绑定,不支持对象双向绑定
          Text("选中状态:" + this.isSelect)
          Button("改变选中状态")
            .onClick(() => {
              this.isSelect = !this.isSelect
            })
        }
      }
      .height(200)
      .backgroundColor(Color.Pink)

      GridItem() {
        Column() {

          Text("Search的双向绑定")

          Search({ value: $$this.searchText })
          Text("数据内容:" + this.searchText)
          Button("改变选中状态")
            .onClick(() => {
              this.searchText = "改值"
            })
        }
      }
      .height(200)
      .backgroundColor(Color.Pink)

      GridItem() {
        Column() {
          Text("TextInput的双向绑定")
          TextInput({ text: $$this.inputText })
          Text("数据内容:" + this.inputText)
          Button("改值")
            .onClick(() => {
              this.inputText = "改值"
            })
        }
      }
      .height(200)
      .backgroundColor(Color.Pink)

      GridItem() {
        Column() {
          Text("TextArea的双向绑定")
          TextArea({ text: $$this.areaText})
            .maxLength(5)//最大长度
          Text("数据内容:" + this.areaText)
          Button("改值")
            .onClick(() => {
              this.areaText = "改值"
            })
        }
      }
      .height(200)
      .backgroundColor(Color.Pink)

      GridItem(){
        PatternLock()//图案解锁
      }
    }
    .columnsTemplate("1fr 1fr")
    .columnsGap(20)
    .rowsGap(20)
  }
}
相关推荐
CodeCraft Studio4 小时前
PDF处理控件Aspose.PDF教程:使用 Python 将 PDF 转换为 Base64
开发语言·python·pdf·base64·aspose·aspose.pdf
零点零一4 小时前
VS+QT的编程开发工作:关于QT VS tools的使用 qt的官方帮助
开发语言·qt
lingchen19066 小时前
MATLAB的数值计算(三)曲线拟合与插值
开发语言·matlab
gb42152877 小时前
java中将租户ID包装为JSQLParser的StringValue表达式对象,JSQLParser指的是?
java·开发语言·python
一朵梨花压海棠go7 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
蒋星熠7 小时前
Flutter跨平台工程实践与原理透视:从渲染引擎到高质产物
开发语言·python·算法·flutter·设计模式·性能优化·硬件工程
翻滚丷大头鱼7 小时前
Java 集合Collection—List
java·开发语言
aramae7 小时前
C++ -- 模板
开发语言·c++·笔记·其他
胡耀超7 小时前
4、Python面向对象编程与模块化设计
开发语言·python·ai·大模型·conda·anaconda
索迪迈科技8 小时前
java后端工程师进修ing(研一版 || day40)
java·开发语言·学习·算法