鸿蒙用 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 })}
}复制

结果图：