当前位置：首页 > ai >正文

【鸿蒙HarmonyOS】鸿蒙app开发入门到实战教程(二):封装自定义可复用组件

ai 2025/7/16 6:44:08

组件的可复用性，对我们开发的app质量影响很大，看看鸿蒙中如何封装这种组件

实现效果

在这里插入图片描述

代码实现

局部封装

@Builder
titleBuilder(title:string = '默认标题') {// @Builder装饰此函数，使其能以链式调用的方式配置并构建Text组件Row(){Text(title).fontSize(30).fontWeight(FontWeight.Bold).layoutWeight(1)Image($r('app.media.more')).width(24)}.width('100%').height(50).padding({left:10})
}

页面使用

@Entry
@ComponentV2
struct  ThirdPage{@BuildertitleBuilder(title:string = '默认标题') {// @Builder装饰此函数，使其能以链式调用的方式配置并构建Text组件Row(){Text(title).fontSize(30).fontWeight(FontWeight.Bold).layoutWeight(1)Image($r('app.media.more')).width(24)}.width('100%').height(50).padding({left:10})}isFlag:Boolean = falsearr:number[] = [1,2,3,4,5]@Local count:number = 0build() {Column(){Column(){this.titleBuilder()this.titleBuilder('歌单推荐')}.width('100%')}}
}

这种封装的是局部可复用的组件

全部封装

@Builder
function titleBuilder(title:string = '默认标题') {// @Builder装饰此函数，使其能以链式调用的方式配置并构建Text组件Row(){Text(title).fontSize(30).fontWeight(FontWeight.Bold).layoutWeight(1)Image($r('app.media.more')).width(24)}.width('100%').height(50).padding({left:10})
}

页面使用

@Builder
function titleBuilder(title:string = '默认标题') {// @Builder装饰此函数，使其能以链式调用的方式配置并构建Text组件Row(){Text(title).fontSize(30).fontWeight(FontWeight.Bold).layoutWeight(1)Image($r('app.media.more')).width(24)}.width('100%').height(50).padding({left:10})
}@Entry
@ComponentV2
struct  ThirdPage{isFlag:Boolean = falsearr:number[] = [1,2,3,4,5]@Local count:number = 0build() {Column(){Column(){titleBuilder()titleBuilder('歌单推荐')}.width('100%')}}
}