【HarmonyOS开发】Navigation使用

简介

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

UI框架

在这里插入图片描述

显示模式

通过mode属性来定义

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

自适应(Auto)模式

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

单栏(Stack)模式

在这里插入图片描述

分栏(Split)模式

在这里插入图片描述

标题栏模式

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

Mini模式
Full模式

菜单栏

通过menus属性进行设置。支持Array和CustomBuilder两种类型。
注意：使用Array时，竖屏最多支持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()
在这里插入图片描述

页面跳转

普通跳转，通过页面的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）

在这里插入图片描述

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

使用案例

实现简单的登录界面跳转。
请添加图片描述

项目目录

在这里插入图片描述

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;
  }
}