HarmonyOS 鸿蒙Next导航toolbar/tabs-隐藏方案

HarmonyOS 鸿蒙Next导航toolbar/tabs-隐藏方案 旧APP迁移到鸿蒙平台，遇到以下UI的页面结构问题：

以【今日头条】首页为例，底部的tabs在鸿蒙中可以使用

  • navigation的toolbar
  • tabs

两个方案来实现。

但是核心需求是：点击页面条目（例如首页一个文章）进入二级子页面之后，底部的控件应该消失。

发现鸿蒙的实例代码中都无法隐藏tabs，只能用navigation+toolbar来实现吗？

1 回复

更多关于HarmonyOS 鸿蒙Next导航toolbar/tabs-隐藏方案的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS（鸿蒙系统）中，隐藏导航栏（Toolbar/Tabs）可以通过以下方式实现：

  1. 使用Navigation组件：在Navigation组件中，可以通过设置hideNavigationBar属性为true来隐藏导航栏。示例代码：

    Navigation.startAbility({
    bundleName: 'com.example.myapp',
    abilityName: 'MainAbility',
    hideNavigationBar: true
});

  2. 使用Page组件：在Page组件中，可以通过设置navigationBarHidden属性为true来隐藏导航栏。示例代码：

    [@Entry](/user/Entry)
[@Component](/user/Component)
struct MyPage {
    build() {
        Page({
            navigationBarHidden: true
        }) {
            // 页面内容
        }
    }
}

  3. 使用Ability组件：在Ability组件中，可以通过setNavigationBarHidden方法来动态控制导航栏的显示与隐藏。示例代码：

    export default class MainAbility extends Ability {
    onWindowStageCreate(windowStage) {
        windowStage.setNavigationBarHidden(true);
    }
}

这些方法可以在不同的场景下根据需求隐藏导航栏，提供更灵活的页面布局和用户体验。

回到顶部