一、定义全局组件
在项目的目录结构中新增，components目录，并且创建xxx.ets组件文件
image.png
代码如下（标题栏）：
@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 })
}
}
二、定义局部组件
在当前代码文件内部定义组件，无需使用export关键字，直接将代码写在最上面即可，这种适用该组件只被当前ets文件所调用，否则就得定义成全局的。
@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 })
}
}
三、使用组件
在文件最顶部导入组件
//1.导入TitleBar组件
import { TitleBar } from '../components/TitleBar'
在build() 方法中调用该组件
build() {
Row() {
Column({ space: 8 }) {
//2.直接使用全局组件
TitleBar({ title: '商品列表' })
List({ space: 8 }) {
ForEach(this.items, (item: Item, index) => {
ListItem() {
this.ItemCard(item)
}
})
}
.layoutWeight(1)
}
.fillScreen()
}
}
