鸿蒙：Navigation的基本利用 - ToB企服应用市场:ToB评测及商务社交产业平台

@Entry
@Component
struct NavigationAPI9 {
build() {
Column() {
Navigation() {
Text('页面1')
NavRouter() {
// 只能写一个组件，写的多了，后面替换前面
Button('按钮1')
Button('按钮2')
NavDestination() {
Text('页面2')
NavRouter() {
Button('按钮3')
NavDestination() {
Text('页面3')
NavRouter() {
// .....
}
}
}
}
}
}
}
.height('100%')
.width('100%')
}
}

复制代码

@State activeName: string = 'tab1'
build() {
Navigation() {
if (this.activeName === 'tab1') {
NavigationCase1() // 切换的组件
} else if (this.activeName === 'tab2') {
NavigationCase2() // 切换的组件
} else {
Text('123')
}
}
.height('100%')
.width('100%')
.toolbarConfiguration(this.tabBarBuilder) // 设置tabBar
.navDestination(this.navDestination) // 设置路由容器
.title(this.titleBuilder, {
backgroundColor: Color.Blue,
}) // 设置标题
.titleMode(NavigationTitleMode.Full) // 标题模式
.menus(this.NavigationMenus) // 顶部图标
.hideTitleBar(false) // 是否隐藏标题栏
.hideNavBar(false) // 是否隐藏导航栏, 隐藏Navigation的导航栏，包括标题栏、内容区和工具栏。
.backgroundColor(Color.Pink)
}

复制代码

//------------ NavigationCase主页面-----
import NavDestination1 from './components/NavDestination1'
import NavDestination2 from './components/NavDestination2'
import NavigationCase1 from './components/NavigationCase1'
import NavigationCase2 from './components/NavigationCase2'
@Entry
@Component
struct NavigationCase {
@State activeName: string = 'tab1'
// tabs
@Builder
tabBarBuilder() {
Row() {
ForEach(['tab1', 'tab2', 'tab3'], (item: string) => {
Column() {
Image($r('app.media.ic_public_message')).width(24).aspectRatio(1)
Text(item).fontColor(this.activeName === item ? '#ff00ff0f' : '#000')
}.onClick(() => {
this.activeName = item
})
})
}.width('100%').justifyContent(FlexAlign.SpaceAround)
}
// 标题
@Builder
titleBuilder() {
Row() {
Text('title').fontWeight(700)
}
.width('100%')
.justifyContent(FlexAlign.Center)
}
// 顶部icon
@Builder
NavigationMenus() {
Row() {
Image($r('app.media.ic_public_contacts_group'))
.width(24).aspectRatio(1)
Image($r('app.media.ic_public_contacts_group'))
.width(24)
.height(24)
Image($r('app.media.ic_public_contacts_group'))
.width(24)
.height(24)
}.width('100%').justifyContent(FlexAlign.SpaceAround)
}
// 路由容器
@Builder
navDestination(name: string) {
if (name === 'NavDestination2') {
NavDestination2()
} else if (name === 'NavDestination1') {
NavDestination1()
}
}
//路由栈, (控制跳转）
@Provide
navStack: NavPathStack = new NavPathStack()
build() {
Navigation(this.navStack) {
if (this.activeName === 'tab1') {
NavigationCase1()
} else if (this.activeName === 'tab2') {
NavigationCase2()
} else {
Text('123')
}
}
.height('100%')
.width('100%')
.toolbarConfiguration(this.tabBarBuilder) // 设置tabBar
.navDestination(this.navDestination) // 设置路由容器
.title(this.titleBuilder, {
backgroundColor: Color.Blue,
}) // 设置标题
.titleMode(NavigationTitleMode.Full) // 标题模式
.menus(this.NavigationMenus) // 顶部图标
.hideTitleBar(false) // 是否隐藏标题栏
.hideNavBar(false) // 是否隐藏导航栏, 隐藏Navigation的导航栏，包括标题栏、内容区和工具栏。
.backgroundColor(Color.Pink)
}
}
// ------------- NavigationCase1 : tab页面1 --------------
@Component
struct NavigationCase1 {
@Consume navStack: NavPathStack
build() {
Column() {
Text('tab1')
Button('跳转NavDestination1').onClick((event: ClickEvent) => {
this.navStack.pushPath({
name: 'NavDestination1'
})
})
}
}
}
export default NavigationCase1
// ------------- NavigationCase1 : tab页面2 --------------
@Component
struct NavigationCase2 {
build() {
Column() {
Text('tab2')
}
}
}
export default NavigationCase2
// -----------跳转页面1 -----------------
@Component
struct NavDestination1 {
@Consume navStack: NavPathStack
build() {
NavDestination() {
Column() {
Text('页面1')
Button('跳转NavDestination2').onClick(() => {
const param: Record<string, string> = {
'dec': '跳转NavDestination2'
}
this.navStack.pushPath({
name: 'NavDestination2',
param
})
})
}
}.title('页面1')
}
}
export default NavDestination1
// -----------跳转页面2 -----------------
import { promptAction } from '@kit.ArkUI'
@Component
struct NavDestination2 {
@Consume navStack: NavPathStack
aboutToAppear(): void {
promptAction.showDialog({
message: JSON.stringify(this.navStack.getParamByName('NavDestination2'))
})
}
build() {
NavDestination() {
Column() {
Text('页面2')
}
}.title('页面2').hideTitleBar(true)
}
}
export default NavDestination2

复制代码

this.pageStack.pushPathByName('PageOne', "PageOne Param", (popInfo) => {
console.log('Pop page name is: ' + popInfo.info.name + ', result: ' + JSON.stringify(popInfo.result))
});

复制代码

this.pageStack.pushDestinationByName('PageOne', "PageOne Param")
.catch((error: BusinessError) => {
console.error(`Push destination failed, error code = ${error.code}, error.message = ${error.message}.`);
}).then(() => {
console.error('Push destination succeed.');
});

复制代码

// size: 获取页面栈大小
this.pageStack.size()
// 获取栈中所有页面name集合
// 获取【栈中】所有NavDestination页面的名称。
this.pageStack.getAllPathName()
// 获取【指定index】的NavDestination页面的参数信息。
this.pageStack.getParamByIndex(index)
// 获取全部name为PageOne的NavDestination页面的参数信息。
this.pageStack.getParamByName("PageOne")
// 获取全部name为PageOne的NavDestination页面的位置索引。
this.pageStack.getIndexByName("PageOne")

复制代码

// 返回到上一页
this.pageStack.pop()
this.pageStack.removeByIndexes([this.pageStack.size-1])
// 返回到上一个PageOne页面
this.pageStack.popToName("PageOne")
// 返回到索引为1的页面
this.pageStack.popToIndex(1)
// 返回到根首页（清除栈中所有页面）
this.pageStack.clear()
// 将栈顶页面替换为PageOne
this.pageStack.replacePath({ name: "PageOne", param: "PageOne Param" })
this.pageStack.replacePathByName("PageOne", "PageOne Param")
// 删除栈中name为PageOne的所有页面
this.pageStack.removeByName("PageOne")
// 删除指定索引的页面
this.pageStack.removeByIndexes([1,3,5])

复制代码