鸿蒙项目篇-22-项目功能结构说明-写子页面和导航页面

目录

项目功能结构【预览】

播放页【预览】

播控中心页【预览】

项目功能结构分析

[官方推荐 navigation 组件实现](#官方推荐 navigation 组件实现)

分析1

分析2

分析3

[Navigation 组件官网实现参考](#Navigation 组件官网实现参考)

代码实现

步骤1、先写子页面(NavDestination)

广告页代码实现

布局页代码实现

步骤2、子页面配置信息(routerMap)

步骤3、写导航页(Navigation)


项目功能结构【预览】

播放页【预览】

播控中心页【预览】

也能控制 音乐 的播放等功能

项目功能结构分析

代码实现 推荐 官方推荐的组件 navigation 组件

分析1

首页放Navigation组件

它有两个子页面,分别为广告页、布局页,分别放 NavDestination组件

Navigation组件的跳转,其实就是跳转到带有 NavDestination组件 的页面

分析2

有了两个子页面,分别为广告页、布局页,

我们要把的页面信息添加到 配置文件

分析3

首页、广告页、布局页 是 3个独立的页面,如何用 Navigation 做整体管理呢?

这3个页面,我们用一个对象进行管理,我们可以称之为 控制跳转的对象。

它包括:你是哪个页面、哪些页面能跳转、如何跳转、跳转方式等等

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-navigation-navigation#%E7%B3%BB%E7%BB%9F%E8%B7%AF%E7%94%B1%E8%A1%A8

代码实现

先子页,再导航页,最后添加配置信息

步骤1、先写子页面(NavDestination)

广告页代码实现

新建 ArkTS File

TypeScript 复制代码
// 跳转页面入口函数
@Builder
export function StartBuilder() {
  Start();//调用 Start 组件
}

@Component
struct Start {
  //控制跳转的对象
  pathStack: NavPathStack = new NavPathStack();

  build() {
    NavDestination() {
    }
    .title('广告页')
    //Navigation组件准备好以后,放入 NavPathStack(控制跳转的对象)
    .onReady((context: NavDestinationContext) => {
      this.pathStack = context.pathStack;
    })
  }
}
布局页代码实现

复制一份广告页代码,相关名称修改即可。

如这里:全局搜索 Start 替换为 Layout 等等

TypeScript 复制代码
// 跳转页面入口函数
@Builder
export function LayoutBuilder() {
  Layout();//调用 Layout 组件
}

@Component
struct Layout {
  //控制跳转的对象
  pathStack: NavPathStack = new NavPathStack();

  build() {
    NavDestination() {
    }
    .title('布局页')
    //Navigation组件准备好以后,放入 NavPathStack(控制跳转的对象)
    .onReady((context: NavDestinationContext) => {
      this.pathStack = context.pathStack;
    })
  }
}

步骤2、子页面配置信息(routerMap)

1、在跳转目标模块的配置文件 module.json5 添加路由表配置:

src/main/module.json5

TypeScript 复制代码
  {
    "module" : {
      "routerMap": "$profile:route_map"
    }
  }

2、添加完路由配置文件地址后,需要在工程resources/base/profile中创建route_map.json文件。添加如下配置信息:

TypeScript 复制代码
{
  "routerMap": [
    {
      "name": "Start",
      "pageSourceFile": "src/main/ets/pages/Start.ets",
      "buildFunction": "StartBuilder",
      "data": {
        "description" : "this is Start"
      }
    },
    {
      "name": "Layout",
      "pageSourceFile": "src/main/ets/pages/Layout.ets",
      "buildFunction": "LayoutBuilder",
      "data": {
        "description" : "this is Layout"
      },
  ]
}
  • 配置说明如下:

    配置项 说明
    name 可自定义的跳转页面名称。
    pageSourceFile 跳转目标页在包内的路径,相对src目录的相对路径。
    buildFunction 跳转目标页的入口函数名称,必须以@Builder修饰。
    data 应用自定义字段。可以通过配置项读取接口getConfigInRouteMap获取。

步骤3、写导航页(Navigation)

TypeScript 复制代码
  @Entry
  @Component
  struct Index {
    pageStack : NavPathStack = new NavPathStack();

    build() {
      Navigation(this.pageStack){
      }.onAppear(() => {
        this.pageStack.pushPathByName("PageOne", null, false);
      })
      .hideNavBar(true)
    }
  }

同一个 Navigation 组件 控制跳转的对象,必须是同一个。

所以我们把 pageStack 都改为 pathStack

TypeScript 复制代码
@Entry
@Component
struct Index {
  pathStack : NavPathStack = new NavPathStack();

  build() {
    Navigation(this.pathStack){
    }.onAppear(() => {
      this.pathStack.pushPathByName("PageOne", null, false);
    })
    .hideNavBar(true)
  }
} 

这个时候 我们 导航页 和 子页,都有 pathStack 对象了,

Navigation 组件 用上了这个 pathStack 对象了

Navigation(this.pageStack)

那就代表 这个对象 控制了 导航页 和 子页

复制代码
onAppear 是Navigation组件要显示的时候调用
//跳转到 Start 广告页(默认跳转的页面)
this.pathStack.pushPathByName("Start", null, false);
//不会把自己放到控制跳转的对象里面
//视觉效果->点返回的时候不会返回到这个导航页(这里导航页即 Index页)
hideNavBar(true)

预览器 不支持 navigation,模拟器支持

pushPathByName 支持返回

TypeScript 复制代码
@Entry
@Component
struct Index {
  pathStack : NavPathStack = new NavPathStack();

  build() {
    Navigation(this.pathStack){
    }.onAppear(() => {
      //跳转到 Start 广告页(默认跳转的页面)
      this.pathStack.pushPathByName("Start", null, false);
    })
    //不会把自己放到控制跳转的对象里面
    //视觉效果->点返回的时候不会返回到这个导航页(这里导航页 即 Index页)
    .hideNavBar(true)
  }
}

注意:千万不要背代码,知道大致流程即可

相关推荐
计算机毕业设计小帅4 小时前
【2026计算机毕业设计】基于Springboot的Android校园周边美食汇系统
android·spring boot·课程设计
每次的天空4 小时前
Android-MVX技术总结
android
Digitally7 小时前
如何备份和恢复安卓设备2025
android
ClassOps8 小时前
腾讯CODING Maven的aar制品添加上传流程
android·java·maven
ClassOps8 小时前
基于腾讯CODING Maven的Android库发布
android·java·maven
路上^_^9 小时前
安卓基础组件024-底部导航栏
android
加菲猫8609 小时前
文件上传简单的绕过总结
android
一直向钱12 小时前
android 自定义Dialog多种方式
android
sun00770013 小时前
OverlayManager service, overlay, idmap, rro, android
android
SmartBrain13 小时前
华为业务流程架构:主干清晰、末端灵活
华为·创业创新