学习笔记(六):参数传递规则

规则:

  • 参数的类型必须与参数声明的类型一致,不允许undefined、null和返回undefined、null的表达式
  • 在自定义构建函数内部,不允许改变参数值。如果需要改变参数值,且同步回调用点,建议使用@Link
  • @Builder内UI语法遵循UI语法规则
  • 只有传入一个参数,且参数需要直接传入对象字面量才会按引用传递该参数,其余传递方式均为按值传递。

一、按引用传递参数

按引用传递参数时,传递的参数可为状态变量,且状态变量的改变会引起@Builder方法内的UI刷新。ArkUI提供$$作为按引用传递参数的范式。

如下示例,传递参数 message给自定义构建函数,使用按引用传递方式,当点击button改变message值的时候,会导致@Builder方法内的UI刷新

// 参数传递规则示例
@Entry
@Component
struct ParmsTest {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column(){
     // 使用自定义构建函数,传入值message myComponentView({showContent:
this.message}) Button('点击修改内容') .fontSize(30) .type(ButtonType.Capsule) .onClick(()=>{ this.message = '内容变化' }) } } .height('100%') } } // 定义一个全局自定义构建函数 // 使用按引用传值方式 @Builder function myComponentView($$: { showContent: string }){ Row(){ Text($$.showContent) .fontSize(20) .fontColor(Color.Red) } }

 

二、按值传递参数

调用@Builder装饰的函数默认按值传递。当传递的参数为状态变量时,状态变量的改变不会引起@Builder方法内的UI刷新。所以当使用状态变量的时候,推荐使用按引用传递

如下示例,传递参数 message给自定义构建函数,使用按值传递方式,当点击button改变message值的时候,并不会导致@Builder方法内的UI刷新

// 参数传递规则示例
@Entry
@Component
struct ParmsTest {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column(){
        otherComponent(this.message,'按值传递参数')
        Button('点击修改内容')
          .fontSize(30)
          .type(ButtonType.Capsule)
          .onClick(()=>{
            this.message = '内容变化'
          })
      }
    }
    .height('100%')
  }
}

// 定义一个全局自定义构建构建函数
// 使用按值传递参数方式
@Builder function otherComponent(showContent:string,typeContent:string){
  Column(){
    Text(showContent)
      .fontSize(30)
      .fontColor(Color.Blue)
    Text('传递方式:'+typeContent)
    .fontSize(30)
      .fontColor(Color.Blue)
  }
}

 

posted @ 2024-10-27 10:52  听着music睡  阅读(37)  评论(0编辑  收藏  举报