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