HarmonyOS 如何定义组件插槽

需要声明一个全局的Builder函数用来描述UI片段,内部定义一个Row,其中某一个UI元素,支持从外部定义,相当于外部像特定插槽中插入UI组件,这个UI插槽如何作为Builder函数参数进行定义?

伪代码:

@Builder  
export function settingsTileBuilder(icon: PixelMap | ResourceStr | DrawableDescriptor, title: string | ResourceStr, onTap: () => void) {  
  Row() {  
    Image(icon)  
      .width('17vp')  
      .height('17vp')  
    Text(title)  
      .fontColor($r('app.color.onSurface'))  
      .fontSize('16fp')  
      .margin({ left: '10vp' })  
    Blank()  
  
    if (soltBuilder?) {  
      soltBuilder()  
    }  
  
    Image($r('app.media.ic_right_arrow'))  
      .size({ width: '9vp', height: '9vp' })  
      .objectFit(ImageFit.Contain)  
      .fillColor($r('app.color.onSurface'))  
      .opacity(0.4)  
  }  
  .padding({ left: '30vp', right: '30vp', top: '25vp', bottom: '25vp' })  
  .width('100%')  
  .onClick(() => {  
    onTap();  
  })  
}

其中,soltBuilder不确定应该以什么方式添加到settingsTileBuilder这个函数的参数声明中。

HarmonyOS
2024-09-25 11:17:30
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
put_get

可以使用【@BuilderParam装饰器】,参考链接:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-builderparam-V5根据提供的样例代码,需要这样改造代码:

@Component  
export struct settingsTileBuilder {  
  @Prop icon:  PixelMap | ResourceStr | DrawableDescriptor;  
  @Prop title: string | ResourceStr  
  onTap: Function = ()=>{ }  // 由于@Prop不能传递Function类型数据,所以不使用@Prop修饰,直接传递,也可以  
  
  @Builder soltBuilder() {}  
  // 使用父组件@Builder装饰的方法初始化子组件@BuilderParam  
  @BuilderParam customBuilderParam: () => void = this.soltBuilder;  
  
  build() {  
    Row() {  
      Image(this.icon)  
        .width('17vp')  
        .height('17vp')  
      Text(this.title)  
        .fontColor(Color.Black)  
        .fontSize('16fp')  
        .margin({ left: '10vp' })  
      Blank()  
  
      this.customBuilderParam();  // 插槽使用  
  
      Image($r('app.media.foreground'))  
        .size({ width: '9vp', height: '9vp' })  
        .objectFit(ImageFit.Contain)  
        .fillColor(Color.Black)  
        .opacity(0.4)  
    }  
    .padding({ left: '30vp', right: '30vp', top: '25vp', bottom: '25vp' })  
    .width('100%')  
    .onClick(() => {  
      this.onTap();  
    })  
  }  
}  
  
//  调用settingsTileBuilder组件  
@Entry  
@Component  
struct Index {  
  @Builder componentBuilder() {  
    Text(`Parent builder`)  
  }  
  
  build() {  
    Row(){  
      Text('父组件')  
      settingsTileBuilder({  
        icon: $r('app.media.startIcon'),  
        title: '子组件',  
        onTap: ()=>{ console.info(`1111111`) },  
        customBuilderParam: this.componentBuilder  
      })  
    }  
  }  
}
分享
微博
QQ
微信
回复
2024-09-25 18:13:12
相关问题
如何实现类似插槽的功能
1817浏览 • 1回复 待解决
如果要实现插槽功能要如何实现
307浏览 • 1回复 待解决
HarmonyOS如何定义视频组件样式
340浏览 • 1回复 待解决
HarmonyOS如何定义组件的Controller?
210浏览 • 1回复 待解决
请问Ark UI有类似插槽的概念么?
3382浏览 • 1回复 待解决
HarmonyOS如何手动重置自定义组件
261浏览 • 1回复 待解决
HarmonyOS定义组件增加方法如何实现
320浏览 • 1回复 待解决
HarmonyOS C++层自定义组件如何开发?
229浏览 • 1回复 待解决
如何定义组件原型菜单
798浏览 • 1回复 待解决
如何定义模拟Tabs组件
814浏览 • 1回复 待解决
ArkTs如何定义容器组件
2972浏览 • 1回复 待解决
HarmonyOS定义组件问题
263浏览 • 1回复 待解决
定义组件如何导出、引入?
2209浏览 • 1回复 待解决