鸿蒙双向绑定组件: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)
  }
}
相关推荐
程序员潘Sir5 小时前
鸿蒙应用开发从入门到实战(七):ArkTS组件声明语法
harmonyos·鸿蒙
程序员潘Sir1 天前
鸿蒙应用开发从入门到实战(六):ArkTS声明式UI和组件化
harmonyos·鸿蒙
侃侃_天下1 天前
最终的信号类
开发语言·c++·算法
echoarts1 天前
Rayon Rust中的数据并行库入门教程
开发语言·其他·算法·rust
Aomnitrix1 天前
知识管理新范式——cpolar+Wiki.js打造企业级分布式知识库
开发语言·javascript·分布式
每天回答3个问题1 天前
UE5C++编译遇到MSB3073
开发语言·c++·ue5
伍哥的传说1 天前
Vite Plugin PWA – 零配置构建现代渐进式Web应用
开发语言·前端·javascript·web app·pwa·service worker·workbox
小莞尔1 天前
【51单片机】【protues仿真】 基于51单片机八路抢答器系统
c语言·开发语言·单片机·嵌入式硬件·51单片机
我是菜鸟0713号1 天前
Qt 中 OPC UA 通讯实战
开发语言·qt
JCBP_1 天前
QT(4)
开发语言·汇编·c++·qt·算法