HarmonyOS 鸿蒙Next子组件渲染父组件传来的“组件”——@Builder和@BuilderParam实现组件之间组件的传递

HarmonyOS 鸿蒙Next子组件渲染父组件传来的“组件”——@Builder和@BuilderParam实现组件之间组件的传递
<markdown _ngcontent-wvk-c149="" class="markdownPreContainer">

前言

使用[@Builder](/user/Builder)和[@BuilderParam](/user/BuilderParam)实现组件的“插槽”功能

效果图

代码

[@Component](/user/Component)
struct HeaderCom {
  [@Prop](/user/Prop) msg: string
  build() {
    Row(){
      Text(this.msg)
    }
  }
}
[@Component](/user/Component)
struct ContentCom {
  [@Prop](/user/Prop) msg: string
  build() {
    Row(){
      Text(this.msg)
    }
  }
}
[@Component](/user/Component)
struct TabBarCom {
  build() {
    Row(){
      Text('TabBarCom')
    }
  }
}
interface iHeaderBuilderParam{
headerMsg: string
}
@Entry
@Component
struct Index {
@Builder headerBuilder($$: iHeaderBuilderParam){
HeaderCom({msg: $$.headerMsg})
}
@Builder contentBuilder(){
ContentCom({msg: ‘contentBuilder’})
}
@Builder tabBarBuilder(){
TabBarCom()
}
build() {
Column(){
Container({
headerBuilderParam: ()=>{this.headerBuilder({headerMsg: ‘headerMsg’})},
contentBuilderParam: ()=>{this.contentBuilder()},
tabBarBuilderParam: this.tabBarBuilder,
// headerBackgroundColor: ‘#ccc’,
// contentBackgroundColor: ‘#ccc’,
// tabBarBackgroundColor: ‘#ccc’,
// headerHeight: 100,
// tabBarHeight: 200,
})
}
}
}
@Component
struct Container {
@BuilderParam headerBuilderParam: ()=>void = this.headerBuilder
@BuilderParam contentBuilderParam: ()=>void = this.contentBuilder
@BuilderParam tabBarBuilderParam: ()=>void = this.tabBarBuilder
@Builder headerBuilder(){}
@Builder contentBuilder(){}
@Builder tabBarBuilder(){}
headerBackgroundColor: ResourceColor = Color.Red
contentBackgroundColor: ResourceColor = Color.Yellow
tabBarBackgroundColor: ResourceColor = Color.Green
headerHeight: Length = 44
tabBarHeight: Length = 50
build() {
Flex({direction:FlexDirection.Column}){
Row(){
this.headerBuilderParam()
}.width(‘100%’).backgroundColor(this.headerBackgroundColor).height(this.headerHeight)
Row(){
this.contentBuilderParam()
}.width(‘100%’).backgroundColor(this.contentBackgroundColor).flexGrow(1)
Row(){
this.tabBarBuilderParam()
}.width(‘100%’).backgroundColor(this.tabBarBackgroundColor).height(this.tabBarHeight)
}
}
}
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>