HarmonyOS 鸿蒙Next Navigation跳转页面

HarmonyOS 鸿蒙Next Navigation跳转页面

这是Tabs首页页签里的内容，根容器是Navigation，在里面需要跳转到搜索页面并覆盖Tabs，应该如何写代码，求大佬

5 回复

思路：
1、在tabs主页面定义一个高度@State hei:number = 56，tabs的高度设置 .barHeight(this.hei)

2、定义 NavigationTestPage 子页面时，将子页面变量 heiSon 与父页面绑定；

TabContent(){
  NavigationTestPage({heiSon:this.hei})
}.tabBar(this.MainPageTabs(pageInfoList[3]))

3、在子页面定义变量heiSon并使用@Link修饰，点击pushPath按钮（同截图中搜索点击事件），此时tabs组件的tabbar高度设置为0，即可隐藏

@Component
export struct NavigationTestPage {
  pageInfos: NavPathStack = new NavPathStack()
  isUseInterception: boolean = false;
  [@Link](/user/Link) heiSon:number;

  build() {
    Navigation(this.pageInfos) {
      Column() {
        Button('pushPath', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(() => {
            this.pageInfos.pushPath({ name: 'pageOne' }) //将name指定的NavDestination页面信息入栈
            this.heiSon = 0
          })
      }
    }.title('NavIndex')
  }
}

4、在pageOne页面点击返回时，再携带参数回到NavigationTestPage页面，并修改此时tabs组件的tabbar高度设置为预设的高度

Navigation带参返回：需要用到onPop

https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-navigation#示例4navigation带参返回

更多关于HarmonyOS 鸿蒙Next Navigation跳转页面的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


把是否隐藏bar的属性，设置判断条件，点击搜索的时候，把判断条件设置为false

不知这个是不是你需要的

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/ts-basic-components-navigation-V13#hidenavbar9

hideNavBar9+

hideNavBar(value: boolean)

设置是否隐藏导航栏。设置为true时，隐藏Navigation的导航栏，包括标题栏、内容区和工具栏。如果此时路由栈中存在NavDestination页面，则直接显示栈顶NavDestination页面，反之显示空白。

从API Version 9开始到API Version 10仅在双栏模式下生效。从API Version 11开始在单栏、双栏与自适应模式均生效。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名 类型 必填 说明
value boolean 是 是否隐藏导航栏。
默认值：false

我的页签是tabbar，不是navigation的工具栏，navigation写在tabcontent里的，所以每次跳转页面，Tabs都会一直在最上层，

在HarmonyOS（鸿蒙）中，页面跳转通常通过Navigation组件实现。鸿蒙Next版本的Navigation组件支持声明式导航，开发者可以使用NavDestination和NavController来管理页面跳转。

  1. NavDestination：用于定义导航目标页面，每个页面对应一个NavDestination，可以通过navigation属性指定其唯一ID。

  2. NavController：用于控制页面导航，提供navigate()方法进行页面跳转。开发者可以通过NavController的navigate()方法传递目标页面的ID，实现页面跳转。

  3. 导航图（NavGraph）：用于定义页面之间的导航关系，开发者可以在XML中定义导航图，指定页面的跳转路径。

示例代码：

import { NavController, NavDestination } from '@ohos.router';

const navController = new NavController();
const destination = new NavDestination('pageB');

navController.navigate(destination);

在鸿蒙Next中，Navigation组件支持参数传递、动画效果等高级功能，开发者可以根据需求进行配置。

回到顶部