【HarmonyOS】鸿蒙开发中所使用的装饰器

1. 总结

关键字描述
@Builder轻量级的UI元素复用机制
@BuilderParam引用@Builder函数,类似于solt插槽
wrapBuilder封装@Builder函数为对象,可以组件内进行传递
@Styles定义组件的重用样式 |
@Extend扩展组件的样式
stateStyles多态样式,类似CSS伪类
@AnimatableExtend定义可动画属性
@Require校验组件构造传参

2. @Builder装饰器

之前了解过自定义组件,自定义组件内部的UI结构固定,仅与使用方进行数据传递,如果我们有一个简单的样式需要复用,但弄成一个自定义组件就会比较重。所以ArkUI提供了一种更轻量的UI元素复用机制:@Builder。

@Builder所装饰的函数遵循build()函数语法规则,可以将重复使用的UI元素抽象成一个方法,在build()方法里进行调用。

被@Builder装饰的函数称为:自定义构建函数。

build()方法里只能调用 @Builder装饰的自定义构建函数。

2.1 自定义组件内自定义构建函数

基本使用:

// 定义语法
@Builder MyBuilderFunction(){ ... }

// 使用方法
this.MyBuilderFunction()

  • 只能在组件内部使用该自定义构建函数;
  • 自定义构建函数写法和build()相同,this指向当前组件,可以直接使用组件的状态变量,不需要通过状态传递;

2.2 全局自定义构建函数

基本使用:

// 定义语法
@Builder function MyGlobalBuilderFunction(){ ... }

// 使用方法
MyGlobalBuilderFunction()

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

2.3 参数传递规则

自定义构建函数的参数传递分为按值传递和按引用传递,遵守以下规则:

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

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

class Tmp {
  paramA1: string = ''
  paramB1: string = ''
}

@Builder function overBuilder(params : Tmp) {...}

示例:

class Tmp {
  paramA1: string = ''
}

@Builder function overBuilder(params: Tmp) {
  Row() {
    Text(`UseStateVarByReference: ${params.paramA1} `)
  }
}
@Entry
@Component
struct Parent {
  @State label: string = 'Hello';
  build() {
    Column() {
      // Pass the this.label reference to the overBuilder component when the overBuilder component is called in the Parent component.
      // 传递的是状态变量
      overBuilder({ paramA1: this.label })
      Button('Click me').onClick(() => {
        // After Click me is clicked, the UI text changes from Hello to ArkUI.
        this.label = 'ArkUI';
      })
    }
  }
}

按引用传递参数时,如果在@Builder方法内调用自定义组件,ArkUI提供$$作为按引用传递参数的范式:

class Tmp {
  paramA1: string = ''
  paramB1: string = ''
}

@Builder function overBuilder($$ : Tmp) {...}

示例:

class Tmp {
  paramA1: string = ''
}

@Builder function overBuilder($$: Tmp) {
  Row() {
    Column() {
      Text(`overBuilder===${$$.paramA1}`)
      // @Builder中又调用自定义组件,这里使用$$传递引用
      HelloComponent({message: $$.paramA1})
    }
  }
}

@Component
struct HelloComponent {
  @Link message: string; // 还会建立双向绑定

  build() {
    Row() {
      Text(`HelloComponent===${this.message}`)
      Button("change")
        .onClick(()=>{
          // 点击这里的时候会改变两个Text的文本
          this.message = "Change in the HelloComponent"
        })
    }
  }
}

@Entry
@Component
struct Index {
  @State label: string = 'Hello';
  build() {
    Column() {
      // Pass the this.label reference to the overBuilder component when the overBuilder component is called in the Parent component.
      overBuilder({paramA1: this.label})
      Button('Click me').onClick(() => {
        // After Click me is clicked, the UI text changes from Hello to ArkUI.
        this.label = 'ArkUI';
      })
    }
  }
}

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

@Builder function overBuilder(paramA1: string) {
  Row() {
    Text(`UseStateVarByValue: ${paramA1} `)
  }
}
@Entry
@Component
struct Parent {
  @State label: string = 'Hello';
  build() {
    Column() {
      overBuilder(this.label)
    }
  }
}

2. @BuilderParam装饰器:引用@Builder函数

当开发者创建了自定义组件,并想对该组件添加特定功能时,例如在自定义组件中添加一个点击跳转操作,若直接在组件内嵌入事件方法,将会导致所有引入该自定义组件的地方均增加了该功能。

为了解决这个问题,ArkUI引入了@BuilderParam装饰器,@BuilderParam用来装饰指向@Builder方法的变量,开发者可以在初始化自定义组件时对此属性赋值,为自定义组件增加特定的功能。该装饰器用于声明任意UI描述的一个元素,类似slot占位符。

上面是来自官方文档的介绍,其实就是类似于Vue框架的插槽slot。比如我们封装一个列表CellItem组件时,右边可能是箭头、Switch开关、文字等等,对于右边这部分内容,就可以使用@BuilderParam,让父组件定义CellItem组件右边的显示内容,把这部分内容“传”进去。

2.1 @BuilderParam的使用

@BuilderParam装饰的方法只能被自定义构建函数(@Builder装饰的方法)初始化,如果在API 11中和@Require结合使用,则必须父组件构造传参。

下面看一个简单的使用示例:

@Component
struct Child {
  // 这个自定义构建函数只是为了本地初始化customBuilderParam
  @Builder customBuilder() {}
  
  // 会使用父组件@Builder装饰的方法初始化子组件的@BuilderParam,会覆盖这里的本地初始化
  @BuilderParam customBuilderParam: () => void = this.customBuilder;

  build() {
    Column() {
      // 展示父组件@Builder中的内容
      this.customBuilderParam() 
    }
  }
}

@Entry
@Component
struct Parent {
  // 父组件中定义的自定义构建函数
  @Builder componentBuilder() {
    Text(`Parent builder `)
  }

  build() {
    Column() {
      // 将自定义构建函数传递给子组件
      Child({ customBuilderParam: this.componentBuilder })
    }
  }
}

示例效果图:

image.png

2.2 @BuilderParam和自定义构建函数参数要统一

@BuilderParam装饰的方法可以是有参数和无参数的两种形式,需与指向的@Builder方法类型匹配。@BuilderParam装饰的方法类型需要和@Builder方法类型一致。

class Tmp{
  label:string = ''
}

// 全局的自定义构建函数
@Builder function overBuilder($$ : Tmp) {
  Text($$.label)
    .width(400)
    .height(50)
    .backgroundColor(Color.Green)
}

@Component
struct Child {
  label: string = 'Child'
  @Builder customBuilder() {}
  // 无参数类型,指向的componentBuilder也是无参数类型
  @BuilderParam customBuilderParam: () => void = this.customBuilder;
  
  // 有参数类型,指向的overBuilder也是有参数类型的方法
  @BuilderParam customOverBuilderParam: ($$ : Tmp) => void = overBuilder;

  build() {
    Column() {
      this.customBuilderParam()
      // 调用时传递了参数
      this.customOverBuilderParam({label: 'global Builder label' } )
    }
  }
}

@Entry
@Component
struct Parent {
  label: string = 'Parent'

  @Builder componentBuilder() {
    Text(`${this.label}`)
  }

  build() {
    Column() {
      this.componentBuilder()
      Child({ customBuilderParam: this.componentBuilder, customOverBuilderParam: overBuilder })
    }
  }
}

示例效果图: 在这里插入图片描述

2.3 this指向问题

@Component
struct Child {
  label: string = `Child`
  @Builder customBuilder() {}
  @Builder customChangeThisBuilder() {}
  
  @BuilderParam customBuilderParam: () => void = this.customBuilder;
  @BuilderParam customChangeThisBuilderParam: () => void = this.customChangeThisBuilder;

  build() {
    Column() {
      this.customBuilderParam()
      this.customChangeThisBuilderParam()
    }
  }
}

@Entry
@Component
struct Parent {
  label: string = `Parent`

  @Builder componentBuilder() {
    // 需要注意这里的this指向
    Text(`${this.label}`)
  }

  build() {
    Column() {
      // 直接调用组件内的自定义构建函数,this指向Parent组件;
      this.componentBuilder()
      // customBuilderParam,this指向child组件;
      // customChangeThisBuilderParam:箭头函数的this指向的是宿主对象,这里也是Parent组件;
      Child({ customBuilderParam: this.componentBuilder, customChangeThisBuilderParam: ():void=>{this.componentBuilder()} })
    }
  }
}

效果图:

image.png

2.4 尾随闭包

我们在使用Column Row等容器类组件时,会在 { } 中写子组件,这就是尾随闭包。可以将尾随闭包内的内容看做@Builder装饰的函数传给@BuilderParam:

@Component
struct CustomContainer {
  @Prop header: string = '';
  @Builder closerBuilder(){}
  
  // 使用父组件的尾随闭包{}(@Builder装饰的方法)初始化子组件@BuilderParam
  @BuilderParam closer: () => void = this.closerBuilder

  build() {
    Column() {
      Text(this.header)
        .fontSize(30)
      this.closer()
    }
  }
}

@Builder function specificParam(label1: string, label2: string) {
  Column() {
    Text(label1)
      .fontSize(30)
    Text(label2)
      .fontSize(30)
  }
}

@Entry
@Component
struct CustomContainerUser {
  @State text: string = 'header';

  build() {
    Column() {
      // 创建CustomContainer,在创建CustomContainer时,通过其后紧跟一个大括号“{}”形成尾随闭包
      // 作为传递给子组件CustomContainer @BuilderParam closer: () => void的参数
      CustomContainer({ header: this.text }) {
        Column() {
          specificParam('testA', 'testB')
        }.backgroundColor(Color.Yellow)
        .onClick(() => {
          this.text = 'changeHeader';
        })
      }
    }
  }
}

效果图:

在这里插入图片描述

需要注意:

  • 使用尾随闭包的自定义组件内部有且仅有一个使用@BuilderParam装饰的属性;
  • 此场景下自定义组件不支持通用属性;

3. wrapBuilder: 封装全局@Builder

全局@Builder作为wrapBuilder的参数返回WrappedBuilder对象,实现全局@Builder可以进行赋值和传递。

上面是官方的解释,简单理解就是可以通过wrapBuilder函数将全局的@Builder函数封装成WrappedBuilder对象,通过这个对象的builder可以调用到全局@Builder函数,这样就可以将全局@Builder函数以包装对象的形式在组件间进行赋值和传递了。

3.1 接口说明

wrapBuilder是一个模板函数,返回一个WrappedBuilder对象。

// declare关键字主要用于声明变量、模块、函数或类的类型,不需要立即实现它们
declare function wrapBuilder< Args extends Object[]>(builder: (...args: Args) => void): WrappedBuilder;

同时WrappedBuilder对象也是一个模板类:

// 模板参数Args extends Object[] 是需要包装的builder函数的参数列表
declare class WrappedBuilder< Args extends Object[]> {
  builder: (...args: Args) => void;

  constructor(builder: (...args: Args) => void);
}

使用方法如下:

let builderVar: WrappedBuilder<[string, number]> = wrapBuilder(MyBuilder)
let builderArr: WrappedBuilder<[string, number]>[] = [wrapBuilder(MyBuilder)] //可以放入数组

需要注意⚠️:

  • wrapBuilder方法只能传入全局@Builder方法;
  • wrapBuilder方法返回的WrappedBuilder对象的builder属性方法只能在struct(组件内部)内部使用;

3.2 使用场景1

将wrapBuilder赋值给globalBuilder,且把MyBuilder作为wrapBuilder参数,用来替代MyBuilder不能直接赋值给globalBuilder:

// 这是一个全局的@Builder修饰的函数(自定义构建函数),需要两个参数,类型为string number
@Builder
function MyBuilder(value: string, size: number) {
  Text(value)
    .fontSize(size)
}

// 这里的[string, number]对应上面自定义构建函数的参数类型,是一个数组哦
let globalBuilder: WrappedBuilder<[string, number]> = wrapBuilder(MyBuilder);

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Row() {
      Column() {
        // 这里可以直接调用builder,其实就是调用最上面的那个全局的@Builder自定义构建函数
        globalBuilder.builder(this.message, 50)
      }
      .width('100%')
    }
    .height('100%')
  }
}

3.3 使用场景2

自定义组件Index使用ForEach来进行不同@Builder函数的渲染,可以使用builderArr声明的wrapBuilder数组进行不同@Builder函数效果体现,整体代码会更加整洁:

// 全局的自定义构建函数
@Builder
function MyBuilder(value: string, size: number) {
  Text(value)
    .fontSize(size)
}

// 全局的自定义构建函数
@Builder
function YourBuilder(value: string, size: number) {
  Text(value)
    .fontSize(size)
    .fontColor(Color.Pink)
}

// 这里使用一个数组存储这些WrappedBuilder:builderArr,需要全局的自定义构建函数的参数类型是一致的,如果不一致,那就封装成对象吧!
const builderArr: WrappedBuilder<[string, number]>[] = [wrapBuilder(MyBuilder), wrapBuilder(YourBuilder)];

@Entry
@Component
struct Index {

  // 组件内的自定义构建函数
  @Builder testBuilder() {
    // 循环渲染,调用item.builder进行渲染,这里会调用到顶部的全局自定义函数
    ForEach(builderArr, (item: WrappedBuilder<[string, number]>) => {
      item.builder('Hello World', 30)
    }
    )
  }

  build() {
    Row() {
      Column() {
        this.testBuilder()
      }
      .width('100%')
    }
    .height('100%')
  }
}

4. @Styles装饰器:定义组件重用样式

如果每个组件的样式都需要单独设置,在开发过程中会出现大量代码在进行重复样式设置,虽然可以复制粘贴,但是为了代码简洁性和后续方便维护,鸿蒙提供了可以提炼公共样式进行复用的装饰器@Styles。

@Styles装饰器可以将多条样式设置提炼成一个方法,直接在组件声明的位置调用,通过@Styles装饰器可以快速定义并复用自定义样式。

上面是官方的说明,简单的来说就是把多个组件通用的属性和方法封装成一个方法,在创建组件的时候可以直接使用,避免重复写样式代码;嗯。。。类似前端CSS中按class分类吧。

4.1 装饰器使用说明

  • 当前@Styles仅支持通用属性和通用事件;
  • @Styles方法不支持参数;
// 错误❌: @Styles不支持参数
@Styles function globalFancy (value: number) {
  .width(value)
}

  • @Styles可以定义在组件内或全局,在全局定义时需要在方法名前面添加function关键字,组件内定义时则不需要添加function关键字;
  • 只能在当前文件内使用,不支持export;
// 全局
@Styles function functionName() { ... }

// 在组件内
@Component
struct FancyUse {

  @Styles fancy() {
    .height(100)
  }
}

  • 定义在组件内的@Styles可以通过this访问组件的常量和状态变量,并可以在@Styles里通过事件来改变状态变量的值,示例如下:
@Component
struct FancyUse {

  @State heightValue: number = 100
  
  @Styles fancy() {
    .height(this.heightValue)
    .backgroundColor(Color.Yellow)
    .onClick(() => {
      this.heightValue = 200
    })
  }
}

  • 组件内@Styles的优先级高于全局的@Styles,框架会优先查找当前组件内的@Styles,如果找不到,就会全局查找;

4.2 使用场景

// 定义在全局的@Styles封装的样式
@Styles function globalFancy  () {
  .width(150)
  .height(100)
  .backgroundColor(Color.Pink)
}

@Entry
@Component
struct FancyUse {

  @State heightValue: number = 100
  
  // 定义在组件内的@Styles封装的样式
  @Styles fancy() {
    .width(200)
    .height(this.heightValue)
    .backgroundColor(Color.Yellow)
    .onClick(() => {
      this.heightValue = 200
    })
  }

  build() {
    Column({ space: 10 }) {
      // 使用全局的@Styles封装的样式
      Text('FancyA')
        .globalFancy()
        .fontSize(30)
      // 使用组件内的@Styles封装的样式
      Text('FancyB')
        .fancy()
        .fontSize(30)
    }
  }
}

5. @Extend装饰器:定义扩展组件样式

上面的@Styles用于样式的扩展,在@Styles的基础上,鸿蒙又提供了@Extend,用于扩展原生组件样式。相比于@Styles提供了更多的扩展的能力。

5.1 使用说明

语法:

@Extend(UIComponentName) function functionName { ... }

使用规则:

  • 和@Styles不同,@Extend仅支持在全局定义。并且也只能在当前文件中使用;
  • 和@Styles不同,@Extend支持封装指定的组件的私有属性和私有事件,以及预定义相同组件的@Extend的方法;
// @Extend(Text)可以支持Text的私有属性fontColor
@Extend(Text) function fancy () {
  .fontColor(Color.Red)
}

// superFancyText可以调用预定义的fancy
@Extend(Text) function superFancyText(size:number) {
    .fontSize(size)
    .fancy()
}

  • 和@Styles不同,@Extend装饰的方法支持参数,开发者可以在调用时传递参数,调用遵循TS方法传值和调用;
// xxx.ets
@Extend(Text) function fancy (fontSize: number) {
  .fontColor(Color.Red)
  .fontSize(fontSize)
}

@Entry
@Component
struct FancyUse {
  build() {
    Row({ space: 10 }) {
      Text('Fancy')
        .fancy(16)
      Text('Fancy')
        .fancy(24)
    }
  }
}

  • @Extend装饰的方法的参数可以为function,作为Event事件的句柄:
@Extend(Text) function makeMeClick(onClick: () => void) {
  .backgroundColor(Color.Blue)
  .onClick(onClick)
}

@Entry
@Component
struct FancyUse {
  @State label: string = 'Hello World';

  onClickHandler() {
    this.label = 'Hello ArkUI';
  }

  build() {
    Row({ space: 10 }) {
      Text(`${this.label}`)
        .makeMeClick(() => {this.onClickHandler()})
    }
  }
}

  • @Extend的参数可以为状态变量,当状态变量改变时,UI可以正常的被刷新渲染
@Extend(Text) function fancy (fontSize: number) {
  .fontColor(Color.Red)
  .fontSize(fontSize)
}

@Entry
@Component
struct FancyUse {
  
  @State fontSizeValue: number = 20
  
  build() {
    Row({ space: 10 }) {
      Text('Fancy')
        .fancy(this.fontSizeValue)
        .onClick(() => {
          this.fontSizeValue = 30
        })
    }
  }
}

5.2 使用场景

以下示例声明了3个Text组件,每个Text组件均设置了fontStyle、fontWeight和backgroundColor样式:

@Entry
@Component
struct FancyUse {
  @State label: string = 'Hello World'

  build() {
    Row({ space: 10 }) {
      Text(`${this.label}`)
        .fontStyle(FontStyle.Italic)
        .fontWeight(100)
        .backgroundColor(Color.Blue)
      Text(`${this.label}`)
        .fontStyle(FontStyle.Italic)
        .fontWeight(200)
        .backgroundColor(Color.Pink)
      Text(`${this.label}`)
        .fontStyle(FontStyle.Italic)
        .fontWeight(300)
        .backgroundColor(Color.Orange)
    }.margin('20%')
  }
}

可以使用@Extend将样式组合复用,示例如下:

// 组合
@Extend(Text) function fancyText(weightValue: number, color: Color) {
  .fontStyle(FontStyle.Italic)
  .fontWeight(weightValue)
  .backgroundColor(color)
}

@Entry
@Component
struct FancyUse {
  @State label: string = 'Hello World'

  build() {
    Row({ space: 10 }) {
      Text(`${this.label}`)
        .fancyText(100, Color.Blue)
      Text(`${this.label}`)
        .fancyText(200, Color.Pink)
      Text(`${this.label}`)
        .fancyText(300, Color.Orange)
    }.margin('20%')
  }
}

6. stateStyles:多态样式

@Styles和@Extend仅仅应用于静态页面的样式复用,stateStyles可以依据组件的内部状态的不同,快速设置不同的样式,可以称为多态样式。

就是类似CSS的伪类,针对于按钮点击、按压、获取焦点等,分别设置不同的样式;

6.1 概述

stateStyles是属性方法,可以根据UI内部状态来设置样式,类似css伪类,但是语法不同。ArkUI提供以下5种状态:

  • focused
  • normal
  • pressed
  • disabled
  • selected

6.2 基础使用场景

下面的示例展示了stateStyles最基本的使用场景。Button1处于第一个组件,Button2处于第二个组件。按压时显示为pressed态指定的黑色。使用Tab键走焦,先是Button1获焦并显示为focus态指定的粉色。当Button2获焦的时候,Button2显示为focus态指定的粉色,Button1失焦显示normal态指定的红色。

@Entry
@Component
struct StateStylesSample {
  build() {
    Column() {
      Button('Button1')
        .stateStyles({
          focused: {
            .backgroundColor(Color.Pink)
          },
          pressed: {
            .backgroundColor(Color.Black)
          },
          normal: {
            .backgroundColor(Color.Red)
          }
        })
        .margin(20)
      Button('Button2')
        .stateStyles({
          focused: {
            .backgroundColor(Color.Pink)
          },
          pressed: {
            .backgroundColor(Color.Black)
          },
          normal: {
            .backgroundColor(Color.Red)
          }
        })
    }.margin('30%')
  }
}

6.3 @Styles和stateStyles联合使用

以下示例通过@Styles指定stateStyles的不同状态:

@Entry
@Component
struct MyComponent {
  @Styles normalStyle() {
    .backgroundColor(Color.Gray)
  }

  @Styles pressedStyle() {
    .backgroundColor(Color.Red)
  }

  build() {
    Column() {
      Text('Text1')
        .fontSize(50)
        .fontColor(Color.White)
        .stateStyles({
          normal: this.normalStyle,
          pressed: this.pressedStyle,
        })
    }
  }
}

7. @AnimatableExtend装饰器:定义可动画属性

@AnimatableExtend装饰器用于自定义可动画的属性方法,在这个属性方法中修改组件不可动画的属性。在动画执行过程时,通过逐帧回调函数修改不可动画属性值,让不可动画属性也能实现动画效果。

  • 可动画属性:如果一个属性在animation属性前调用,改变这个属性的值可以生效animation属性的动画效果,这个属性称为可动画属性,比如height、width、backgroundColor、translate属性,Text组件的fontSize属性等;
  • 不可动画属性:如果一个属性方法在animation属性前调用,改变这个属性的值不能生效animation属性的动画效果,这个属性称为不可动画属性,比如Polyline组件的points属性等;

7.1 使用说明

// 1. @AnimatableExtend仅支持在全局定义;
// 2. 函数参数类型必须为number类型或者实现AnimtableArithmetic<T>接口的自定义类型;
// 3. 函数体内只能调用@AnimatableExtend括号组件的属性方法;
@AnimatableExtend(UIComponentName) function functionName(value: typeName) { 
  .propertyName(value)
}

截屏2024-03-28 16.21.32.png

7.2 使用场景

实现字体大小的动画效果:

@AnimatableExtend(Text) function animatableFontSize(size: number) {
  .fontSize(size)
}

@Entry
@Component
struct AnimatablePropertyExample {
  @State fontSize: number = 20
  build() {
    Column() {
      Text("AnimatableProperty")
        .animatableFontSize(this.fontSize)
        .animation({duration: 1000, curve: "ease"})
      Button("Play")
        .onClick(() => {
          this.fontSize = this.fontSize == 20 ? 36 : 20
        })
    }.width("100%")
    .padding(10)
  }
}

8. @Require装饰器:校验构造传参

@Require装饰器不能单独使用,和@Prop和@BuilderParam配合使用。在构造自定义组件时,用@Require修饰的@Prop和@BuilderParam变量,必须在构造时传参。

@Require装饰器仅用于装饰struct内的@Prop和@BuilderParam成员状态变量。

8.1 使用场景

当Child组件内使用@Require装饰器和@Prop或者@BuilderParam结合使用时,父组件Index在构造Child时必须传参,否则编译不通过。

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  @Builder buildTest() {
    Row() {
      Text('Hello, world')
        .fontSize(30)
    }
  }

  build() {
    Row() {
      Child({ initMessage: this.message, message: this.message,
        buildTest: this.buildTest, initbuildTest: this.buildTest })
    }
  }
}

@Component
struct Child {
  @Builder buildFuction() {
    Column() {
      Text('initBuilderParam')
        .fontSize(30)
    }
  }

  // 使用@Require标识父组件在构造Child组件时,必须使用构造传参;
  @Require @BuilderParam buildTest: () => void;
  @Require @BuilderParam initbuildTest: () => void = this.buildFuction;
  @Require @Prop initMessage: string = 'Hello';
  @Require @Prop message: string;

  build() {
    Column() {
      Text(this.initMessage)
        .fontSize(30)
      Text(this.message)
        .fontSize(30)
      this.initbuildTest();
      this.buildTest();
    }
    .width('100%')
    .height('100%')
  }
}

  • 22
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值