- 创建Navbar.ets组件文件,内容如下:
import router from '@ohos.router';
@Component
export struct Navbar {
title: string = "";
@Builder rightAreaBuilder() {
};
@BuilderParam rightArea: () => void = this.rightAreaBuilder;
build() {
Column() {
Row() {
Column() {
if (parseInt(router.getLength()) > 1){
Image($r("app.media.left_arrow")).width(30).height(30).onClick(() => {
router.back();
}).alignSelf(ItemAlign.Start)
}
}.layoutWeight(1)
Text(this.title).fontSize(16).height(50)
Column() {//右侧区域
this.rightArea();
}.layoutWeight(1)
}.width('100%').justifyContent(FlexAlign.SpaceBetween).padding({ left: 10, right: 10 })
}.width('100%').backgroundColor("#f5f5f5")
}
}
2.在Home.ets文件中引用
import { Navbar } from "../../components/Navbar/Navbar"
import promptAction from '@ohos.promptAction'
@Component
export struct Home {
@State messageList: number[] = [
1, 23, 56, 6, 8, 2, 23, 45, 67, 85, 23, 42, 12, 34, 65, 85, 2334, 6575, 7567, 234, 123, 2314
]
//首页
build() {
Column() {
//标题栏组件
Navbar({ title: "微信", rightArea: this.addBuilder })
//数据列表
List() {
ForEach(this.messageList, (item, key) => {
ListItem() {
Text(`${item}`).fontSize(16).padding(20)
}
})
}.divider({ strokeWidth: 1, color: "#eee" })
}.width("100%").height("100%").padding({ bottom: 50 })
}
@Builder addBuilder() {
Image($r("app.media.jiahao")).width(30).height(30).alignSelf(ItemAlign.End).onClick(() => {
promptAction.showToast({
message: "菜单",
})
})
}
}
3.效果图