鸿蒙双向绑定组件：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)
  }
}