一宪郊、定義全局組件
在項(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()
}
}
