HarmonyOS应用开发-ArkTS语言的装饰器之@Builder

本篇我们看看装饰器的玩法

River_ly

1293人浏览 · 2024-03-15 16:49:21

River_ly · 2024-03-15 16:49:21 发布

前言

我们前面已经初步的玩了下 Builder 初步知道他是干啥的在 builde()函数当中不允许调用没有用@Builder装饰的方法,否则编译报错.可以将重复使用的UI元素抽象成一个方法，在build方法里调用

但是我们一般都有传递参数的操作所以本篇我们看看具体的玩法.

装饰器的玩法

我们简单回顾一下 @ Builde 咋玩

在 struct 当中我们定义一个带有装饰器的函数

定义的语法：

 @Builder xxxxxx() {} 
@Entry
@Component
struct BuilderTest {

  @Builder good() {
    Text("哎哟! 你干嘛!!!!!").fontSize(30)
  }

  build() {
    Row() {
      Column() {

        // 可直接调用
        this.good()

      }
      .width('100%')
    }
    .height('100%')
  }
}

自定义构建函数

允许在自定义组件内定义一个或多个@Builder方法，该方法被认为是该组件的私有、特殊类型的成员函数。

自定义构建函数可以在所属组件的build方法和其他自定义构建函数中调用，但不允许在组件外调用。
在自定义函数体中，this指代当前所属组件，组件的状态变量可以在自定义构建函数内访问。建议通过this访问自定义组件的状态变量而不是参数传递。

全局函数

语法: @Builder function xxxxx(){ ... }

全局的自定义构建函数可以被整个应用获取，不允许使用this和bind方法。
如果不涉及组件状态变化，建议使用全局的自定义构建方法

自定义函数参数传递

参数传递有按值传递和按引用传递两种,后面会讲到.

参数的类型必须与参数声明的类型一致，不允许undefined、null和返回undefined、null的表达式。
在自定义构建函数内部，不允许改变参数值。如果需要改变参数值，且同步回调用点，官方建议使用@Link 后面会讲到如果感兴趣可以去官方文档看看.

按值传递

按引用传递参数时传递的参数可为状态变量且状态变量的改变会引起@Builder方法内的UI刷新

ArkUI提供$$作为按引用传递参数的范式

可以看到需要传递一个参数

@Builder function GlobalBuilder() {
  Text("我是全局的函数").fontSize(30)
}

// ArkUI提供$$作为按引用传递参数的范式。
@Builder function GlobalParams($$: { name: string }) {
  Row() {
    Text(`按引用使用状态变量: ${$$.name} `).fontSize(30)
  }
}

@Entry
@Component
struct BuilderTest {
  // 这里面都是私有的哦
  @Builder good1() {
    TextInput({
      placeholder: "我是输入框",
      text: "哈哈哈"
    }).fontSize(30)
  }

  @Builder good2() {
    Text("哎哟! 你干嘛!!!!!").fontSize(30)
  }

  @State label: string = 'Hello';

  build() {
    Row() {
      Column() {

        // 直接调用全局函数传递 name 参数
        GlobalParams({ name: this.label })
        Button('Click me').onClick(() => {
          // 点击“Click me”后，UI从“Hello”刷新为“ArkUI”
          this.label = 'ArkUI';
        })

        // // 可直接调用
        // this.good1()
        // this.good2()
        // // 不需要 this
        // GlobalBuilder()
        // // 导入组件
        // b2()
      }
      .width('100%')
    }
    .height('100%')
  }
}

// 其他的自定义组件
@Component
struct b2 {

  build() {
    // 不需要 this
    GlobalBuilder()
  }
}

按值传递

调用@Builder装饰的函数默认按值传递 xxxx(名称: 类型) {}

当传递的参数为状态变量时状态变量的改变不会引起@Builder方法内的UI刷新

所以当使用状态变量的时候必须使用引用传递

@Builder function GlobalBuilder() {
  Text("我是全局的函数").fontSize(30)
}

// ArkUI提供$$作为按引用传递参数的范式。
@Builder function GlobalParams($$: { name: string }) {
  Row() {
    Text(`按引用使用状态变量: ${$$.name} `).fontSize(30)
  }
}

@Builder function GlobalBuilderAge(age: Number) {
  Text(`大哥你多少岁,${age}`).fontSize(30)
}

@Entry
@Component
struct BuilderTest {

  @State age :Number = 1;

  build() {
    Row() {
      Column() {
        // 引用传递 直接调用全局函数传递 name 参数
        // GlobalParams({ name: this.label })
        // Button('Click me').onClick(() => {
        //   // 点击“Click me”后，UI从“Hello”刷新为“ArkUI”
        //   this.label = 'ArkUI';
        // })
        // 按值传递参数 如果传递的是引用类型则拿不到
        GlobalBuilderAge(this.age)
        Button('Click me').onClick(() => {
          // 点击“Click me”后，UI从“Hello”刷新为“ArkUI”
          this.age = 18
        })

        // // 可直接调用
        // this.good1()
        // this.good2()
        // // 不需要 this
        // GlobalBuilder()
        // // 导入组件
        // b2()
      }
      .width('100%')
    }
    .height('100%')
  }
}

// 其他的自定义组件
@Component
struct b2 {
  build() {
    // 不需要 this
    GlobalBuilder()
  }
}

值传递即可,如果要传递引用则使用 按引用传递参数否则拿不到数据!!!!

@Builder function GlobalBuilder() {
    Text("我是全局的函数").fontSize(30)
}

// ArkUI提供$$作为按引用传递参数的范式。
@Builder function GlobalParams($$: { name: string }) {
    Row() {
        Text(`按引用使用状态变量: ${$$.name} `).fontSize(30)
    }
}

@Builder function GlobalBuilderAge(age: Number) {
    Text(`大哥你多少岁,${age}`).fontSize(30)
}

@Entry
@Component
struct BuilderTest {

    @State age :Number = 1;

    build() {
        Row() {
            Column() {
                // 按值传递参数 如果传递的是引用类型则拿不到
                GlobalBuilderAge(18)

                // // 可直接调用
                // this.good1()
                // this.good2()
                // // 不需要 this
                // GlobalBuilder()
                // // 导入组件
                // b2()
            }
            .width('100%')
        }
        .height('100%')
    }
}

// 其他的自定义组件
@Component
struct b2 {
    build() {
        // 不需要 this
        GlobalBuilder()
    }
}

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（Harmony NEXT）资料用来跟着学习是非常有必要的。

这份鸿蒙（Harmony NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，

内容包含了：（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

如果你是一名有经验的资深Android移动开发、Java开发、前端开发、对鸿蒙感兴趣以及转行人员，可以直接领取这份资料

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

鸿蒙（Harmony NEXT）最新学习路线

HarmonOS基础技能

HarmonOS就业必备技能
HarmonOS多媒体技术

鸿蒙NaPi组件进阶

HarmonOS高级技能

初识HarmonOS内核
实战就业级设备开发

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料