鸿蒙导航栏封装

最新推荐文章于 2025-08-18 20:17:18 发布

原创最新推荐文章于 2025-08-18 20:17:18 发布 · 192 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #visual studio

import { edgeColors, router } from ‘@kit.ArkUI’

@Component
struct myNavigation {
@Prop title: string = ‘’
@BuilderParam customRight: () => void = this.defaultRight

@Builder
defaultRight() {
Row()
.width(35)
.height(30)
}

build() {
Row() {
Row(){
Image($r(“app.media.title_left_cancel”)).height(20).margin({
left: 14
})
}.width(50).height(50).onClick(() => {
router.back()
})

  Text(this.title)
    .layoutWeight(1)
    .fontSize(16)
    .margin({
      left: 10, right: 10
    })
    .fontColor("#424242").textAlign(TextAlign.Center)
  this.customRight()
}.justifyContent(FlexAlign.Center)
.height(50)

}
}

export default myNavigation
// 页面使用
Column() {
myNavigation({
title: ‘’,
customRight: () => {
this.customBarRight()
}
})
}