鸿蒙学习笔记 10 自定义构建函数

引言

我的想法

这个东西, 其实和组件差不太多, 只是调用方式上面存在一些不同. 所以本篇的篇幅会比较短, 不过内容也就是作为回顾使用. 没有太大的技术含量.

什么是自定义构建函数

和构造函数一样, 都有一个构字, 就说明是用来构建某种东西的函数. 在ArkUI框架中, 自然就是用来构建页面用的函数了.

我之所以说和组件差不多, 就是因为这两个都是能够构建页面用的, 而且使用起来也大差不差. 那么到底有多么一样呢? 下面我就来介绍一下如何使用.

使用

定义位置

既然是函数, 和组件一样, 有多个定义的位置. 不过因为是函数, 所以定义到别的文件意义不大. 自定义构建函数有两种定义的位置, 一种还是定义在struct Index{}的上面, 作为全局构造函数, 可以让这个页面上的所有组件使用; 另外一种就是定义在Index这个组件的里面, 成为组件的一个成员函数, 只能由本组件进行调用.

如何定义

在ArkTS中, 大部分内容都是由装饰器来定义的, 组件是@Component, 构建函数自然就是@Builder了√ 函数的里面还是直接写入布局就好, 不需要返回布局或者其他乱七八糟的内容.

和定义普通函数一样, 只不过在函数的上方给一个@Builder装饰器即可:

@Builder
function MyText() {
  Text("Hello World")
    .fontSize(40)
    .fontWeight(FontWeight.Bold)
}

调用的时候, 一摸一样, 直接调用这个函数即可:

struct Index {
  build() {
    Column() {
      // 直接调用, 就是这么简单明了
      MyText()
    }
    .width("100%")
  }
}

函数传参

既然都是函数了, 那么传递一个参数也是简简单单: 直接在函数的()中定义参数, 然后和正常函数一样使用参数即可:

@Builder
function MyText(myText: string) {
  Text(myText)
    .fontSize(40)
    .fontWeight(FontWeight.Bold)
}

struct Index {
  build() {
    Column() {
      // 填入想要显示的内容即可
      MyText("Hello Kaede")
    }
    .width("100%")
  }
}

局部自定义构建函数

如果你还记得一开始的时候, 我们使用@State装饰器定义的几个状态变量, 那么你一定能猜到如何使用@Builder来定义一个局部的自定义构建函数

类比@State text: string = "", 我们可以发现是没有前面的let关键字的: 所以函数也没有, 就是这么明了:

@Builder
MyText2(myText: string) {
  Text(myText)
    .fontSize(40)
    .fontWeight(FontWeight.Bold)
    .fontColor(Color.Orange)
}

使用的时候, 既然是结构体的一个成员方法, 自然需要使用.来调用啦, 其他的和上面介绍的全局一摸一样, 不多说:

@Entry
@Component
struct Index {
  build() {
    Column() {
      MyText("Hello World")
      this.MyText2("Text 2")
    }
    .width("100%")
  }

  @Builder
  MyText2(myText: string) {
    Text(myText)
      .fontSize(40)
      .fontWeight(FontWeight.Bold)
      .fontColor(Color.Orange)
  }
}

End

没啦, 就是这么短小. 希望能够对你有所帮助~, 感谢阅读!