HarmonyOS 鸿蒙Next Navigation，设置toolbarConfiguration切换导航栏
HarmonyOS 鸿蒙Next Navigation，设置toolbarConfiguration切换导航栏
设置 toolbarConfiguration 导航栏，在点击切换后，如何实现页面的更新跳转，有一个 action 属性，在这里触发跳转的话，会把 toolbarConfiguration 导航栏给隐藏掉。
想要实现，切换导航栏，导航栏不消失的效果，请教该如何实现～
5 回复
可以自定义底部导航，通过selectIndex来决定展示对应的tab
Navigation(this.pageStack) {
if (this.selectIndex === 0) {
NavigationHome()
} else if (this.selectIndex === 1) {
NavigationActivity()
} else if (this.selectIndex === 2) {
NavigationMe()
}
}
.height('100%')
.hideTitleBar(true)
.navBarWidth('50%')
.navDestination(this.myRouter)
.mode(NavigationMode.Stack)
.hideNavBar(false)
.toolbarConfiguration(this.tabBuilder)// 自定义底部导航
@Builder
tabBuilder() {
Row() {
ForEach(['首页', '活动', '我的'], (item: string, index) => {
Column() {
Text(item)
.fontColor(this.selectIndex === index ? Color.Red : Color.Black)
.fontSize(this.selectIndex === index ? 25 : 18)
}
.height("100%")
.layoutWeight(1)
.justifyContent(FlexAlign.End)
.padding({ top: 5, bottom: 5 })
.onClick(() => {
this.selectIndex = index;
})
})
}
.height(50)
.width('100%')
}更多关于HarmonyOS 鸿蒙Next Navigation，设置toolbarConfiguration切换导航栏的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS中，Navigation组件用于管理页面导航，toolbarConfiguration用于配置导航栏的工具栏。通过toolbarConfiguration，可以自定义导航栏的显示内容和行为。以下是一个简单的示例，展示如何在鸿蒙Next中使用toolbarConfiguration来切换导航栏的配置：
import { Navigation, ToolbarConfiguration } from '@ohos.router';
// 定义不同的工具栏配置
const toolbarConfig1: ToolbarConfiguration = {
title: '首页',
buttons: [
{ icon: 'ic_home', action: 'home' },
{ icon: 'ic_settings', action: 'settings' }
]
};
const toolbarConfig2: ToolbarConfiguration = {
title: '设置',
buttons: [
{ icon: 'ic_back', action: 'back' },
{ icon: 'ic_refresh', action: 'refresh' }
]
};
// 初始化Navigation
const navigation = new Navigation();
// 设置初始工具栏配置
navigation.setToolbarConfiguration(toolbarConfig1);
// 在需要时切换工具栏配置
function switchToolbar() {
navigation.setToolbarConfiguration(toolbarConfig2);
}在这个示例中，ToolbarConfiguration定义了导航栏的标题和按钮。通过setToolbarConfiguration方法，可以在运行时动态切换导航栏的配置。
