Navigation組件適用于模塊內(nèi)和跨模塊的路由切換梧疲，通過組件級路由能力實現(xiàn)更加自然流暢的轉(zhuǎn)場體驗，并提供多種標(biāo)題欄樣式來呈現(xiàn)更好的標(biāo)題和內(nèi)容聯(lián)動效果。一次開發(fā)帮毁，多端部署場景下实苞，Navigation組件能夠自動適配窗口顯示大小，在窗口較大的場景下自動切換分欄展示效果烈疚。
根頁面設(shè)置
我們在Entry的入口處Index.ets使用Navigation當(dāng)作根頁面黔牵，這里會面臨一個問題，怎么從啟動頁跳轉(zhuǎn)到首頁爷肝，并關(guān)閉啟動頁猾浦，使用首頁一直留在頁面棧中，不允許銷毀灯抛，在前面的文章《鴻蒙Navigation處理啟動頁跳轉(zhuǎn)到首頁問題》中有介紹處理方法金赦，在此不展開。在使用Navigation時对嚼，由于默認(rèn)帶有TitleBar和Toolbar夹抗，樣式不好自定義，我們直接隱藏TitleBar和Toolbar猪半，實際需要的話兔朦，可以自己實現(xiàn)。由于默認(rèn)是Auto模式磨确，以便于適配大屏設(shè)備沽甥，若我們在大屏設(shè)備上不使用分欄效果，可以強(qiáng)制設(shè)置單頁面模式乏奥。
@Entry
@ComponentV2
struct Index {
nav: NavPathStack = new NavPathStack()
build() {
Navigation(this.nav)
.mode(NavigationMode.Stack)
.hideToolBar(true)
.hideTitleBar(true)
.height('100%')
.width('100%')
}
}
系統(tǒng)路由表配置
接下來我們需要配置系統(tǒng)路由表摆舟，在resources/base/profile目錄下新建一個json文件，例如router_map.json邓了，并在里面配置相關(guān)的路由頁面恨诱，例如我們配置一個彈窗頁面和一個登錄頁面。
{
"routerMap": [
{
"name": "dialog",
"pageSourceFile": "src/main/ets/pages/dialog/DialogPage.ets",
"buildFunction": "dialogBuilder"
},
{
"name": "login",
"pageSourceFile": "src/main/ets/pages/login/LoginPage.ets",
"buildFunction": "loginBuilder"
}
]
}
在routerMap里面配置具體的頁面骗炉，name為頁面名稱照宝，使用push打開新頁面時，傳的name名稱就是這里定義的句葵。pageSourceFile為頁面源文件厕鹃，buildFunction為頁面入口builder，通過源文件找到這個入口builder乍丈。在module.json5文件中有一個routerMap字段剂碴，值為我們前面定義的router_map.json
實現(xiàn)子頁面
路由表字義好了后，我們需要實現(xiàn)具體的頁面轻专，這里分別實現(xiàn)一個彈窗頁面和標(biāo)準(zhǔn)頁面忆矛。彈窗示例如下，頁面模式需要設(shè)置為NavDestinationMode.DIALOG
@Builder
function dialogBuilder() {
DialogPage()
}
@ComponentV2
export struct DialogPage {
build() {
NavDestination() {
Stack() {
Column() {
Text('彈窗標(biāo)題')
Text('彈窗內(nèi)容')
Row() {
Text('取消').layoutWeight(1)
Text('確定').layoutWeight(1)
}
}
.width('80%')
.borderRadius(16)
.backgroundColor($r('app.color.start_window_background'))
}.width('100%').height('100%')
}.hideTitleBar(true).mode(NavDestinationMode.DIALOG)
}
}
標(biāo)準(zhǔn)登錄頁面如下请垛，默認(rèn)為標(biāo)準(zhǔn)模式催训，mode可以省略不設(shè)置
@Builder
function loginBuilder() {
LoginPage()
}
@ComponentV2
export struct LoginPage {
build() {
NavDestination() {
Column() {
Text('賬號')
Text('密碼')
Text('登錄')
}
}
.width('100%')
.height('100%')
.hideTitleBar(true)
}
}
頁面跳轉(zhuǎn)操作
打開新頁面
使用NavPathStack的pushPath或pushPathByName可以打開一個新頁面洽议，例如打開登錄頁面則是navPathStack.pushPathByName('login', undefined)，顯示一個彈窗則是navPathStack.pushPathByName('dialog', undefined)漫拭〗柿澹可以發(fā)現(xiàn)使用Navigation來實現(xiàn)彈窗還是非常簡單的，而且可以全局顯示嫂侍，不依賴于具體頁面以及Context，而且彈窗還有顯示隱藏等回調(diào)荚坞。
返回頁面
使用NavPathStack的pop方法關(guān)閉當(dāng)前頁面挑宠，回到上一個頁面，我們還可以使用popToName返回到指定的頁面颓影，也可以使用popToIndex返回到第幾個頁面各淀，甚至還可以使用clear方法直接回到首頁，使用起來還是非常方便的诡挂。
