一、定義全局組件

在項(xiàng)目的目錄結(jié)構(gòu)中新增，components目錄，并且創(chuàng)建xxx.ets組件文件

image.png

代碼如下（標(biāo)題欄）：

@Component
export struct TitleBar {
  private title: ResourceStr

  build() {
    Row() {
      Image($r('app.media.back'))
        .width(30)
      Text(this.title)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
      Blank()
      Image($r('app.media.refresh'))
        .width(30)
    }
    .width('100%')
    .margin({ bottom: 20 })
  }
}

二、定義局部組件

在當(dāng)前代碼文件內(nèi)部定義組件，無需使用export關(guān)鍵字，直接將代碼寫在最上面即可，這種適用該組件只被當(dāng)前ets文件所調(diào)用，否則就得定義成全局的。

@Component
struct TitleBar {
  private title: ResourceStr

  build() {
    Row() {
      Image($r('app.media.back'))
        .width(30)
      Text(this.title)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
      Blank()
      Image($r('app.media.refresh'))
        .width(30)
    }
    .width('100%')
    .margin({ bottom: 20 })
  }
}

三、使用組件

在文件最頂部導(dǎo)入組件

//1.導(dǎo)入TitleBar組件
import { TitleBar } from '../components/TitleBar'

在build() 方法中調(diào)用該組件

 build() {
    Row() {
      Column({ space: 8 }) {

        //2.直接使用全局組件
        TitleBar({ title: '商品列表' })

        List({ space: 8 }) {
          ForEach(this.items, (item: Item, index) => {
            ListItem() {
              this.ItemCard(item)
            }
          })
        }
        .layoutWeight(1)
      }
      .fillScreen()
    }
  }