鸿蒙双向绑定组件: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)
  }
}
相关推荐
波诺波12 分钟前
通用装饰器示例
开发语言·python
沐知全栈开发12 分钟前
Maven POM 简介
开发语言
艾莉丝努力练剑26 分钟前
【C++模版进阶】如何理解非类型模版参数、特化与分离编译?
linux·开发语言·数据结构·c++·stl
kaikaile199531 分钟前
MATLAB实现自适应卡尔曼滤波(AKF)
开发语言·matlab
立志成为大牛的小牛37 分钟前
数据结构——二十五、邻接矩阵(王道408)
开发语言·数据结构·c++·学习·程序人生
007php00740 分钟前
猿辅导Java面试真实经历与深度总结(二)
java·开发语言·python·计算机网络·面试·职场和发展·golang
惊鸿.Jh1 小时前
C++可变参数模板
开发语言·python
素素.陈1 小时前
向RAGFlow中上传文档到对应的知识库
开发语言·python
万粉变现经纪人4 小时前
如何解决 pip install -r requirements.txt 私有索引未设为 trusted-host 导致拒绝 问题
开发语言·python·scrapy·flask·beautifulsoup·pandas·pip
qq_479875434 小时前
C++ std::Set<std::pair>
开发语言·c++