HarmonyOS NEXT 鸿蒙实现自定义组件插槽

admin管理员组

文章数量:1446759

HarmonyOS NEXT 鸿蒙实现自定义组件插槽

引言

在HarmonyOS NEXT中，如何实现类似Vue-Slot或React-RenderProps的功能？即允许将UI结构的函数（被@Builder修饰的函数）作为参数传递给组件，并在组件内的指定位置渲染，可以使用@BuilderParam装饰器。

@BuilderParam装饰器

@BuilderParam装饰器用于标记指向@Builder方法的变量。在初始化自定义组件时，可以通过对这个属性赋值来为组件添加特定的功能。该装饰器用于声明任意UI描述的一个元素，其作用类似于Vue中的slot占位符。

插槽的实现

使用步骤

1. 子组件声明 @BuilderParam 属性。
2. 父组件传入 @Builder修饰的函数或箭头函数。
3. 调用 @Builder函数的逻辑。

BuilderParam的参数可以不给初始值，如果给了初始值， 就是没有内容的默认内容

自定义组件

代码语言：javascript代码运行次数：0运行复制

// 子组件
@Component
  export struct Card {
    // 声明的一个要传递的内容！
    @Builder
    slot() {
      Text('暂无数据').margin(30)
    };

    private title: ResourceStr
    @BuilderParam component: () => void = this.slot;

    build() {
      Column() {
        Row() {
          Text(this.title)
            .fontColor('#333333')
            .fontSize(18)
            .fontWeight(700)
            .lineHeight(26)
        }.justifyContent(FlexAlign.Start).width('100%')

        thisponent()
      }
      .backgroundColor(Color.White)
        .width('100%')
        .padding({ left: 16, right: 16, top: 20, bottom: 20 })
        .borderRadius(12)
        .margin({ bottom: 12 })
    }
  }

外部调用

下面案例中，列举了多种样例使用方法

代码语言：javascript代码运行次数：0运行复制

@Builder
function overBuilder() {
  Text('外部组件').margin(30)
}

// 父布局调用：
@Preview
@Component
@Entry
export struct Index {
  @Builder
  componentBuilder() {
    Text('内部组件').margin(30)
  }

  build() {
    Column() {
      Card({ title: '默认插槽' })
      Card({ title: '使用内部的组件插槽', component: thisponentBuilder })
      Card({ title: '使用外部的组件插槽', component: overBuilder })
      Card({ title: '直接传值' }) {
        Text('直接传值').margin(30)
      }

    }.height('100%').padding({ left: 16, right: 16, top: 20, bottom: 20 }).backgroundColor('#f0f3f6')
  }
}

效果图

只有一个BuilderParam且不需要传参的时候，可以使用尾随闭包

注意：尾随闭包用空大括号就代表传递空内容，会替代默认内容

以上的例子，都是单个插槽，那如果想使用多个插槽呢?

多个插槽使用

子组件有多个BuilderParam，必须通过参数的方式来传入

自定义组件

代码语言：javascript代码运行次数：0运行复制

// 子组件
@Component
export struct Card {
  @Builder
  slot() {
    Text('暂无数据').margin(30)
  };

  @Builder
  defaultRightSlot() {
    Text('详情')
  };

  private title: ResourceStr
  @BuilderParam component: () => void = this.slot;
  @BuilderParam rightSlot: () => void = this.defaultRightSlot;

  build() {
    Column() {
      Row() {
        Text(this.title)
          .fontColor('#333333')
          .fontSize(18)
          .fontWeight(700)
          .lineHeight(26)
        this.rightSlot()

      }.justifyContent(FlexAlign.SpaceBetween).width('100%')

      thisponent()
    }
    .backgroundColor(Color.White)
    .width('100%')
    .padding({ left: 16, right: 16, top: 20, bottom: 20 })
    .borderRadius(12)
    .margin({ bottom: 12 })
  }
}

外部调用

代码语言：javascript代码运行次数：0运行复制

@Builder
function overBuilder() {
  Text('外部组件').margin(30)
}

// 父布局调用：
@Preview
@Component
@Entry
export struct Index {
  @Builder
  componentBuilder() {
    Text('内部组件').margin(30)
  }

  @Builder
  rightBuilder() {
    Text('右边的插槽').margin(30)
  }

  build() {
    Column() {
      Card({ title: '默认插槽' })
      Card({ title: '通过参数传递', component: thisponentBuilder, rightSlot: this.rightBuilder })
      // Card({ title: '会报错' }) {
      //   Text('直接传值').margin(30)
      // }
    }.height('100%').padding({ left: 16, right: 16, top: 20, bottom: 20 }).backgroundColor('#f0f3f6')
  }
}

效果图

插槽的实现方式有很多，具体可以参考下官方文档@BuilderParam装饰器：引用@Builder函数

参数必传

如果我想让，用我封装的组件，让父组件必须传递一个属性，可以使用Require修饰符

Require修饰符只能作用在两个修饰符前面Prop BuilderParam

自定义组件

代码语言：javascript代码运行次数：0运行复制

// 子组件
@Component
export struct Card {
  @Builder
  slot() {
    Text('暂无数据').margin(30)
  };

  @Builder
  defaultRightSlot() {
    Text('详情')
  };

  private title: ResourceStr
  // 父组件必须得传，不传则报错
  @Require
  @BuilderParam component: () => void = this.slot;
  @BuilderParam rightSlot: () => void = this.defaultRightSlot;

  build() {
    Column() {
      Row() {
        Text(this.title)
          .fontColor('#333333')
          .fontSize(18)
          .fontWeight(700)
          .lineHeight(26)
        this.rightSlot()

      }.justifyContent(FlexAlign.SpaceBetween).width('100%')

      thisponent()
    }
    .backgroundColor(Color.White)
    .width('100%')
    .padding({ left: 16, right: 16, top: 20, bottom: 20 })
    .borderRadius(12)
    .margin({ bottom: 12 })
  }
}

外部调用

代码语言：javascript代码运行次数：0运行复制

@Builder
function overBuilder() {
  Text('外部组件').margin(30)
}

// 父布局调用：
@Preview
@Component
@Entry
export struct Index {
  @Builder
  componentBuilder() {
    Text('内部组件').margin(30)
  }

  @Builder
  rightBuilder() {
    Text('右边的插槽').margin(30)
  }

  build() {
    Column() {
      // 没传component，会报错
      Card({ title: '通过参数传递', rightSlot: this.rightBuilder })
    }.height('100%').padding({ left: 16, right: 16, top: 20, bottom: 20 }).backgroundColor('#f0f3f6')
  }
}

插槽的实现方式有很多，具体可以参考下官方文档@BuilderParam装饰器：引用@Builder函数

本文标签： HarmonyOS NEXT 鸿蒙实现自定义组件插槽