鸿蒙开发:了解$$运算符

程序员一鸣
• 阅读 4

前言

本文基于Api13

有这样一个需求,一个Text组件,一个TextInput组件,要求Text组件同步展示TextInput组件里的内容,也就是TextInput组件输入什么内容,就要在Text组件里展示什么内容,这个需求如何实现呢?

聪明的同学肯定能够想到,这不就是双向绑定吗,这还不简单,@State装饰器就可以搞定啊,确实,@State装饰器可以实现,当TextInput的内容发生变化时,我们给@State装饰器修饰的变量进行赋值,Text组件加载这个变量即可。

简单代码如下:

@Entry
@Component
struct Index {
  @State message: string = ""

  build() {
    Column() {
      Text(this.message)
        .fontSize(18)
      TextInput()
        .onChange((value: string) => {
          this.message = value
        })
    }.height("100%")
    .width("100%")
    .justifyContent(FlexAlign.Center)

  }
}

运行之后效果:

鸿蒙开发:了解$$运算符

那么除了以上的方式,还有没有一个更简单的方式呢?哎,必须有,这就是 $$ 运算符, 使用它,可以让双向绑定实现起来更加的简单,我们把代码修改一下:

 Text(this.message)
        .fontSize(18)
TextInput({ text: $$this.message })

以上的代码,运行之后,和上面的效果是一模一样的,可以看到,使用了$$运算符后,我们不用再单独的去监听输入框的内容变化,它自身就实现了TS变量和系统组件的内部状态保持同步。

什么是$$运算符

一句话解读:$$运算符是系统组件提供ts变量的引用,使用它可以使得ts变量和组件的内部状态保持同步,有一点需要知道,那就是当前仅基础类型变量,至于装饰器的话,也仅仅支持三个,分别是@State、@Link和@Prop装饰器。

支持双向绑定的组件就比较多了,凡是有内部状态属性的组件基本上都支持,像输入组件,单选组件,多选组件等等都是支持的,目前支持的组件列表如下:

组件 支持的参数/属性
Checkbox select
CheckboxGroup selectAll
DatePicker selected
TimePicker selected
MenuItem selected
Panel mode
Radio checked
Rating rating
Search value
SideBarContainer showSideBar
Slider value
Stepper index
Swiper index
Tabs index
TextArea text
TextInput text
TextPicker selected、value
Toggle isOn
AlphabetIndexer selected
Select selected、value
BindSheet isShow
BindContentCover isShow
Refresh refreshing
GridItem selected
ListItem selected

使用方式,基本上是一致的,比如Checkbox组件,我们实现select属性,进行绑定即可。

Text(this.select.toString())
    Checkbox()
      .select($$this.select)

相关总结

$运算符相对来说还是比较的简单,它的出现,解决了组件状态和变量同步的问题,还有一点需要知道,在$绑定的变量变化时,会触发UI的同步刷新,当然了在你使用到该变量的时候。

本文标签:HarmonyOS/ArkUI

点赞
收藏
评论区
推荐文章
vue 节流、拖拽指令
1、在开发中时长遇到按钮重复点击或者多次点击的情况比如创建订单或者其他情况,当然也可以通过设置变量开关,禁止状态,这里就分享一个节流的指令javascriptVUE3好像指令的生命周期和组件的生命周期同步了//立即执行版本,点击后会执行一次,然后进入定时器exportconstthrottle{inserted:function
Dax Dax
3年前
Vue中计算属性和 watch的区别
通俗来讲,既能用computed实现又可以用watch监听来实现的功能,推荐用computed,重点在于computed的缓存功能computed计算属性是用来声明式的描述一个值依赖了其它的值,当所依赖的值或者变量改变时,计算属性也会跟着改变;watch监听的是已经在data中定义的变量,当该变量变化时,会触发watch中的方法;根据
Stella981 Stella981
3年前
Rust入坑指南:常规套路
搭建好了开发环境之后,就算是正式跳进Rust的坑了,今天我就要开始继续向下挖了。<!more由于我们初来乍到,对Rust还不熟悉,所以我决定先走一遍常规套路。变不变的变量学习一门语言第一个要了解的当然就是变量啦。Rust使用关键字let来定义变量。我们写一个简单的demo!demo1(https://oscim
Stella981 Stella981
3年前
AbstractQueuedSynchronizer简单使用
AQS是JUC中很多同步组件的构建基础,简单来讲,它内部实现主要是状态变量state和一个FIFO队列来完成,同步队列的头结点是当前获取到同步状态的结点,获取同步状态state失败的线程,会被构造成一个结点(或共享式或独占式)加入到同步队列尾部(采用自旋CAS来保证此操作的线程安全),随后线程会阻塞;释放时唤醒头结点的后继结点,使其加入对同步状态的争夺中。
Stella981 Stella981
3年前
Linux 多线程
I.同步机制线程间的同步机制主要包括三个:互斥锁:以排他的方式,防止共享资源被并发访问;互斥锁为二元变量,状态为0开锁、1上锁;开锁必须由上锁的线程执行,不受其它线程干扰.条件变量:
Easter79 Easter79
3年前
SwiftUI 跨组件数据传递
作者:Cyandev,iOS和MacOS开发者,目前就职于字节跳动0x00前言众所周知,SwiftUI的开发模式与React、Flutter非常相似,即都是声明式UI,由数据驱动(产生)视图,视图也会与数据自动保持同步,框架层会帮你处理“绑定”的问题。在声明式UI中不存在命令式地让一个视图变成xxx
小万哥 小万哥
1年前
C++ 解引用与函数基础:内存地址、调用方法及声明
C解引用获取内存地址和值在上一页的示例中,我们使用了指针变量来获取变量的内存地址(与引用运算符&一起使用)。但是,你也可以使用指针来获取变量的值,这可以通过使用运算符(解引用运算符)来实现:cstringfood"Pizza";//变量声明stri
京东云开发者 京东云开发者
10个月前
鸿蒙跨端实践-ArkTS和CAPI的混合开发实现
一、背景在文章中,讲述了动态化适配鸿蒙的方案实现,当在鸿蒙系统进行UI渲染的时候,我们使用了系统的组件进行递归渲染。在iOS和Android也是借助各自系统组件进行的渲染,但是在鸿蒙系统会存在以下4个严重问题:1.UI层级过多以金融APP理财频道页中的一个
少湖说 少湖说
7个月前
鸿蒙Flutter实战:02-Windows环境搭建踩坑指南
鸿蒙Flutter实战:02Windows环境搭建踩坑指南环境搭建1.下载FlutterSDK,配置环境变量鸿蒙FlutterSDK需要在。目前建议下载dev分支代码。需要配置以下用户变量注意鸿蒙开发需要安装Java和配置相关变量bashfluttersd
GeorgeGcs GeorgeGcs
17小时前
【HarmonyOS 5】鸿蒙中@State的原理详解
鸿蒙开发能力HarmonyOSSDK应用服务鸿蒙金融类应用(金融理财一、@State在鸿蒙中是做什么的?@State是HarmonyOSArkTS框架中用于管理组件状态的核心装饰器,其核心作用是实现数据驱动UI的响应式编程模式。通过将变量标记为@State