【鸿蒙ArkUI路由/导航系列】二:Navigation基础路由操作,让页面跳转起来

在这篇文章中,将逐步的介绍,如何通过Navigation进行页面间的切换。

1、页面跳转的准备工作

首先,开发者需要创建一个NavPathStack对象并作为构造入参传给Navigation组件,以实现二者的绑定,后续的路由操作均基于该NavPathStack展开。

// BasicNavigation.ets

@Component
struct BasicNavigation {
  stack: NavPathStack = new NavPathStack()

  build() {
    // 将导航控制器NavPathStack 绑定至Navigation中。
    Navigation(this.stack) {
        // Navigation作为路由根容器,可以不显示任何内容
    }
  }
}

此时我们已经构建好了一个Navigation根容器并绑定了导航控制器NavPathStack,接下来我们需要构建显示的页面。

Step1、构建子页面

为每个NavDestination声明对外的实例化方法,如代码中的PageOneBuilder,执行该方法会创建一个BasicNavDestination的自定义组件,该组件就是一个Navigation的子页面。

// BasicNavDest.ets

// 组件实例化方法,该方法会创建BasicNavDestination自定义组件作为Navigation的页面
@Builder
export function PageOneBuilder() {
  BasicNavDestination({
    name: 'pageOne'
  });
}

// NavDestination组件
@Component
struct BasicNavDestination {
  name: string = 'NA'

  build() {
    NavDestination() {
        // 页面中的内容
    }
  }
}

Step2、配置Navigat

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值