鸿蒙双向绑定组件: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)
  }
}
相关推荐
一根甜苦瓜14 分钟前
Go语言Slice的一道骚题
开发语言·后端·golang
驰羽21 分钟前
[GO]Go语言泛型详解
开发语言·golang·xcode
NPE~22 分钟前
[手写系列]Go手写db — — 第五版(实现数据库操作模块)
开发语言·数据库·后端·golang·教程·手写系列·手写数据库
润 下23 分钟前
C语言——深入解析C语言指针:从基础到实践从入门到精通(二)
c语言·开发语言·经验分享·笔记·学习·程序人生
布伦鸽41 分钟前
C# WPF DataGrid使用Observable<Observable<object>类型作为数据源
开发语言·c#·wpf
say_fall1 小时前
精通C语言(4.四种动态内存有关函数)
c语言·开发语言
暴力求解1 小时前
c++类和对象(下)
开发语言·c++·算法
应用市场1 小时前
Qt插件机制实现动态组件加载详解
开发语言·qt
小秋学嵌入式-不读研版1 小时前
C65-枚举类型
c语言·开发语言·笔记
熬了夜的程序员2 小时前
【LeetCode】69. x 的平方根
开发语言·算法·leetcode·职场和发展·动态规划