鸿蒙_使用组件导航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 }) } }实际运行效果如下，横屏效果：
宽屏效果：