面向對象開發離不開封裝，將重復的可以復用的代碼封裝起來，提高開發效率。

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