HarmonyOS 鸿蒙Next HDC2024心得分享 ArkTs 自定义组件插槽

HarmonyOS 鸿蒙 arkts中想要自定义组件中要传入其他组件的时候就可以使用自定义组件插槽。

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

样例

插槽的使用

自定义组件

// 子组件

private <span class="hljs-attribute"><span class="hljs-attribute">title</span></span>: ResourceStr
<span class="hljs-property"><span class="hljs-property">[@BuilderParam](/user/BuilderParam)</span></span> <span class="hljs-attribute"><span class="hljs-attribute">component</span></span>: <span class="hljs-function"><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">()</span></span></span><span class="hljs-function"> =&gt;</span></span> <span class="hljs-reserved"><span class="hljs-reserved">void</span></span> = <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.slot;

build() {
  Column() {
    Row() {
      Text(<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.title)
        .fontColor(<span class="hljs-string"><span class="hljs-string">'#333333'</span></span>)
        .fontSize(<span class="hljs-number"><span class="hljs-number">18</span></span>)
        .fontWeight(<span class="hljs-number"><span class="hljs-number">700</span></span>)
        .lineHeight(<span class="hljs-number"><span class="hljs-number">26</span></span>)
    }.justifyContent(FlexAlign.Start).width(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>)

    <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.component()
  }
  .backgroundColor(Color.White)
    .width(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>)
    .padding({ <span class="hljs-attribute"><span class="hljs-attribute">left</span></span>: <span class="hljs-number"><span class="hljs-number">16</span></span>, <span class="hljs-attribute"><span class="hljs-attribute">right</span></span>: <span class="hljs-number"><span class="hljs-number">16</span></span>, <span class="hljs-attribute"><span class="hljs-attribute">top</span></span>: <span class="hljs-number"><span class="hljs-number">20</span></span>, <span class="hljs-attribute"><span class="hljs-attribute">bottom</span></span>: <span class="hljs-number"><span class="hljs-number">20</span></span> })
    .borderRadius(<span class="hljs-number"><span class="hljs-number">12</span></span>)
    .margin({ <span class="hljs-attribute"><span class="hljs-attribute">bottom</span></span>: <span class="hljs-number"><span class="hljs-number">12</span></span> })
}

}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

外部调用

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

// 父布局调用：
@Preview
@Component
@Entry
export struct Index {
@Builder
componentBuilder() {
Text(‘内部组件’).margin(30)
}
build() {
Column() {
Card({ title: ‘默认插槽’ })
Card({ title: ‘使用内部的组件插槽’, component: this.componentBuilder })
Card({ title: ‘使用外部的组件插槽’, component: overBuilder })
Card({ title: ‘直接传值’ }) {
Text(‘直接传值’).margin(30)
}
}.height(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>).padding({ <span class="hljs-attribute"><span class="hljs-attribute">left</span></span>: <span class="hljs-number"><span class="hljs-number">16</span></span>, <span class="hljs-attribute"><span class="hljs-attribute">right</span></span>: <span class="hljs-number"><span class="hljs-number">16</span></span>, <span class="hljs-attribute"><span class="hljs-attribute">top</span></span>: <span class="hljs-number"><span class="hljs-number">20</span></span>, <span class="hljs-attribute"><span class="hljs-attribute">bottom</span></span>: <span class="hljs-number"><span class="hljs-number">20</span></span> }).backgroundColor(<span class="hljs-string"><span class="hljs-string">'#f0f3f6'</span></span>)
}
}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

效果图

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

多个插槽使用

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

自定义组件

// 子组件
@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(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>)

  <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.component()
}
.backgroundColor(Color.White)
.width(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>)
.padding({ <span class="hljs-attribute"><span class="hljs-attribute">left</span></span>: <span class="hljs-number"><span class="hljs-number">16</span></span>, <span class="hljs-attribute"><span class="hljs-attribute">right</span></span>: <span class="hljs-number"><span class="hljs-number">16</span></span>, <span class="hljs-attribute"><span class="hljs-attribute">top</span></span>: <span class="hljs-number"><span class="hljs-number">20</span></span>, <span class="hljs-attribute"><span class="hljs-attribute">bottom</span></span>: <span class="hljs-number"><span class="hljs-number">20</span></span> })
.borderRadius(<span class="hljs-number"><span class="hljs-number">12</span></span>)
.margin({ <span class="hljs-attribute"><span class="hljs-attribute">bottom</span></span>: <span class="hljs-number"><span class="hljs-number">12</span></span> })
}
}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

外部调用

@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: this.componentBuilder, rightSlot: this.rightBuilder })
// Card({ title: ‘会报错’ }) {
//   Text(‘直接传值’).margin(30)
// }
}.height(‘100%’).padding({ left: 16, right: 16, top: 20, bottom: 20 }).backgroundColor(’#f0f3f6’)
}
}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

效果图

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