鸿蒙开发系列教程（十三）--组件导航：Navigation 导航

Navigation 导航

Navigation组件的页面包含主页和内容页。主页由标题栏、内容区和工具栏组成，

分栏模式

NavigationMode.Split

完整代码:

@Entry
@Component
struct NavigationExample {
  private arr: string[] = ['男装', '女装', '童装'];

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

        List({ space: 12 }) {
          ForEach(this.arr, (item) => {
            ListItem() {
              NavRouter() {
                Text("" + item)
                  .width("100%")
                  .height(72)
                  .backgroundColor('#FFFFCC')
                  .borderRadius(24)
                  .fontSize(16)
                  .fontWeight(500)
                  .textAlign(TextAlign.Center)
                NavDestination() {
                  Text("内容" + item)
                }
                .title("主题" + item)
              }
            }
          }, item => item)
        }
        .width("90%")
        .margin({ top: 12 })
      }
      .title("主导航")
      .mode(NavigationMode.Split)
      //设置菜单栏
      .menus([
        {value: "", icon: "./common/image/a5.svg", action: ()=> {}},
         // {value: "", icon: "./common/image/a5.svg", action: ()=> {}}
      ])
      //设置导航栏
      .toolBar({items: [
        {value: "首页", icon: "./common/image/a2.svg", action: ()=> {}},
        {value: "购物车", icon: "./common/image/a3.svg", action: ()=> {}},
        {value: "订单", icon: "./common/image/a4.svg", action: ()=> {}}
      ]})
    }
    .height('100%')
    .width('100%')
    .backgroundColor('#F1F3DD')
  }
}

自适应模式

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

单页面模式

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

Mini模式

普通型标题栏，用于一级页面不需要突出标题的场景。

Full模式

强调型标题栏，用于一级页面需要突出标题的场景。

Navigation() { …}

.titleMode(NavigationTitleMode.Full)

以上内容参考“官方文档”