面向对象开发离不开封装，将重复的可以复用的代码封装起来，提高开发效率。
基于之前的List，对代码进行封装。
1、抽取component
将List的头部抽离出来作为一个新的component。可以创建一个新的ArkTS文件，写我们的头部代码
为了能够让其他文件访问这个component，需要通过关键字export来导出
@Component
export struct Header {
private title : ResourceStr
build() {
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()函数
