鸿蒙：Navigation的基本利用
注：本章只是简单先容一下其用法，详情请看官方文档：Navigation：文档中央
1. Navigation：
Navigation组件是路由导航的根视图容器，一样平常作为Page页面的根容器利用，其内部默认包含了标题栏、内容区和工具栏，此中内容区默认首页显示导航内容（Navigation的子组件）或非首页显示（NavDestination的子组件），首页和非首页通过路由举行切换。
NavRouter ：导航组件，默认提供点击相应处理处罚，不需要开发者自定义点击事故逻辑。必须包含两个子组件，此中第二个子组件必须为NavDestination。
NavDestination： 作为子页面的根容器，用于显示Navigation的内容区。
1.1 Navigation + NavRouter + NavDestination实现组件跳转（API9）
Navigation内书写的是页面的内容，是Navigation实现页面跳转最外层的跟容器，如果嵌套NavRouter，NavRouter下需要嵌套两个子组件，第一个子组件自定义，点击可以跳转到第二个子组件，第二个必须为NavDestination包裹的子组件，用于显示跳转目标组件的内容。详情看代码：
@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%')
}
} 效果如下：
https://i-blog.csdnimg.cn/direct/040214dead3d4cee9f28cdd1ff894545.png
1.2. Navigation + NavDestination + NavPathStack 实现组件跳转（API10）
首先显示的页面需要用Navigation包裹，其内书写的为首页内容。可以为其设置toolbarConfiguration属性实现类似Tabs组件的效果，设置title设置标题，设置titleMode属性设置标题模式等等。
@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)
} 如果你想实现跳转，你需要为Navigation组件配置navDestination属性创建路由容器（大概说罗路由出口）。
https://i-blog.csdnimg.cn/direct/5736ed2bad7b4ffa96f1892c93d05a21.png
NavDestination1与NavDestination2为跳转组件。
https://i-blog.csdnimg.cn/direct/b4e9a118f2dc44488ce5fabacaff2cc6.png
之后你需要配置NavPathStack页面栈举行跳转（你可以将其理解为控制器）
https://i-blog.csdnimg.cn/direct/671106f1a61d4c9da0e28a686e1ea7d3.png
团体跳转思绪，首先展示的为tab切换页，tab1、tab2、tab3， tab1可以通过跳转NavDestination1按钮跳转到name为NavDestination1的页面（看路由容器），到NavDestination1页面，可以通过按钮跳转NavDestination2跳转到页面NavDestination2，这里携带了param参数，到页面NavDestination2可以通过页面栈NavPathStack中的getParamByName举行吸收。
注： 跳转的页面，必须由NavDestination组件包裹
具体demo代码：
//------------ 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
https://i-blog.csdnimg.cn/direct/34a70e2bc5124cf584b061c0a0b5ed27.png
2. 页面跳转
通过NavPathStack控制页面路由，实现跳转，返回，移除页面栈等
2.1 普通跳转
普通跳转，通过页面的name去跳转，并可以携带param。
[*]this.pageStack.pushPath({ name: "PageOne", param: "PageOne Param" })
[*]this.pageStack.pushPathByName("PageOne", "PageOne Param")
2.2 带返回回调的跳转，跳转时添加onPop回调，能在页面出栈时获取返回信息，并举行处理处罚。
this.pageStack.pushPathByName('PageOne', "PageOne Param", (popInfo) => {
console.log('Pop page name is: ' + popInfo.info.name + ', result: ' + JSON.stringify(popInfo.result))
}); 2.3 带错误码的跳转，跳转结束会触发异步回调，返回错误码信息。
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.');
}); 3. 参数获取
// 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")
4. 页面返回、替换、删除
// 返回到上一页
this.pageStack.pop()
this.pageStack.removeByIndexes()
// 返回到上一个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()
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]