ArkTS - @Builder自定义构建函数

发布时间:2024年01月01日

这个@Builder作用就是可以把组件样式抽离出来,写成公共组件,下边记录下全局自定义构建函数用法及注意的地方。

官方文档:开发者可以将重复使用的UI元素抽象成一个方法,在build方法里调用。

一、用法

下边代码,我在CommonBtn.ets文件中定义了两个函数,函数里边定义了按钮样式,这两个函数必须要用@Builder装饰器装饰(官方规定)。
一个是按引用传递的参数(引用传递参数必须写两个$符号,$符号的值就是:{ 参数名:参数类型})
另一个是按值传递的参数,引用和值传递区别下边记录,最后把函数导出。

// CommonBtn.ets
// 引用传递
@Builder
export function Btn1($$: {btnName: string}){
  Row() {
    Button($$.btnName).width(200).padding({left: 20, right: 20})
  }.justifyContent(FlexAlign.Center).width("100%").margin({top: 8,bottom: 8})
}
// 按值传递
@Builder
export function Btn2(btnName: string){
  Row() {
    Button(btnName).width(200).padding({left: 20, right: 20})
  }.justifyContent(FlexAlign.Center).width("100%").margin({top: 8,bottom: 8})
}

接下来在需要的页面导入:

// BuilderTest.ets
import {Btn1, Btn2} from "./CommonBtn"
@Entry
@Component
struct Test {
  @State btnText1: string = "引用传递按钮文字"
  @State btnText2: string = "值传递按钮文字"
  build() {
    Column() {
      // 引用传递
      Row() {
        Btn1({btnName:this.btnText1})
      }
      // 值传递
      Row() {
        Btn2(this.btnText2)
      }
      // 测试按引用传递参数 和 值传递参数的区别
      Button("改变两个按钮的文字").onClick(e => {
        this.btnText1 += 1
        this.btnText2 += 1
      })
    }
  }
}

页面样式如下:

二、引用传递和值传递区别

按引用传递参数的时候,自定义构建函数中的变量会实时更新
官方文档:按引用传递参数时,传递的参数可为状态变量,且状态变量的改变会引起@Builder方法内的UI刷新。ArkUI提供$$作为按引用传递参数的范式。

按值传递的时候,自定义构建函数中的变量不会更新
官方文档:
调用@Builder装饰的函数默认按值传递。当传递的参数为状态变量时,状态变量的改变不会引起@Builder方法内的UI刷新。所以当使用状态变量的时候,推荐使用按引用传递

测试:

当点击【改变两个按钮的文字】时,只有按引用传递的参数 实时更新了:

文章来源:https://blog.csdn.net/qq_42778001/article/details/135323671
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。