鸿蒙_使用组件导航Navigation搭建应用框架

组件导航封装了页面、标题、菜单栏、工具栏等功能，我们只需要进行简单的设置，就能快速搭建应用的框架，我们直接新建一个独立页面来通过组件导航实现主页、设置页、我的页三个示例页面，并且相互之间可以跳转，并且天然支持宽屏时主页和二级页面自动分栏显示。

@Entry
@Component
struct TestNavigationWithSetting {
  @State message: string = 'Hello World';
  //导航页面栈
  navPathStack: NavPathStack = new NavPathStack();

  //导航页
  @Builder
  navPages(name: string) {
    if (name === 'SettingPage') {
      NavDestination() {
        Text('设置页内容')
        Button('返回')
          .onClick(() => {
            this.navPathStack.pop()
          })
      }.title('设置')
    } else if (name === 'MinePage') {
      NavDestination() {
        Text('我的页内容')
        Button('返回')
          .onClick(() => {
            this.navPathStack.pop()
          })
      }.title('我的')
    }
  }

  //自定义菜单栏
  @Builder
  navMenus() {
    Row({ space: 10 }) {
      Button() {
        Row() {
          SymbolGlyph($r('sys.symbol.house'))
            .fontSize(20)
        }
        .alignItems(VerticalAlign.Center) // 垂直居中
      }
      .padding(10)
      .backgroundColor(Color.White)
      .border({ width: 1 })
      .type(ButtonType.Circle)
      .onClick(() => {
        this.navPathStack.pushPath({ name: 'SettingPage' })
      })

      Button() {
        Row() {
          SymbolGlyph($r('sys.symbol.message'))
            .fontSize(20)
        }
        .alignItems(VerticalAlign.Center) // 垂直居中
      }
      .padding(10)
      .backgroundColor(Color.White)
      .border({ width: 1 })
      .type(ButtonType.Circle)
      .onClick(() => {
        this.navPathStack.pushPath({ name: 'SettingPage' })
      })
    }
    .justifyContent(FlexAlign.End)
    .padding(10)
    //.backgroundColor(Color.Gray)
    .width('100%')
    .height('100%')
  }

  build() {
    Navigation(this.navPathStack) {
      Scroll() {
        Column({ space: 10 }) {
          Text('主页内容')
          Button('跳转到设置页')
            .margin(20)
            .onClick(() => {
              this.navPathStack.pushPath({ name: 'SettingPage' })
            })
          Button('跳转到我的页')
            .onClick(() => {
              this.navPathStack.pushPath({ name: 'MinePage' })
            })

          //生成几个占位
          ForEach([1, 2, 3, 4, 5, 6, 7, 8], (item: number) => {
            Button('多加几个')
              .margin(10)
              .onClick(() => {
                try {
                  this.getUIContext().getPromptAction().showToast({ message: '点击了按钮' })
                } catch (error) {
                  // TODO: Implement error handling.
                }
              })
          })


          Button('最后一个')
            .onClick(() => {
              this.navPathStack.pushPath({ name: 'MinePage' })
            })

        }
        .padding({ top: 10, bottom: 20 })
        .width('100%')
      }
    }
    .navDestination(this.navPages)

    //.mode(NavigationMode.Auto) //导航模式：默认是宽屏（大于600vp）自动分栏
    //.mode(NavigationMode.Stack)//不分栏
    //.mode(NavigationMode.Split)//强制分栏

    .title('主页')
    .title({ main: '主标题', sub: '副标题' })
    //.titleMode(NavigationTitleMode.Free)
    //.titleMode(NavigationTitleMode.Full)
    //.titleMode(NavigationTitleMode.Mini)

    //.hideTitleBar(true) //隐藏标题和菜单栏

    //设置菜单栏
    .menus([
      {
        value: '增加',
        icon: $r('sys.media.ohos_ic_public_add'),
        action: () => {
          this.navPathStack.pushPath({ name: 'MinePage' })
        }
      },
      {
        value: '分享',
        icon: $r('sys.media.ohos_ic_public_share'),
        action: () => {
          this.navPathStack.pushPath({ name: 'SettingPage' })
        }
      },
      {
        value: '编辑',
        icon: $r('sys.media.ohos_ic_public_edit'),
        action: () => {
          this.navPathStack.pushPath({ name: 'MinePage' })
        }
      },
      {
        value: '拍照',
        icon: $r('sys.media.ohos_ic_public_camera'),
        action: () => {
          this.navPathStack.pushPath({ name: 'MinePage' })
        }
      },
      {
        value: '取消',
        icon: $r('sys.media.ohos_ic_public_cancel'),
        action: () => {
          this.navPathStack.pushPath({ name: 'MinePage' })
        }
      }
    ])
    //.menus(this.navMenus) //自定义菜单栏

    .toolbarConfiguration([
      {
        value: '增加',
        icon: $r('sys.media.ohos_ic_public_add'),
        action: () => {
          this.navPathStack.pushPath({ name: 'MinePage' })
        }
      },
      {
        value: '扫码',
        icon: $r('sys.media.ohos_ic_public_scan'),
        action: () => {
          this.navPathStack.pushPath({ name: 'MinePage' })
        }
      },
      {
        value: '拍照',
        icon: $r('sys.media.ohos_ic_public_camera'),
        action: () => {
          this.navPathStack.pushPath({ name: 'SettingPage' })
        }
      }
      /*,
      {
        value: '更多',
        icon: $r('sys.media.ohos_ic_public_more'),
        action: () => {
          this.navPathStack.pushPath({ name: 'MinePage' })
        }
      }*/
    ], { backgroundColor: undefined })

  }
}

---

实际运行效果如下，横屏效果：

宽屏效果：