特点
适用于结构、样式、事件
类似于轻量型的自定义组件,但是没有状态(@state 之类的)
全局写法
@Builder
function navItem(icon: Resource, text: string) {
Column() {
Image(icon)
.width(50)
Text(text)
.fontSize(20)
.fontColor(Color.Red)
}
.width('25%')
.onClick(() => {
AlertDialog.show({
message: '点击了:' + text
})
})
}
局部写法
@Builder
navItem(icon: Resource, text: string) {
Column() {
Image(icon)
.width(50)
Text(text)
.fontSize(20)
.fontColor(Color.Red)
}
.width('25%')
.onClick(() => {
AlertDialog.show({
message: '点击了:' + text
})
})
}
使用方法
build() {
Row() {
navItem($r('app.media.app_icon'), '首页')
navItem($r('app.media.app_icon'), '课程')
this.navItem($r('app.media.app_icon'), '学习')
this.navItem($r('app.media.app_icon'), '我的')
}.width('100%')
}
效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/49ea4d1ad1a8422c942f64fa3c41b2e4.png#pic_center)