HarmonyOS - 组件外部输入状态管理装饰器:Param

前言

在上篇文章中,我们介绍了组件内部状态管理装饰器 Local 的使用方式和注意事项。但在实际开发场景中,并不总是管理组件内部的状态,大部分的场景我们需要与外部组件进行交互,这就用到了今天要介绍的状态管理装饰器:Param

Param

状态管理装饰器 Param 的作用是用来接受组件外部的输入。假设我们遇到这样一个开发场景:登录按钮要根据用户是否同意用户协议来改变它的状态,用户同意则登录按钮可用,用户不同意则按钮置灰。示例代码如下:

less 复制代码
@Entry
@ComponentV2
struct Index {
  @Local isOn: boolean = true;
  build() {
    Column() {
      Toggle({ type: ToggleType.Switch, isOn: $$this.isOn })
        .selectedColor('#007DFF')
        .switchPointColor('#FFFFFF')
        .onChange((isOn: boolean) => {
          console.info('Component status:' + isOn);
        })

      Child({isOn: this.isOn})
    }
    .width('100%')
    .height('100%')
  }
}

@ComponentV2
struct Child {
  @Param isOn: boolean = true;
  build() {
    Column() {
      Button("登录")
        .enabled(this.isOn)
    }
  }
}

UI 方面,我们用 Toggle 组件来模拟用户同意或不同意的操作。通过 Child 组件来展示登录按钮。在状态管理方面, Index 中有一个组件内的状态 isOn,我们通过双刀乐符号将其与 Toggle 的状态进行双向绑定。最后,在 Child 组件中,通过 @Param 修饰的 isOn 来控制登录按钮的状态。

这是 isOn 为 true 的示例图: 这是 isOn 为 false 的示例图:

了解完 Param 的基本用法后,我们来看一下它的注意事项。

注意事项

第一点需要注意的就是,Param 修饰的变量可以本地初始化,也可以外部进行传入。但两个条件必须满足一个,也就是说既没有本地初始化也没有外部传入的话,编译器报错。若是既进行了本地初始化,又在外部进行了传入,那外部传入的值会覆盖掉本地初始化的值。

本地初始化的示例代码上面已给出,下面看一下仅外部传入的方式,需要用 @Require 修饰:

less 复制代码
@Param @Require isOn: boolean;

若没有 @Require 修饰会编译报错:

sql 复制代码
// When a variable decorated with @Param is not assigned a default value, it must also be decorated with @Require. <ArkTSCheck>
@Param isOn: boolean;

第二个需要注意的就是 Param 修饰的变量是无法直接进行本地修改的,会编译报错:

kotlin 复制代码
Button("登录")
  .enabled(this.isOn)
  .onClick(() => {
  //Cannot assign to 'isOn' because it is a read-only property. <ArkTSCheck>
    this.isOn = false
  })

因为 Param 默认的是父子单向同步,若要实现父子双向同步的功能需要借助 @Event 来实现。

第三个和 Local 的限制一样,如果它修饰的是类,只能检测到类的赋值变化,检测不到类属性的变化。这里就不具体举代码示例了,跟 Local 中的逻辑是类似的。

总结

  • Param 用于组件外部输入状态,父子单向同步。
  • 它可以本地初始化,也可以外部输入。不能既没有本地初始化,也没有外部输入,若是要求外部输入需用 @Require
  • 本地无法修改,需配合 @Event
  • 如果修饰类,仅能观测到赋值变化,无法观测的属性变化。
相关推荐
mocoding6 分钟前
Flutter 3D 翻转动画flip_card三方库在鸿蒙版天气预报卡片中的实战教程
flutter·3d·harmonyos
2501_9209317038 分钟前
React Native鸿蒙跨平台实现推箱子游戏,完成玩家移动与箱子推动,当所有箱子都被推到目标位置时,玩家获胜
javascript·react native·react.js·游戏·ecmascript·harmonyos
qq_177767373 小时前
React Native鸿蒙跨平台数据使用监控应用技术,通过setInterval每5秒更新一次数据使用情况和套餐使用情况,模拟了真实应用中的数据监控场景
开发语言·前端·javascript·react native·react.js·ecmascript·harmonyos
烬头88213 小时前
React Native鸿蒙跨平台应用实现了onCategoryPress等核心函数,用于处理用户交互和状态更新,通过计算已支出和剩余预算
前端·javascript·react native·react.js·ecmascript·交互·harmonyos
小雨青年4 小时前
鸿蒙 HarmonyOS 6 | 系统能力 (06) 构建现代化通知体系 从基础消息到实况
华为·harmonyos
木斯佳4 小时前
HarmonyOS 6实战(源码解析篇):音乐播放器的音频焦点管理(上)——AudioSession与打断机制
华为·音视频·harmonyos
2601_949593655 小时前
基础入门 React Native 鸿蒙跨平台开发:卡片组件
react native·react.js·harmonyos
qq_177767376 小时前
React Native鸿蒙跨平台剧集管理应用实现,包含主应用组件、剧集列表、分类筛选、搜索排序等功能模块
javascript·react native·react.js·交互·harmonyos
qq_177767376 小时前
React Native鸿蒙跨平台自定义复选框组件,通过样式数组实现选中/未选中状态的样式切换,使用链式调用替代样式数组,实现状态驱动的样式变化
javascript·react native·react.js·架构·ecmascript·harmonyos·媒体
烬头88217 小时前
React Native鸿蒙跨平台采用了函数式组件的形式,通过 props 接收分类数据,使用 TouchableOpacity实现了点击交互效果
javascript·react native·react.js·ecmascript·交互·harmonyos