AI 助理
备案控制台
开发者社区 云原生 文章 正文

【HarmonyOS Next开发】Navigation使用

2024-12-24 129
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Navigation是路由容器组件，包括单栏(Stack)、分栏(Split)和自适应(Auto)三种显示模式。适用于模块内和跨模块的路由切换。在页面跳转时，应该使用页面路由router，在页面内的页面跳转时，建议使用Navigation达到更好的转场动效场景。

​

简介

Navigation是路由容器组件，包括单栏(Stack)、分栏(Split)和自适应(Auto)三种显示模式。适用于模块内和跨模块的路由切换。

在页面跳转时，应该使用页面路由router，在页面内的页面跳转时，建议使用Navigation达到更好的转场动效场景。

UI框架

1.png

显示模式

通过mode属性来定义

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

自适应(Auto)模式

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

单栏(Stack)模式

2.png

分栏(Split)模式

3.png

标题栏模式

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

  • Mini模式

4.png

  • Full模式

5.png

菜单栏

通过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()

9.png

页面跳转

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

6.png

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

使用案例

实现简单的登录界面跳转。

7.gif

项目目录

8.png

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

​

文章标签：
容器
API
关键词：
HarmonyOS开发
HarmonyOS next开发
HarmonyOS next
64ml4hiqojt5k
目录
相关文章
code404
|
29天前
|
存储 人工智能 JavaScript
Harmony OS开发-ArkTS语言速成二
本文介绍了ArkTS基础语法，包括三种基本数据类型（string、number、boolean）和变量的使用。重点讲解了let、const和var的区别，涵盖作用域、变量提升、重新赋值及初始化等方面。期待与你共同进步！
code404
90 47
Harmony OS开发-ArkTS语言速成二
二流小码农
|
30天前
|
索引 API
鸿蒙开发：自定义一个股票代码选择键盘
金融类的软件，特别是股票基金类的应用，在查找股票的时候，都会有一个区别于正常键盘的键盘，也就是股票代码键盘，和普通键盘的区别就是，除了常见的数字之外，也有一些常见的股票代码前缀按钮，方便在查找股票的时候，更加方便的进行检索。
二流小码农
93 7
鸿蒙开发：自定义一个股票代码选择键盘
二流小码农
|
30天前
|
API
鸿蒙开发：自定义一个英文键盘
实现方式呢，有很多种，目前采用了比较简单的一种，如果大家采用网格Grid组件实现方式，也是可以的，但是需要考虑每行的边距以及数据，还有最后两行的格子占位问题。
二流小码农
76 4
鸿蒙开发：自定义一个英文键盘
二流小码农
|
30天前
|
前端开发 API 数据库
鸿蒙开发：异步并发操作
在结合async/await进行使用的时候，有一点需要注意，await关键字必须结合async，这两个是搭配使用的，缺一不可，同步风格在使用的时候，如何获取到错误呢，毕竟没有catch方法，其实，我们可以自己创建try/catch来捕获异常。
二流小码农
100 3
鸿蒙开发：异步并发操作
二流小码农
|
30天前
|
API
鸿蒙开发：实现popup弹窗
目前提供了两种方式实现popup弹窗，主推系统实现的方式，几乎能满足我们常见的所有场景，当然了，文章毕竟有限，尽量还是以官网为主。
二流小码农
96 2
鸿蒙开发：实现popup弹窗
RossyYan
|
21天前
|
存储 JSON 区块链
【HarmonyOS NEXT开发——ArkTS语言】购物商城的实现【合集】
HarmonyOS应用开发使用@Component装饰器将Home结构体标记为一个组件，意味着它可以在界面构建中被当作一个独立的UI单元来使用，并且按照其内部定义的build方法来渲染具体的界面内容。txt:string定义了一个名为Data的接口，用于规范表示产品数据的结构。src：类型为，推测是用于引用资源（可能是图片资源等）的一种特定类型，用于指定产品对应的图片资源。txt：字符串类型，用于存放产品的文字描述，比如产品名称等相关信息。price：数值类型，用于表示产品的价格信息。
RossyYan
41 5
RossyYan
|
21天前
|
开发工具 开发者 容器
【HarmonyOS NEXT开发——ArkTS语言】欢迎界面（启动加载页）的实现【合集】
从ArkTS代码架构层面而言，@Entry指明入口、@Component助力复用、@Preview便于预览，只是初窥门径，为开发流程带来些许便利。尤其动画回调与Blank组件，细节粗糙，后续定当潜心钻研，力求精进。”，字体颜色为白色，字体大小等设置与之前类似，不过动画配置有所不同，时长为。，不过这里没有看到额外的动画效果添加到这个特定的图片元素上（与前面带动画的元素对比而言）。这是一个显示文本的视图，文本内容为“奇怪的知识”，设置了字体颜色为灰色（的结构体，它代表了整个界面组件的逻辑和视图结构。
RossyYan
38 1
三掌柜666
|
30天前
|
开发框架 物联网 API
HarmonyOS开发：串行通信开发详解
在电子设备和智能系统的设计中，数据通信是连接各个组件和设备的核心，串行通信作为一种基础且广泛应用的数据传输方式，因其简单、高效和成本效益高而被广泛采用。HarmonyOS作为一个全场景智能终端操作系统，不仅支持多种设备和场景，还提供了强大的开发框架和API，使得开发者能够轻松实现串行通信功能。随着技术的不断进步，串行通信技术也在不断发展。在HarmonyOS中，串行通信的开发不仅涉及到基本的数据发送和接收，还包括设备配置、错误处理和性能优化等多个方面。那么本文就来深入探讨在HarmonyOS中如何开发串行通信应用，包括串行通信的基础知识、HarmonyOS提供的API、开发步骤和实际代码示例
三掌柜666
50 2
码农乐园
|
30天前
鸿蒙语言开发 几十套鸿蒙ArkTs app毕业设计及课程作业
鸿蒙语言开发 几十套鸿蒙ArkTs app毕业设计及课程作业
码农乐园
32 1
6agucrwnzwl4a
|
移动开发 Ubuntu 网络协议
嵌入式linux/鸿蒙开发板(IMX6ULL）开发 （二）Ubuntu操作入门与Linux常用命令（中）
嵌入式linux/鸿蒙开发板(IMX6ULL）开发 （二）Ubuntu操作入门与Linux常用命令
6agucrwnzwl4a
182 1
嵌入式linux/鸿蒙开发板(IMX6ULL）开发 （二）Ubuntu操作入门与Linux常用命令（中）