Navigation（頁(yè)面的根容器）

設(shè)置頁(yè)面顯示模式

Navigation組件通過(guò)mode屬性設(shè)置頁(yè)面的顯示模式。

• 自適應(yīng)模式

  Navigation組件默認(rèn)為自適應(yīng)模式，此時(shí)mode屬性為NavigationMode.Auto。自適應(yīng)模式下，當(dāng)設(shè)備寬度大于520vp時(shí)，Navigation組件采用分欄模式，反之采用單頁(yè)面模式。

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

• 單頁(yè)面模式
  圖1 單頁(yè)面布局示意圖

  

  將mode屬性設(shè)置為NavigationMode.Stack，Navigation組件即可設(shè)置為單頁(yè)面顯示模式。

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

  

• 分欄模式
  圖2 分欄布局示意圖
  

  將mode屬性設(shè)置為NavigationMode.Split，Navigation組件即可設(shè)置為分欄顯示模式。

  @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("主標(biāo)題")
        .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')
    }
  }

  

設(shè)置標(biāo)題欄模式

標(biāo)題欄在界面頂部，用于呈現(xiàn)界面名稱(chēng)和操作入口，Navigation組件通過(guò)titleMode屬性設(shè)置標(biāo)題欄模式。

• Mini模式
  普通型標(biāo)題欄，用于一級(jí)頁(yè)面不需要突出標(biāo)題的場(chǎng)景。

  圖3 Mini模式標(biāo)題欄
  

  Navigation() {
    ...
  }
  .titleMode(NavigationTitleMode.Mini)

設(shè)置菜單欄

菜單欄位于Navigation組件的右上角，開(kāi)發(fā)者可以通過(guò)menus屬性進(jìn)行設(shè)置。menus支持Array<NavigationMenuItem>和CustomBuilder兩種參數(shù)類(lèi)型。使用Array<NavigationMenuItem>類(lèi)型時(shí)，豎屏最多支持顯示3個(gè)圖標(biāo)，橫屏最多支持顯示5個(gè)圖標(biāo)，多余的圖標(biāo)會(huì)被放入自動(dòng)生成的更多圖標(biāo)。

圖5 設(shè)置了3個(gè)圖標(biāo)的菜單欄

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: ()=>{}}])

設(shè)置工具欄

工具欄位于Navigation組件的底部，開(kāi)發(fā)者可以通過(guò)toolBar屬性進(jìn)行設(shè)置。