【入门到实战】OpenHarmony开发：NavBar 导航栏

最新推荐文章于 2025-05-26 18:00:00 发布

原创最新推荐文章于 2025-05-26 18:00:00 发布 · 432 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #OpenHarmony #前端 #ArkUI #ArkTS #鸿蒙系统 #android

鸿蒙开发同时被 3 个专栏收录

1034 篇文章

订阅专栏

ArkUI

762 篇文章

订阅专栏

OpenHarmony

202 篇文章

订阅专栏

往期鸿蒙5.0全套实战文章必看：（文中附带全栈鸿蒙5.0学习资料）

介绍

为页面提供导航功能，常用于页面顶部

NavBar 导航栏

导入依赖

import NavBar from "@peakmain/library/src/main/ets/components/title/NavBar"

参数

参数名	参数类型	描述
title	string	设置导航栏标题
titleBold	number \| FontWeight \| string	字体粗细，默认是FontWeight.Bold
titleColor	ResourceColor	设置标题字体颜色，默认字体颜色是 #272a2b
backgroundColorResource	ResourceColor	设置背景颜色，默认背景颜色是 Color.White
leftImage	PixelMap \| ResourceStr \| DrawableDescriptor \| null	设置左边返回箭头资源，为空时不显示
right	string	右边文本内容
rightImage	PixelMap \| ResourceStr \| DrawableDescriptor \| null	设置右边图片资源，为空时不显示
rightClick	() => void	设置右边图片或者文本的点击事件
leftClick	void = ()	左边返回点击事件，默认处理是返回上一个页面
showLeftClose	boolean	是否显示关闭按钮，默认为false

示例

 import { promptAction } from '@kit.ArkUI';
import { NavBar } from '@peakmain/library';

@Entry
@Component
struct NavBarPage {
  @State message: string = 'Hello World';

  @Builder
  ButtonBuilder(title: string, itemClick: () => void = () => {
  }) {
    Row() {
      Text(title).fontColor($r("app.color.color_272a2b"))
        .layoutWeight(1).fontSize(16)
    }
    .width("100%")
    .padding(20)
    .backgroundColor(Color.White)
    .borderRadius(8)
    .onClick(() => {
      itemClick && itemClick()
    })
    .margin({
      top: 1
    })
    .stateStyles({
      normal: {
        .backgroundColor(Color.White)
      },
      pressed: {
        .backgroundColor($r("app.color.color_f1f3f5"))
      }
    })
  }

  @State
  title: string = "默认样式"
  @State
  leftImage: PixelMap | ResourceStr | DrawableDescriptor | null = $r("app.media.ic_public_left_arrow")
  @State
   titleBold: FontWeight = FontWeight.Bold
  @State
  rightText: string = ""
  @State
  rightImage: PixelMap | ResourceStr | DrawableDescriptor | null = null
  rightClick: () => void = () => {
    promptAction.showToast({
      message: "点击了右边按钮"
    })
  }

  build() {
    Column() {
      NavBar({
        title: this.title,//标题
        leftImage: this.leftImage,//左边返回图片
        titleBold: this.titleBold,//标题是否加粗
        right: this.rightText,//右边文本，默认为空
        rightClick: this.rightClick,//右边按钮的点击事件
        rightImage: this.rightImage//右边图片
      })
      //修改左边箭头
      this.ButtonBuilder(`隐藏/显示左边返回箭头，默认显示`, () => {
        this.leftImage = this.leftImage ? null : $r("app.media.ic_public_left_arrow")
      })
      this.ButtonBuilder("替换左边返回箭头", () => {
        this.leftImage = $r("app.media.ic_new_left_arrow")
      })
      //修改标题
      this.ButtonBuilder("修改标题为：NavBar 标题组件", () => {
        this.title = "NavBar 标题组件"
      })
      this.ButtonBuilder("标题是否加粗,默认是加粗", () => {
        this.titleBold = this.titleBold == FontWeight.Bold ? FontWeight.Normal : FontWeight.Bold
      })
      //修改右边文本/菜单
      this.ButtonBuilder("显示右边文本为清空，默认不显示", () => {
        this.rightText = "清空"
      })
      this.ButtonBuilder("显示并设置右边图片按钮，默认不显示", () => {
        this.rightImage = $r("app.media.ic_right_menu")
      })


    }
    .width("100%")
    .height("100%")
    .backgroundColor($r("app.color.color_f1f3f5"))
  }
}