HarmonyOS鸿蒙Next中Tabs里内容页面跳转到登录页面，如何让导航栏消失

HarmonyOS鸿蒙Next中Tabs里内容页面跳转到登录页面，如何让导航栏消失 this.pageStack.replacePath({ name: 'LoginPage' })跳转

Tabs里内容页面跳转到登录页面，如何让导航栏消失：

build() {
    Tabs({
      barPosition:BarPosition.End,
      controller: this.tabsController
    }) {
      TabContent() {
        LocationSelectionPage()
      }
      .tabBar(this.tabBarBuilder(MenuList[0]))

      TabContent() {
        PopularRecommendPage()
      }
      .tabBar(this.tabBarBuilder(MenuList[1]))

      TabContent() {
        TravelAssistantPage()
      }
      .tabBar(this.tabBarBuilder(MenuList[2]))
    }
    .scrollable(false)
    .barHeight(73.5)
    .height('100%')
    .width('100%')
  }

build() {
    Navigation(this.pageStack) {
      RelativeContainer() {
        this.MyInfo()
        this.MyLogin()
      }
      .width(StyleConstants.FULL_WIDTH)
      .height(StyleConstants.FULL_HEIGHT)
    }
    .mode(NavigationMode.Stack)
    .backgroundColor('#F1F3F5')
    .hideTitleBar(true)
  }


    @Builder
  MyInfo() {
    Column() {
      Column() {
        Image($r('app.media.ic_user_portrait'))
          .width('80vp')
          .width('80vp')

        Text(this.isLogin ? '用户' : '游客')
          .fontSize(15)
          .margin({ top: '15vp' })
      }
      .onClick(() => {
        this.pageStack.replacePath({ name: 'LoginPage' })
      })
      .alignItems(HorizontalAlign.Center)
      .justifyContent(FlexAlign.Center)
      .width(StyleConstants.FULL_WIDTH)
      .height('150vp')

      Divider().width("90%").height(1).backgroundColor("#e6e6e8")

      this.settingRowWithDetail('关于软件')

      Divider().width("90%").height(1).backgroundColor("#e6e6e8")

      this.settingRowWithDetail('账号设置')

    }
    .width('80%')
    .margin({ top: '100vp' })
    .backgroundColor(Color.White)
    .borderRadius($r('sys.float.account_list_corner_radius'))
    .alignRules({
      middle: { anchor: StyleConstants.PARENT, align: HorizontalAlign.Center },
    })
  }

更多关于HarmonyOS鸿蒙Next中Tabs里内容页面跳转到登录页面，如何让导航栏消失的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

小伙伴你好，直接动态设置 Tabs 的 barHeight 属性为 0 能实现。

示例代码：

Tabs({
      barPosition:BarPosition.End,
      controller: this.tabsController
    }) {
      TabContent() {
        LocationSelectionPage()
      }
      .tabBar(this.tabBarBuilder(MenuList[0]))

      TabContent() {
        PopularRecommendPage()
      }
      .tabBar(this.tabBarBuilder(MenuList[1]))

      TabContent() {
        TravelAssistantPage()
      }
      .tabBar(this.tabBarBuilder(MenuList[2]))
    }
    .scrollable(false)
    .barHeight(0) // 这里设置成一个变量实现动态的显示隐藏
    .height('100%')
    .width('100%')

更多关于HarmonyOS鸿蒙Next中Tabs里内容页面跳转到登录页面，如何让导航栏消失的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


好的，已经解决了，

Tabs里内容页面跳转，都处理成在 Tab 页跳转就行了。

在HarmonyOS Next中，Tabs内页面跳转时隐藏导航栏，可在目标页面（如登录页）的aboutToAppear生命周期内调用windowClass的setWindowSystemBarEnable方法。具体代码示例如下：

import { window } from '@kit.ArkUI';

aboutToAppear() {
  window.getLastWindow(this.context).then(win => {
    win.setWindowSystemBarEnable(['status', 'navigation'], false);
  });
}

返回时需在aboutToDisappear中恢复显示。

在HarmonyOS Next中，从Tabs内容页面跳转到登录页面时隐藏导航栏，可以通过以下几种方式实现：

1. 使用页面路由隐藏导航栏

在跳转时通过路由参数控制导航栏显示状态：

// 在Tabs内容页面中跳转
this.pageStack.replacePath({ 
  name: 'LoginPage',
  param: { hideNavBar: true }  // 传递参数
})

2. 在目标页面控制导航栏

在LoginPage页面中根据参数隐藏导航栏：

// LoginPage.ets
@Entry
@Component
struct LoginPage {
  @State hideNavBar: boolean = false
  
  aboutToAppear() {
    // 从路由参数获取是否隐藏导航栏
    const params = router.getParams() as Record<string, boolean>
    this.hideNavBar = params?.hideNavBar || false
  }
  
  build() {
    Navigation(this.pageStack) {
      // 页面内容
    }
    .hideTitleBar(this.hideNavBar)  // 根据参数控制标题栏
    .hideNavBar(this.hideNavBar)    // 隐藏整个导航栏
  }
}

3. 使用全局状态管理

通过AppStorage或自定义状态管理控制导航栏：

// 定义全局状态
AppStorage.setOrCreate('showNavBar', true)

// 跳转前设置状态
AppStorage.set('showNavBar', false)
this.pageStack.replacePath({ name: 'LoginPage' })

// 在Tabs页面监听状态变化
@StorageLink('showNavBar') showNavBar: boolean = true

build() {
  Tabs() {
    // Tab内容
  }
  .showNavBar(this.showNavBar)  // 绑定状态
}

4. 使用自定义导航栈

创建独立的导航栈管理登录流程：

// 创建独立的登录导航栈
private loginStack: NavigationStack = new NavigationStack()

// 跳转到登录页面
showLoginPage() {
  this.loginStack.pushPath({ name: 'LoginPage' })
  // 可以在这里隐藏主Tabs的导航栏
}

// 登录完成后返回
backToMain() {
  this.loginStack.pop()
  // 恢复主Tabs导航栏
}

推荐方案

对于你的场景，建议使用方案1或方案2，通过路由参数控制最为直接。在跳转时传递hideNavBar参数，在目标页面根据该参数动态设置导航栏的可见性。

关键点：

  • 使用hideTitleBar(true)隐藏标题栏
  • 使用hideNavBar(true)隐藏整个导航栏组件
  • 确保登录页面有独立的返回逻辑，避免用户无法返回

这样既能保持Tabs页面的导航栏状态，又能在登录页面获得全屏体验。

回到顶部