深入浅出ArkTS开发指南之底部导航和页面跳转

大家好，我是全栈的峰哥，独立开发者，相关问题可以加v:2588234，联系我一起沟通

今天带来的知识是Navigation组件的使用，同时通过属性：toolbarConfiguration的配置，配合router.pushUrl的运用，实现底部导航切换到首页、会员中心，同时支持多个Navigation，并跳转到NavDestination子页面中。

定义首页

首先我们先创建一个 Index.ets 页面，注意首页路径，如下伪代码所示

@Entry
@ComponentV2
struct MainPage {
  pathStack: NavPathStack = new NavPathStack()
   build() {

    Column() {
      Navigation(this.pathStack) {
          Column(){
              Text("首页")
          }
      }.mode(NavigationMode.Auto)
      .toolbarConfiguration([
       {
          value: "首页",
          action: () => {
          }
        },
         {
          value: "我的",
          action:()=>{
            router.pushUrl({
              url:"pages/MemberPage"
            })
          }
        }
      ])
      .hideTitleBar(true)
  }
}

定义会员中心

@Entry
@ComponentV2
struct MemberPage {
  pathStack: NavPathStack = new NavPathStack()
   build() {

    Column() {
      Navigation(this.pathStack) {
          Column(){
              Text("会员中心")
              Text("点击设置")
              .onClick(()=>{
                  this.pathStack.pushPathByName("SettingPage",null)
              })
          }
      }.mode(NavigationMode.Auto)
      .toolbarConfiguration([
       {
          value: "首页",
          action: () => {
              router.pushUrl({
                  url:"pages/IndexPage"
                })
          }
        },
         {
          value: "我的",
          action:()=>{
            
          }
        }
      ])
      .hideTitleBar(true)
  }
}

此时两个页面已经定义好了，那么我们在增加一个会员设置页面，相当于会员中心中增加跳转到设置信息页面

定义会员设置页面

@Entry
@ComponentV2
struct SettingPage {
   build() {

    Column() {
      NavDestination() {
          Column(){
              Text("设置页面")
              Text("点击设置")
          }
      }
  }
}

注意到在 2 个根页面Navigation组件中toolbarConfiguration，我们通过 router 进行跳转，而跳转到子页面设置页面时，我们是通过NavPathStack方式。通过这样才实现了两个根页面不会互相干扰。

不幸的是，上面的方法我也是自己根据官方文档大概研究了很长时间摸索出来的方法。 幸运的是最终实现了我想要的效果。