简介

在页面开发过程中，会遇到有UI相似的结构，如果每个UI都单独声明一份，会产生大量冗余代码，不利于阅读。遇到这样的情况，就需要针对相似的结构进行封装，封装后的UI只需要传入参数即可。
在鸿蒙开发中，可以使用Builder 和 Component两种方式来实现。

Builder
Component

Builder

Builder的使用方式一

在一个struct内部创建声明

@Entry
@Component
struct UiTest {build() {Column({space: 10}){this.listItem('标题1','子标题1')this.listItem('标题2','子标题2')this.listItem('标题3','子标题3')}.width('100%').height('100%').justifyContent(FlexAlign.Center)}@Builder listItem(title: string, subTitle: string) {Column(){Row(){Column({space:20}){Text(title).fontSize(20).fontWeight(FontWeight.Bold)Text(subTitle)}Blank()Image($r('app.media.icon_load')).width(30).height(30)}.width('100%')}.width('90%').shadow({radius: 10}).padding(10)}
}

上述代码中，创建了一个listItem的组件，展示标题和副标题，使用的时候，直接调用this.listItem(‘标题1’,‘子标题1’)即可。

Builder的使用方式二

在一个struct外部创建声明,在使用的时候，直接调用方法名，不再需要使用this.

@Entry
@Component
struct UiTest {build() {Column({space: 10}){listItem('标题1','子标题1')listItem('标题2','子标题2')listItem('标题3','子标题3')}.width('100%').height('100%').justifyContent(FlexAlign.Center)}
}
@Builder function listItem(title: string, subTitle: string) {Column(){Row(){Column({space:20}){Text(title).fontSize(20).fontWeight(FontWeight.Bold)Text(subTitle)}Blank()Image($r('app.media.icon_load')).width(30).height(30)}.width('100%')}.width('90%').shadow({radius: 10}).padding(10)
}

Builder的使用方式三

将@Builder的创建和声明放在一个单独的文件夹中,然后记得使用export。

@Builder export  function listItem(title: string, subTitle: string) {Column(){Row(){Column({space:20}){Text(title).fontSize(20).fontWeight(FontWeight.Bold)Text(subTitle)}Blank()Image($r('app.media.icon_load')).width(30).height(30)}.width('100%')}.width('90%').shadow({radius: 10}).padding(10)
}

使用的时候，需要导入到当前文件夹

import { listItem } from './listItem'

接下来就直接使用方法名进行调用

Component

使用Component复用UI

Component的创建方式跟Builder创建方式二、创建方式三类似。

在一个单独文件中创建，需要使用export进行导出。

@Component
export struct listItem {title: stringsubTitle: stringbuild() {Column(){Row(){Column({space:20}){Text(this.title).fontSize(20).fontWeight(FontWeight.Bold)Text(this.subTitle)}Blank()Image($r('app.media.icon_load')).width(30).height(30)}.width('100%')}.width('90%').shadow({radius: 10}).padding(10)}
}

在使用的时候，首先需要进行导入

import {listItem} from './listItem'

参数的传递跟Builder有点不同，使用Component的方式传参，需要使用{}将参数包裹起来

import {listItem} from './listItem'
@Entry
@Component
struct UiTest {build() {Column({space: 10}){listItem({title:'标题1',subTitle:'子标题1'})listItem({title:'标题2',subTitle:'子标题2'})listItem({title:'标题3',subTitle:'子标题3'})}.width('100%').height('100%').justifyContent(FlexAlign.Center)}
}