鸿蒙用 BuilderParam 实现同一个布局不同内容组件

面通过一个案例展示@BuilderParam的具体用法,例如,现需要实现一个通用的卡片组件,如下图所示

卡片中显示的内容不固定,例如

具体实现代码如下:

@Entry
@Component
struct BuildParamDemo {

  build() {

    Column(){

      Card() {
        imageBuilder()
      }

      Divider()
        .margin(10)

      Card() {
        textBuilder()
      }

    }

  }

}

@Builder function textBuilder() {
  Column({ space: 10 }) {
    Text('鸿蒙操作系统')
      .fontSize(25)
      .fontWeight(FontWeight.Bold)
    Text('华为鸿蒙HarmonyOS系统是面向万物互联的全场景分布式操作系统,支持手机、平板、智能穿戴、智慧屏等多种终端设备运行,提供应用开发、设备开发的一站式服务的平台。')
  }
}


@Builder function imageBuilder() {
  Column({ space: 10 }) {
    Image($r('app.media.img_harmony'))
      .width(300)
      .height(150)
    Text('鸿蒙操作系统')
  }
}


@Component
struct Card {
  @BuilderParam content: () => void; //@BuilderParam属性

  build() {
    Column() {
      this.content(); //占位符
    }.width('90%')
    .padding(10)
    .borderRadius(10)
    .shadow({ radius: 20 })
  }
}复制

结果图:

相关推荐
sanzk4 小时前
华为鸿蒙应用开发
华为·harmonyos
SoraLuna8 小时前
「Mac畅玩鸿蒙与硬件28」UI互动应用篇5 - 滑动选择器实现
macos·ui·harmonyos
ClkLog-开源埋点用户分析9 小时前
ClkLog企业版(CDP)预售开启,更有鸿蒙SDK前来助力
华为·开源·开源软件·harmonyos
mg6689 小时前
鸿蒙系统的优势 开发 环境搭建 开发小示例
华为·harmonyos
模拟IC攻城狮10 小时前
华为海思招聘-芯片与器件设计工程师-模拟芯片方向- 机试题-真题套题题目——共8套(每套四十题)
嵌入式硬件·华为·硬件架构·芯片
lqj_本人10 小时前
鸿蒙next选择 Flutter 开发跨平台应用的原因
flutter·华为·harmonyos
lqj_本人10 小时前
使用 Flutter 绘制一个棋盘
harmonyos
TangKenny10 小时前
计算网络信号
java·算法·华为
23zhgjx-NanKon11 小时前
华为eNSP:QinQ
网络·安全·华为
23zhgjx-NanKon11 小时前
华为eNSP:mux-vlan
网络·安全·华为