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

基于之前的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()
  }

注意，自定义样式装饰器在组件内部优先级>组件外部优先级。也就是说同样名字的自定义装饰器，会优先执行组件内部的。而且组件内部不需要加function，组件外部需要加function关键字。并且自定义方法不能传递参数。

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

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

4、补充

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