前言
在上篇文章中,我们介绍了组件内部状态管理装饰器 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
。 - 如果修饰类,仅能观测到赋值变化,无法观测的属性变化。