鴻蒙HarmonyOS實戰-ArkUI元件（Navigation）

蜀道山QAQ發表於2024-04-13

Navigation元件通常作為頁面的根容器，支援單頁面、分欄和自適應三種顯示模式。開發者可以使用Navigation元件提供的屬性來設定頁面的標題欄、工具欄、導航欄等。

在Navigation元件中，頁面分為主頁和內容頁。主頁由標題欄、內容區和工具欄組成，並且可以使用NavRouter子元件實現導航欄功能。內容頁則主要顯示NavDestination子元件中的內容。

NavRouter是Navigation元件中的特殊子元件，通常用於與Navigation元件配合使用，它預設提供了點選響應處理，不需要開發者自定義點選事件邏輯。NavRouter元件只有兩個子元件，其中第二個子元件必須是NavDestination。而NavDestination則是Navigation元件中的特殊子元件，用於顯示內容頁的內容。當開發者點選NavRouter元件時，會跳轉到對應的NavDestination內容區。

🔎1.設定頁面顯示模式

🦋1.1 自適應模式

Navigation() {
  ...
}
.mode(NavigationMode.Auto)

mode屬性為NavigationMode.Auto。自適應模式下，當裝置寬度大於520vp時，Navigation元件採用分欄模式，反之採用單頁面模式。

🦋1.2 單頁面模式

@Entry
@Component
struct NavigationExample {
  private arr: number[] = [1, 2, 3];

  build() {
    Column() {
      Navigation() {
        TextInput({ placeholder: 'search...' })
          .width("90%")
          .height(40)
          .backgroundColor('#FFFFFF')

        List({ space: 12 }) {
          ForEach(this.arr, (item) => {
            ListItem() {
              NavRouter() {
                Text("NavRouter" + item)
                  .width("100%")
                  .height(72)
                  .backgroundColor('#FFFFFF')
                  .borderRadius(24)
                  .fontSize(16)
                  .fontWeight(500)
                  .textAlign(TextAlign.Center)
                NavDestination() {
                  Text("NavDestinationContent" + item)
                }
                .title("NavDestinationTitle" + item)
              }
            }
          }, item => item)
        }
        .width("90%")
        .margin({ top: 12 })
      }
      .title("主標題")
      .mode(NavigationMode.Stack)
      .menus([
        {value: "", icon: "./image/ic_public_search.svg", action: ()=> {}},
        {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}},
        {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}},
        {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}},
        {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}}
      ])
      .toolBar({items: [
        {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=> {}},
        {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=> {}},
        {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=> {}}
      ]})
    }
    .height('100%')
    .width('100%')
    .backgroundColor('#F1F3F5')
  }
}

頁面結構如下：

實際效果：

注意：選單欄圖片不存在可能會出現問題

🦋1.3 分欄模式

@Entry
@Component
struct NavigationExample {
  private arr: number[] = [1, 2, 3];

  build() {
    Column() {
      Navigation() {
        TextInput({ placeholder: 'search...' })
          .width("90%")
          .height(40)
          .backgroundColor('#FFFFFF')

        List({ space: 12 }) {
          ForEach(this.arr, (item) => {
            ListItem() {
              NavRouter() {
                Text("NavRouter" + item)
                  .width("100%")
                  .height(72)
                  .backgroundColor('#FFFFFF')
                  .borderRadius(24)
                  .fontSize(16)
                  .fontWeight(500)
                  .textAlign(TextAlign.Center)
                NavDestination() {
                  Text("NavDestinationContent" + item)
                }
                .title("NavDestinationTitle" + item)
              }
            }
          }, item => item)
        }
        .width("90%")
        .margin({ top: 12 })
      }
      .title("主標題")
      .mode(NavigationMode.Split)
      .menus([
        {value: "", icon: "./image/ic_public_search.svg", action: ()=> {}},
        {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}},
        {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}},
        {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}},
        {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}}
      ])
      .toolBar({items: [
        {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=> {}},
        {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=> {}},
        {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=> {}}
      ]})
    }
    .height('100%')
    .width('100%')
    .backgroundColor('#F1F3F5')
  }
}

頁面結構如下：

理論效果：

實際效果：

注意：選單欄圖片不存在就會出現如上問題

🔎2.設定標題欄模式

🦋2.1 Mini模式

普通型標題欄，用於一級頁面不需要突出標題的場景。

@Entry
@Component
struct NavigationExample {
  private arr: number[] = [1, 2, 3];

  build() {
    Column() {
      Navigation() {
        TextInput({ placeholder: 'search...' })
          .width("90%")
          .height(40)
          .backgroundColor('#FFFFFF')

        List({ space: 12 }) {
          ForEach(this.arr, (item) => {
            ListItem() {
              NavRouter() {
                Text("NavRouter" + item)
                  .width("100%")
                  .height(72)
                  .backgroundColor('#FFFFFF')
                  .borderRadius(24)
                  .fontSize(16)
                  .fontWeight(500)
                  .textAlign(TextAlign.Center)
                NavDestination() {
                  Text("NavDestinationContent" + item)
                }
                .title("NavDestinationTitle" + item)
              }
            }
          }, item => item)
        }
        .width("90%")
        .margin({ top: 12 })
      }
      .title("主標題")
      .titleMode(NavigationTitleMode.Mini)
      .mode(NavigationMode.Split)
      .menus([
        {value: "", icon: "./image/ic_public_search.svg", action: ()=> {}},
        {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}},
        {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}},
        {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}},
        {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}}
      ])
      .toolBar({items: [
        {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=> {}},
        {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=> {}},
        {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=> {}}
      ]})
    }
    .height('100%')
    .width('100%')
    .backgroundColor('#F1F3F5')
  }
}

🦋2.2 Full模式
強調型標題欄，用於一級頁面需要突出標題的場景。

@Entry
@Component
struct NavigationExample {
  private arr: number[] = [1, 2, 3];

  build() {
    Column() {
      Navigation() {
        TextInput({ placeholder: 'search...' })
          .width("90%")
          .height(40)
          .backgroundColor('#FFFFFF')

        List({ space: 12 }) {
          ForEach(this.arr, (item) => {
            ListItem() {
              NavRouter() {
                Text("NavRouter" + item)
                  .width("100%")
                  .height(72)
                  .backgroundColor('#FFFFFF')
                  .borderRadius(24)
                  .fontSize(16)
                  .fontWeight(500)
                  .textAlign(TextAlign.Center)
                NavDestination() {
                  Text("NavDestinationContent" + item)
                }
                .title("NavDestinationTitle" + item)
              }
            }
          }, item => item)
        }
        .width("90%")
        .margin({ top: 12 })
      }
      .title("主標題")
      .titleMode(NavigationTitleMode.Full)
      .mode(NavigationMode.Split)
      .menus([
        {value: "", icon: "./image/ic_public_search.svg", action: ()=> {}},
        {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}},
        {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}},
        {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}},
        {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}}
      ])
      .toolBar({items: [
        {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=> {}},
        {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=> {}},
        {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=> {}}
      ]})
    }
    .height('100%')
    .width('100%')
    .backgroundColor('#F1F3F5')
  }
}

注意：選單欄圖片不存在就會出現如上問題

🔎3.設定選單欄

1、設定了3個圖示的選單欄

Navigation() {
  ...
}
.menus([{value: "", icon: "./image/ic_public_search.svg", action: ()=>{}},
        {value: "", icon: "./image/ic_public_add.svg", action: ()=>{}},
        {value: "", icon: "./image/ic_public_add.svg", action: ()=>{}}])

2、設定了4個圖示的選單欄

Navigation() {
  ...
}
.menus([{value: "", icon: "./image/ic_public_search.svg", action: ()=>{}},
        {value: "", icon: "./image/ic_public_add.svg", action: ()=>{}},
        {value: "", icon: "./image/ic_public_add.svg", action: ()=>{}},
        {value: "", icon: "./image/ic_public_add.svg", action: ()=>{}}])

🔎4.設定工具欄

Navigation() {
  ...
}
.toolBar({items:[
        {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=>{}},
        {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=>{}},
        {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=>{}}]})

🚀寫在最後

如果你覺得這篇內容對你還蠻有幫助，我想邀請你幫我三個小忙：
點贊，轉發，有你們的『點贊和評論』，才是我創造的動力。
關注小編，同時可以期待後續文章ing🚀，不定期分享原創知識。
更多鴻蒙最新技術知識點，請關注作者部落格：https://t.doruo.cn/14DjR1rEY

鴻蒙HarmonyOS實戰-ArkUI元件（Canvas）
2024-04-18
鴻蒙UI元件Canvas
鴻蒙HarmonyOS實戰-ArkUI元件（Menu）
2024-04-11
鴻蒙UI元件
鴻蒙HarmonyOS實戰-ArkUI元件（CustomDialog）
2024-04-08
鴻蒙UI元件
鴻蒙HarmonyOS實戰-ArkUI元件（List）
2024-03-29
鴻蒙UI元件
鴻蒙HarmonyOS實戰-ArkUI元件（Swiper）
2024-03-30
鴻蒙UI元件
鴻蒙HarmonyOS實戰-ArkUI元件（Stack）
2024-03-23
鴻蒙UI元件
鴻蒙HarmonyOS實戰-ArkUI元件（mediaquery）
2024-03-27
鴻蒙UI元件
鴻蒙HarmonyOS實戰-ArkUI元件（Video）
2024-04-09
鴻蒙UI元件IDE
鴻蒙HarmonyOS實戰-ArkUI元件（Popup）
2024-04-10
鴻蒙UI元件
鴻蒙HarmonyOS實戰-ArkUI元件（Button）
2024-04-01
鴻蒙UI元件
鴻蒙HarmonyOS實戰-ArkUI元件（Toggle）
2024-04-02
鴻蒙UI元件
鴻蒙HarmonyOS實戰-ArkUI元件（Progress）
2024-04-03
鴻蒙UI元件
鴻蒙HarmonyOS實戰-ArkUI元件（Flex）
2024-03-24
鴻蒙UI元件Flex
鴻蒙HarmonyOS實戰-ArkUI元件（RelativeContainer）
2024-03-25
鴻蒙UI元件AI
鴻蒙HarmonyOS實戰-ArkUI元件（Image）
2024-04-16
鴻蒙UI元件
鴻蒙HarmonyOS實戰-ArkUI元件（Shape）
2024-04-17
鴻蒙UI元件
鴻蒙HarmonyOS實戰-ArkUI元件（Tabs）
2024-04-15
鴻蒙UI元件
鴻蒙HarmonyOS實戰-ArkUI元件（Grid/GridItem）
2024-03-29
鴻蒙UI元件
鴻蒙HarmonyOS實戰-ArkUI元件（Row/Column）
2024-03-22
鴻蒙UI元件
鴻蒙HarmonyOS實戰-ArkUI元件（TextInput/TextArea）
2024-04-07
鴻蒙UI元件
鴻蒙HarmonyOS實戰-ArkUI元件（GridRow/GridCol）
2024-03-26
鴻蒙UI元件
鴻蒙HarmonyOS實戰-ArkUI元件（頁面路由）
2024-04-12
鴻蒙UI元件路由
鴻蒙HarmonyOS實戰-ArkUI事件（鍵鼠事件）
2024-04-26
鴻蒙UI事件
鴻蒙HarmonyOS實戰-ArkUI事件（手勢方法）
2024-05-08
鴻蒙UI事件
鴻蒙HarmonyOS實戰-ArkUI事件（焦點事件）
2024-05-07
鴻蒙UI事件
鴻蒙HarmonyOS實戰-ArkUI事件（觸屏事件）
2024-04-25
鴻蒙UI事件
鴻蒙HarmonyOS實戰-ArkUI事件（組合手勢）
2024-05-12
鴻蒙UI事件
鴻蒙HarmonyOS實戰-ArkUI事件（單一手勢）
2024-05-09
鴻蒙UI事件
鴻蒙HarmonyOS實戰-Stage模型（UIAbility元件）
2024-05-14
鴻蒙模型UI元件
鴻蒙HarmonyOS實戰-Stage模型（ExtensionAbility元件）
2024-05-15
鴻蒙模型元件
鴻蒙HarmonyOS實戰-ArkUI動畫（佈局更新動畫）
2024-04-19
鴻蒙UI動畫
鴻蒙HarmonyOS實戰-ArkUI動畫（放大縮小檢視）
2024-04-23
鴻蒙UI動畫
鴻蒙HarmonyOS實戰-Stage模型（AbilityStage元件容器）
2024-05-22
鴻蒙模型元件
鴻蒙HarmonyOS實戰-ArkUI動畫（頁面轉場動畫）
2024-04-24
鴻蒙UI動畫
鴻蒙HarmonyOS實戰-ArkUI動畫（彈簧曲線動畫）
2024-04-22
鴻蒙UI動畫
鴻蒙HarmonyOS實戰-Stage模型（概述和元件配置）
2024-05-13
鴻蒙模型元件
鴻蒙HarmonyOS實戰-Web元件（基本使用和屬性）
2024-05-28
鴻蒙Web元件
鴻蒙HarmonyO實戰-ArkUI動畫（元件內轉場動畫）
2024-04-20
鴻蒙UI動畫元件