#HarmonyOS NEXT体验官#【HarmonyOSNext】Navigation使用 原创

奥尼5354
发布于 2025-3-10 22:28
浏览
0收藏

简介

Navigation是路由容器组件,包括单栏(Stack)、分栏(Split)和自适应(Auto)三种显示模式。适用于模块内和跨模块的路由切换。
在页面跳转时,应该使用页面路由router,在页面内的页面跳转时,建议使用Navigation达到更好的转场动效场景。

UI框架

 #HarmonyOS NEXT体验官#【HarmonyOSNext】Navigation使用-鸿蒙开发者社区

显示模式

通过mode属性来定义

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

自适应(Auto)模式

组件默认的模式,当页面宽度大于等于一定阈值( API version 9及以前:520vp,API version 10及以后:600vp )时,Navigation组件采用分栏模式,反之采用单栏模式。

单栏(Stack)模式

 #HarmonyOS NEXT体验官#【HarmonyOSNext】Navigation使用-鸿蒙开发者社区

分栏(Split)模式

 #HarmonyOS NEXT体验官#【HarmonyOSNext】Navigation使用-鸿蒙开发者社区

标题栏模式

通过titleMode属性设置标题栏模式,分别有Mini模式和Full模式

  • Mini模式
     #HarmonyOS NEXT体验官#【HarmonyOSNext】Navigation使用-鸿蒙开发者社区
  • Full模式
     #HarmonyOS NEXT体验官#【HarmonyOSNext】Navigation使用-鸿蒙开发者社区

菜单栏

通过menus属性进行设置。支持Array<NavigationMenuItem>和CustomBuilder两种类型。
注意:使用Array<NavigationMenuItem>时,竖屏最多支持3个图标,横屏最多支持5个图标

@Entry
@Component
struct Index {
  ToolTmp: NavigationMenuItem = {
    value: "",
    icon: "resources/base/media/startIcon.png",
    action: () => {

    }
  }

  build() {
    Column() {
      Navigation() {

      }
      .title("主标题")
      .titleMode(NavigationTitleMode.Full)
      .menus([
        this.ToolTmp,
        this.ToolTmp,
        this.ToolTmp
      ])
    }
    .width("100%")
    .height("100%")
    .backgroundColor('#F1F3F5')
  }
}

工具栏

工具栏位于Navigation组件的底部,通过toolbarConfiguration属性进行设置。

@Entry
@Component
struct Index {
  ToolTmp: NavigationMenuItem = {
    value: "",
    icon: "resources/base/media/startIcon.png",
    action: () => {

    }
  }
  Toolbar: ToolbarItem = {
    value: "test",
    icon: $r('app.media.app_icon'),
    action: () => {
    }
  }

  build() {
    Column() {
      Navigation() {

      }
      .title("主标题")
      .titleMode(NavigationTitleMode.Full)
      .menus([
        this.ToolTmp,
        this.ToolTmp,
        this.ToolTmp
      ])
      .toolbarConfiguration([
        this.Toolbar,
        this.Toolbar,
        this.Toolbar
      ])
    }
    .width("100%")
    .height("100%")
    .backgroundColor('#F1F3F5')
  }
}

路由操作

Navigation路由相关的操作都是基于页面栈NavPathStack对象。主要涉及页面跳转、页面返回、页面替换、页面删除、参数获取、路由拦截等功能。
定义一个NavPathStack对象:pageStack: NavPathStack = new NavPathStack()
 #HarmonyOS NEXT体验官#【HarmonyOSNext】Navigation使用-鸿蒙开发者社区

页面跳转

  • 普通跳转,通过页面的name去跳转
this.pageStack.pushPathByName("PageOne", "PageOne Param")
  • 带返回回调的跳转,跳转时添加onPop回调,能在页面出栈时获取返回信息,并进行处理。
this.pageStack.pushPathByName('PageOne', "PageOne Param", (popInfo) => {
console.log('Pop page name is: ' + popInfo.info.name + ', result: ' + JSON.stringify(popInfo.result))
});
  • 带错误码的跳转,跳转结束会触发异步回调,返回错误码信息。
this.pageStack.pushDestinationByName('PageOne', "PageOne Param")
.catch((error: BusinessError) => {
    console.error(`Push destination failed, error code = ${error.code}, error.message = ${error.message}.`);
}).then(() => {
console.error('Push destination succeed.');
});

页面返回

// 返回到上一页
this.pageStack.pop()
// 返回到上一个PageOne页面
this.pageStack.popToName("PageOne")
// 返回到索引为1的页面
this.pageStack.popToIndex(1)
// 返回到根首页(清除栈中所有页面)
this.pageStack.clear()

页面替换

this.pageStack.replacePathByName("PageOne", "PageOne Param")

页面删除

// 删除栈中name为PageOne的所有页面
this.pageStack.removeByName("PageOne")
// 删除指定索引的页面
this.pageStack.removeByIndexes([1,3,5])

页面参数获取

// 获取栈中所有页面name集合
this.pageStack.getAllPathName()
// 获取索引为1的页面参数
this.pageStack.getParamByIndex(1)
// 获取PageOne页面的参数
this.pageStack.getParamByName("PageOne")
// 获取PageOne页面的索引集合
this.pageStack.getIndexByName("PageOne")

页面转场

Navigation默认提供了页面切换的转场动画,通过页面栈操作时,会触发不同的转场效果(Dialog类型的页面默认无转场动画),Navigation也提供了关闭系统转场、自定义转场以及共享元素转场的能力。

关闭转场

  • 全局关闭
pageStack: NavPathStack = new NavPathStack()

aboutToAppear(): void {
  this.pageStack.disableAnimation(true)
}
  • 单次关闭
pageStack: NavPathStack = new NavPathStack()

this.pageStack.pushPath({ name: "PageOne" }, false)
this.pageStack.pop(false)

子页面显示类型

  • 标准类型(NavDestinationMode.STANDARD),生命周期跟随其在NavPathStack页面栈中的位置变化而改变。
  • 弹窗类型(NavDestinationMode.DIALOG),显示和消失时不会影响下层标准类型的NavDestination的显示和生命周期,两者可以同时显示。

子页面生命周期(NavDestination)

 #HarmonyOS NEXT体验官#【HarmonyOSNext】Navigation使用-鸿蒙开发者社区

  • aboutToAppear:在创建自定义组件后,执行其build()函数之前执行(NavDestination创建之前),允许在该方法中改变状态变量,更改将在后续执行build()函数中生效。
  • onWillAppear:NavDestination创建后,挂载到组件树之前执行,在该方法中更改状态变量会在当前帧显示生效。
  • onAppear:通用生命周期事件,NavDestination组件挂载到组件树时执行。
  • onWillShow:NavDestination组件布局显示之前执行,此时页面不可见(应用切换到前台不会触发)。
  • onShown:NavDestination组件布局显示之后执行,此时页面已完成布局。
  • onWillHide:NavDestination组件触发隐藏之前执行(应用切换到后台不会触发)。
  • onHidden:NavDestination组件触发隐藏后执行(非栈顶页面push进栈,栈顶页面pop出栈或应用切换到后台)。
  • onWillDisappear:NavDestination组件即将销毁之前执行,如果有转场动画,会在动画前触发(栈顶页面pop出栈)。
  • onDisappear:通用生命周期事件,NavDestination组件从组件树上卸载销毁时执行。
  • aboutToDisappear:自定义组件析构销毁之前执行,不允许在该方法中改变状态变量。

使用案例

实现简单的登录界面跳转。
 #HarmonyOS NEXT体验官#【HarmonyOSNext】Navigation使用-鸿蒙开发者社区

项目目录

 #HarmonyOS NEXT体验官#【HarmonyOSNext】Navigation使用-鸿蒙开发者社区

Index

import { component_1 } from '../Components/component_1';
import { component_2 } from '../Components/component_2';
import { LoginParam } from '../Models/LoginParam';

@Entry
@Component
struct Index {
  @Provide("pageNavigation") pageNav: NavPathStack = new NavPathStack();

  @Builder
  PageMap(path: string) {
    if (path == "component_1") {
      component_1()
    }
    if (path == "component_2") {
      component_2()
    }

  }

  build() {
    Column() {
      Navigation(this.pageNav) {
        Button("直接跳转component_1界面(不带参数)")
          .width("80%")
          .margin({ bottom: 20 })
          .onClick(() => {
            this.pageNav.pushPathByName("component_1", "")
          })
        Button("直接跳转component_1界面(带参数)")
          .width("80%")
          .margin({ bottom: 20 })
          .onClick(() => {
            let login: LoginParam = new LoginParam("张三", "1234567");
            this.pageNav.pushPathByName("component_1", login)
          })
      }
      .title("主页")
      .titleMode(NavigationTitleMode.Full)
      .mode(NavigationMode.Auto)
      .navDestination(this.PageMap)
    }
    .height('100%')
    .width('100%')
  }
}

component_1

import { LoginParam } from '../Models/LoginParam';
import { JSON } from '@kit.ArkTS';

@Component
export struct component_1 {
  @Consume("pageNavigation") pageNav: NavPathStack;
  @State login: LoginParam = new LoginParam("", "")

  build() {
    Column() {
      NavDestination() {
        Row() {
          Text("账户:")
            .fontSize(16)
            .margin({ left: 10, right: 10 })
          TextInput({ text: this.login.Name, placeholder: "请输入账户" })
            .layoutWeight(1)
            .margin({ right: 10 })
            .onChange((value) => {
              this.login.Name = value
            })
        }
        .width("100%")

        Row() {
          Text("密码:")
            .fontSize(16)
            .margin({ left: 10, right: 10 })
          TextInput({ text: this.login.Password, placeholder: "请输入密码" })
            .layoutWeight(1)
            .margin({ right: 10 })
            .type(InputType.Password)
            .onChange((value) => {
              this.login.Password = value
            })
        }
        .width("100%")
        .margin({ top: 20 })

        Grid() {
          GridItem() {
            Button("注册")
              .width("100%")
              .backgroundColor("#f1f2f3")
              .fontColor("#007dfe")
              .onClick(() => {
                this.pageNav.pushPathByName("component_2", this.login.Name, (popInfo) => {
                  if (popInfo.result != null) {
                    let popLogin: LoginParam = popInfo.result as LoginParam;
                    if (popLogin == null) {
                      return;
                    }
                    this.login = popLogin;
                  }
                });
              })

          }
          .width("50%")
          .padding({ right: 10, left: 10 })

          GridItem() {
            Button("登录")
              .width("100%")
              .onClick(() => {
                console.log(JSON.stringify(this.login))
              })
          }
          .width("50%")
          .padding({ right: 10, left: 10 })
        }
        .rowsTemplate("1tf 1tf")
        .margin({ top: 10 })
        .width("100%")
        .height(60)
      }
      .title("登录")
      .mode(NavDestinationMode.STANDARD)
      .onWillShow(() => {
        let tempPara: LoginParam[] | string[] = this.pageNav.getParamByName("component_1") as LoginParam[] | string[]
        if (tempPara.length == 0 || tempPara[0] == "") {
          return;
        }
        this.login = tempPara[0] as LoginParam
      })
    }
    .width("100%")
    .height("100%")

  }
}

component_2

import { LoginParam } from '../Models/LoginParam'
import { promptAction } from '@kit.ArkUI';

@Component
export struct component_2 {
  @Consume("pageNavigation") pageNav: NavPathStack;
  @State login: LoginParam = new LoginParam("", "");
  @State tempPassword: string = "";

  build() {
    Column() {
      NavDestination() {
        Row() {
          Text("账户:")
            .fontSize(16)
            .margin({ left: 10, right: 10 })
            .width(40)
          TextInput({ text: this.login.Name, placeholder: "请输入账户" })
            .layoutWeight(1)
            .margin({ right: 10 })
            .onChange((value) => {
              this.login.Name = value
            })
        }
        .width("100%")

        Row() {
          Text("密码:")
            .fontSize(16)
            .margin({ left: 10, right: 10 })
            .width(40)
          TextInput({ text: this.login.Password, placeholder: "请输入密码" })
            .layoutWeight(1)
            .margin({ right: 10 })
            .type(InputType.Password)
            .onChange((value) => {
              this.login.Password = value
            })
        }
        .width("100%")
        .margin({ top: 20 })

        Row() {
          Text("确认密码:")
            .fontSize(16)
            .margin({ left: 10, right: 10 })
            .width(40)
          TextInput({ text: $$this.tempPassword, placeholder: "请再次输入密码" })
            .layoutWeight(1)
            .margin({ right: 10 })
            .type(InputType.Password)
            .onChange((value) => {
              this.tempPassword = value
            })
        }
        .width("100%")
        .margin({ top: 20 })


        Column() {
          Button("注册")
            .width("100%")
            .onClick(() => {
              if (this.tempPassword != "" && this.tempPassword === this.login.Password && this.login.Name != "") {
                this.pageNav.pop(this.login)
              } else {
                promptAction.showDialog({
                  title: "提示",
                  message: "注册失败,密码不一致或账户为空",
                  buttons: [
                    {
                      text: "确认",
                      color: "#000"
                    }
                  ]
                })
              }
            })
        }
        .width("100%")
        .margin({ top: 20 })
        .padding({ right: 10, left: 10 })
      }
      .title("注册")
      .mode(NavDestinationMode.STANDARD)
      .onWillShow(() => {
        let names: string[] = this.pageNav.getParamByName("component_2") as string[];
        if (names == null || names.length === 0) {
          return;
        }
        this.login.Name = names[0]
      })
    }
    .width("100%")
    .height("100%")

  }
}

LoginParam

@Observed
export class LoginParam {
  Name: string = "";
  Password: string = "";

  constructor(name: string, password: string) {
    this.Name = name;
    this.Password = password;
  }
}

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
收藏
回复
举报
回复
    相关推荐