学习笔记(四十二):自定义组件@BuilderParam装饰器

概述:

该装饰器用于声明任意UI描述的一个元素,类似slot占位符。

 

使用示例:

1、初始化@BuilderParam装饰的方法

复制代码
// 自定义组件
@Component
export struct CommonView{
  @Builder customBuilder() {}; // 当前组件
  @BuilderParam customBuilderParam: () => void = this.customBuilder;   // @BuilderParam装饰的方法只能被自定义构建函数(@Builder装饰的方法)初始化

  build() {
    Column(){
      Text('标题')
      this.customBuilderParam() // 类似slot占位符,外部使用该自定义组件的时候动态传一个自定义构建函数
    }.width('100%')
  }
}
复制代码

 

 2、用父组件自定义构建函数初始化子组件@BuilderParam装饰的方法
复制代码
@Entry
@Component
export struct Main{
  build() {
    Column(){
      CommonView({customBuilderParam:this.slotView})
    }.height('100%').width('100%')
  }

  @Builder slotView(){
    Text('这是内容')
  }
}
复制代码

效果图:

 

3、若外部使用该组件无传入 @BuilderParam装饰的方法 ,则使用默认的@builder内容

复制代码
// 自定义组件
@Component
export struct CommonView{
  @Builder customBuilder() {
    Text('默认内容')   // 默认ui
  };
  @BuilderParam customBuilderParam: () => void = this.customBuilder;

  build() {
    Column(){
      Text('标题')
      this.customBuilderParam()
    }.width('100%')
  }
}


// 使用页面
@Component
export struct Main{
  build() {
    Column(){
      CommonView() // 使用自定义组件但没有传入customBuilderParam,则使用自定义组件默认ui
    }.height('100%').width('100%')
  }

  @Builder slotView(){
    Text('这是内容')
  }
}
复制代码

 

效果图:

 

 
posted @   听着music睡  阅读(28)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
历史上的今天:
2018-11-22 项目实战工具类(二):ZipUtils(压缩/解压缩文件相关)
2017-11-22 浅谈Android数据库DBFlow
点击右上角即可分享
微信分享提示