鸿蒙navgation的使用

主页面内容

import { homepage } from '../component/homepage'
import {listpage} from  '../component/listpage'
interface objName{
  age:number,
  name:string,
  id:number
}

@Entry
@Component
struct Index {
  //MytabIndex是我的切换索引
  @State MytabIndex:number=0
  //控制navgation切换
  pathStack:NavPathStack=new NavPathStack()
  tabController:TabsController=new TabsController()
  @State message: string = 'Hello World';
  @Builder
  pageMap(name:string){
    if (name === "home") {
      // pageOneTmp()
      homepage()
    } else if (name === "list") {
      // pageTwoTmp()
      listpage()
    } else if (name === "my") {
      // pageThreeTmp()
    }
  }
  build() {
    Navigation(this.pathStack) {
      Tabs({controller:this.tabController} //通过controller属性实现组件和一个变量的绑定
      //   然后我们就可以通过这个变量操作组件的一些行为
      ){
        TabContent(){
          Column(){
            Text("home")
            Button("跳转home")
              .onClick(()=>{
                const obj:objName={
                  id:1,
                  name:'k',
                  age:18
                }
                this.pathStack.pushPath({
                  // 与上边的pageMap里的name照应
                  name:'home',
                  // 传参
                  param:obj
                })
              })
          }


        }
        TabContent(){
          Text("list")
        }
        TabContent(){
          Text("user")
        }
      }
      .scrollable(false)
    }
    .title("我的页面")
    // .hideTitleBar(true)
    .toolbarConfiguration([
      {
        value:"home",
         icon:$rawfile("images/home.png"),
        activeIcon:$rawfile("images/home_sel.png"),
        action:()=>{
          this.tabController.changeIndex(0)
          this.MytabIndex=0
        },
        status:this.MytabIndex==0?ToolbarItemStatus.ACTIVE:ToolbarItemStatus.NORMAL


      },
      {
        value:"list",
        icon:$rawfile("images/goods.png"),
        activeIcon:$rawfile("images/goods_sel.png"),
        status:this.MytabIndex==1?ToolbarItemStatus.ACTIVE:ToolbarItemStatus.NORMAL,
        action:()=>{
          this.tabController.changeIndex(1)
          this.MytabIndex=1
        }
      },
      {
        value:"my",
        icon:$rawfile("images/user.png"),
        activeIcon:$rawfile("images/user_sel.png"),
        status:this.MytabIndex==2?ToolbarItemStatus.ACTIVE:ToolbarItemStatus.NORMAL,

        action:()=>{
          this.tabController.changeIndex(2)
          this.MytabIndex=2
        }
      }
      ])
    .navDestination(this.pageMap)
  }
}

list页面

@Component
export  struct listpage{
  pathStack:NavPathStack=new NavPathStack()
  build() {
    NavDestination(){
      Column(){
        Text("list")
        Button("回到主页")
          .onClick(()=>{
            // 详情回到首页
            this.pathStack.clear()//清空路由栈 （优先）
            // this.pathStack.popToIndex(-1)  //也可以实现
          })
      }
    }
    .onReady((context)=>{
      // 从上下文中获取pathStack参数，这个数据一定要和第一个的页面的数据对应上
      this.pathStack=context.pathStack
      this.pathStack.getParamByName("list") //可以根据name获取参数
    })

    .title("list")
  }
}

home页面

@Component
export  struct homepage{
  pathStack:NavPathStack=new NavPathStack()
  build() {
    NavDestination(){
      Column(){
        Text("home")
        Button("tolist")
          .onClick(()=>{
            this.pathStack.pushPath({
              name:"list"
            })
          })
      }
    }
    .onReady((context)=>{
      // 从上下文中获取pathStack参数，这个数据一定要和第一个的页面的数据对应上
      this.pathStack=context.pathStack
      this.pathStack.getParamByName("home") //可以根据name获取参数
    })

    .title("主要页面")
  }
}