鸿蒙开发之ArkUI 界面篇 三十三 Builder(封装容器)

鸿蒙开发中遇到容器相同、容器下面的子组件相同，就是子组件的文字不同，背景颜色不同，文字颜色不同之类，就可以使用Builder来封装，语法格式如下：

例如下面的界面：

Row+4个Colum+Image+Text来实现，发现呢？出来背景图和文字不同其他都是一样的，所以就可以把一样的抽取到一个方法里面，变的作为参数传递，代码如下：

// 全局 Builder
@Builder
function navItem(icon: ResourceStr, txt: string) {Column({ space: 10 }) {Image(icon).width('80%')Text(txt)}.width('25%').onClick(() => {AlertDialog.show({message: '点了' + txt})})
}@Entry
@Component
struct BuilderDemo {@State message: string = '@Builder';@BuildernavItem(icon: ResourceStr, txt: string) {Column({ space: 10 }) {Image(icon).width('80%')Text(txt)}.width('25%').onClick(() => {AlertDialog.show({message: '点了' + txt + this.message})})}build() {Column({ space: 20 }) {Text(this.message).fontSize(30)Row() {Row() {navItem($r('app.media.ic_reuse_01'), '阿里拍卖')navItem($r('app.media.ic_reuse_02'), '菜鸟')this.navItem($r('app.media.ic_reuse_03'), '巴巴农场')this.navItem($r('app.media.ic_reuse_04'), '阿里药房')}}}.width('100%').height('100%')}}

总结：鸿蒙组价的封封装提供了三种实现分别是Extend、Styles、Builder，Extend需要指定具体的组件类型，支持参数，Styles更通用，不需要具体类型，不支持参数，Builder是界面构建层面的封装，支持参数，通用的代码包括Row和Colum和组件都封装在函数里