鸿蒙Next内置组件双向同步$$使用方法总结

一、$$语法概述

在鸿蒙Next开发中，$$语法为系统内置组件提供了一种强大的双向同步机制，用于实现TypeScript（TS）变量与系统内置组件内部状态之间的同步。这一特性使得开发者能够更加便捷地管理组件状态，确保用户界面（UI）与应用数据的一致性，提升用户体验。

二、使用规则

（一）变量类型支持

1. 基础类型变量：包括数字（如number）、字符串（string）、布尔值（boolean）等常见的基础数据类型。这些基础类型变量可以直接与支持$$语法的内置组件属性进行双向绑定，实现数据的同步更新。

2. 装饰器修饰的变量：

   • @State装饰的变量：用于在组件内部管理本地状态，$$能够使其与组件属性保持同步，方便在组件内部响应状态变化并更新UI。
   • @Link装饰的变量：主要用于实现父子组件或不同组件之间的双向数据绑定，通过$$，可以确保数据在多个组件间的一致性传递和同步更新。
   • @Prop装饰的变量：用于组件间的数据传递，$$语法使这些传递的数据与组件内部状态实时同步，便于组件间的协同工作。

（二）支持的内置组件及属性

以下是部分支持$$语法的内置组件及其对应的属性（起始API版本如表格所示）：

组件	属性	起始API版本
Checkbox	select	10
CheckboxGroup	selectAll	10
DatePicker	selected	10
TimePicker	selected	10
MenuItem	selected	10
Panel	mode	10
Radio	checked	10
Rating	rating	10
Search	value	10
SideBarContainer	showSideBar	10
Slider	value	10
Stepper	index	10
Swiper	index	10
Tabs	index	10
TextArea	text	10
TextInput	text	10
TextPicker	selected、value	10
Toggle	isOn	10
AlphabetIndexer	selected	10
Select	selected、value	10
BindSheet	isShow	10
BindContentCover	isShow	10
Refresh	refreshing	8
GridItem	selected	10
ListItem	selected	10

（三）同步机制

1. 当使用$$语法将TS变量与组件属性绑定后，任何一方的变化都会立即触发另一方的更新。例如，若绑定的变量值发生改变，组件会自动刷新以显示新的值；反之，当用户在组件中进行操作导致组件属性变化时，绑定的变量也会同步更新，从而保证数据的一致性。

三、使用示例

（一）以TextInput组件为例

1. 假设我们有一个简单的输入框场景，希望实时获取用户输入的文本并进行处理。

   // xxx.ets
   @Entry
   @Component
   struct TextInputExample {
     // 使用@State装饰器声明一个text变量，用于存储输入框中的文本
     @State text: string = ''
     // 创建一个TextInputController实例，用于控制TextInput组件的行为（可选，根据需求）
     controller: TextInputController = new TextInputController()
     build() {
    Column({ space: 20 }) {
      // 显示当前text变量的值
      Text(this.text)
      // 使用$$语法将text变量与TextInput组件的text参数绑定，实现双向同步
      TextInput({ text: $$this.text, placeholder: 'input your word...', controller: this.controller })
     .placeholderColor(Color.Grey)
     .placeholderFont({ size: 14, weight: 400 })
     .caretColor(Color.Blue)
     .width(300)
    }.width('100%').height('100%').justifyContent(FlexAlign.Center)
     }
   }

2. 在上述代码中：

   • 首先，通过@State声明了text变量，并初始化为空字符串。
   • 然后，在TextInput组件中，使用$$this.text将text变量与组件的text参数进行绑定。
   • 当用户在输入框中输入文本时，text变量会实时更新，同时Text组件会显示最新的输入内容。反之，如果在代码中修改text变量的值，输入框中的显示也会相应改变。

（二）其他组件的类似用法

1. 对于其他支持$$语法的组件，使用方法类似。例如，对于Checkbox组件：

   @Entry
   @Component
   struct CheckboxExample {
     @State isChecked: boolean = false
     build() {
    Column {
      Checkbox({ select: $$this.isChecked })
      Text(`Checkbox is ${this.isChecked? 'checked' : 'unchecked'}`)
    }
     }
   }

2. 这里，@State装饰的isChecked变量与Checkbox组件的select属性通过$$绑定。当用户点击复选框改变其状态时，isChecked变量会更新，Text组件也会显示相应的提示信息。

四、注意事项

1. 虽然$$语法在双向同步方面提供了很大的便利，但开发者需要谨慎使用，避免过度复杂的双向绑定关系导致代码难以维护。在设计组件和状态管理时，应尽量遵循清晰、简洁的原则，确保数据流向的可理解性。
2. 注意$$语法在不同组件和属性上的行为可能存在细微差异，尤其是在处理复杂组件或涉及多个状态变量的情况下。开发者应充分测试不同场景下的功能，以确保应用的稳定性和正确性。
3. 当与其他状态管理机制（如AppStorage、LocalStorage等）结合使用时，要注意避免冲突和不必要的重复操作，确保整个应用的状态管理逻辑协调一致。例如，如果同时使用$$绑定和AppStorage进行状态管理，需要明确各自的职责和数据更新时机，避免数据不一致的问题。