面向对象开发离不开封装，将重复的可以复用的代码封装起来，提高开发效率。

基于之前的List，对代码进行封装。

1、抽取component

将List的头部抽离出来作为一个新的component。可以创建一个新的ArkTS文件，写我们的头部代码

为了能够让其他文件访问这个component，需要通过关键字export来导出

@Component
export struct Header {private title : ResourceStrbuild() {Row(){Text(this.title).fontColor("#000").fontSize(30).fontWeight(FontWeight.Bold)}.height(30).width('100%').margin({left:28,top:20,bottom:10})}
}

然后，在使用的地方导入这个组件，因为这个Header组件在当前文件的上一级目录下，所以先../到上一级，然后逐级到相应目录

import {Header} from '../CommonComponet/MyComponet'

最后，使用这个组件就可以类似用系统的组件一样

Header({title:'商品列表'})

这样，在不同的地方都可以用这个组件，只要传递相应的参数就行了。

2、自定义函数

在之前的List 中，我们的也可以抽离出来使用@Builder function作为一个全局的函数

@Builder function ItemCard(item: Item) {Row({ space: 3 }) {Image(item.image).width(this.imageWidth).height(80).padding({ left: 20 }).borderRadius(5)Column() {Text(item.name).fontWeight(FontWeight.Bold).fontSize(25).baselineOffset(0).height(40).width(200)Text('¥' + item.price).priceText()}.margin({ left: 20 })}.height(130).width('90%').backgroundColor('#FFFFFF').borderRadius(20)}

我们在使用的地方直接调用即可

List({space: 10}) {ForEach(this.items,(item: Item) => {ListItem() {//直接使用封装的全局函数ItemCard(item)}.width('100%')})

如果，我们想讲方法定义到组件内，那么需要去掉function关键字，在使用的时候通过this访问。

3、公共样式

当组件内有些样式是通用的，也可以通过@Styles抽离出去作为公共样式

@Styles function fullScreen() {.width('100%').height('100%').backgroundColor('#EFEFEF')
}

在使用的地方直接.访问即可

build() {Column({space:18}) {xxx}.fullScreen()}

但是，当我们的样式不是通用的时候，不能直接使用@Styles进行抽离。我们可以对相应组件进行扩展。例如我们要扩展Text，可以这样 @Extend(Text)

@Extend(Text) function priceText() {.fontSize(17).textAlign(TextAlign.Start).fontColor("#FF0000").height(30).width(200)
}

注意，样式不能定义到组件内，只能定义到组件外

4、补充

如果两个控件中间需要填充空白隔开可以使用Blank()函数