HarmonyOS鸿蒙Next中如何使得Navigation的split模式右侧始终有个占位页面？

HarmonyOS鸿蒙Next中如何使得Navigation的split模式右侧始终有个占位页面？

Navigation 的 split 模式下如果没有占位,右侧会显示空白,第一次 push 后右侧显示页面,但侧滑后退这个页面并不会退出显示初始空白,而是直接回到桌面。

3 回复

当设备较宽时，Navigation的mode会处于Split模式，即双栏模式。在双栏模式下，右侧如果没有页面，那么会处于空白状态。如果要给右边一个占位页面，那么可以用路由拦截来使得栈中始终有一个页面，并将这个页面添加自己想要的占位内容。

下面创建一个“Page01”页面，显示一行文字“这里什么也没有哦！”来提示用户当前没有内容，示例如下：

@Component
struct Page01 {
  pathStack: NavPathStack | undefined = undefined;

  build() {
    NavDestination() {
      Column() {
        Text(`这里什么也没有哦！`)
      }.width('100%').height('100%').justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)
    }.backgroundColor($r('sys.color.mask_fourth'))
    .hideTitleBar(true)
    // 把动画关闭，不然视觉效果差
    .systemTransition(NavigationSystemTransitionType.NONE)
    .onReady((context: NavDestinationContext) => {
      this.pathStack = context.pathStack;
    })
  }
}

进入页面时，通过setInterception设置路由拦截，如果是要跳转到navBar（主页面），并且处于Split模式，就向栈中push一个占位页面Page01，示例如下：

// 设置路由拦截来保持栈中最底层是显示栈中为空的页面
this.pathStack.setInterception({
  willShow: (from: NavDestinationContext | NavBar, to: NavDestinationContext | NavBar, operation: NavigationOperation, isAnimated: boolean) => {
    console.log(`willShow: from ${JSON.stringify(from)}, to ${JSON.stringify(to)}, operation ${operation}, isAnimated ${isAnimated}.`);
    // 如果是要跳转到navBar，并且处于Split模式
    if (to == 'navBar' && this.navigationMode == NavigationMode.Split) {
      this.pathStack.pushPath({ name: 'Page01' }, (from as NavDestinationContext).pathInfo.name != 'Page01');
    }
  }
})

效果如下：

0030086000697657393.20250514115405.66410767020664074411579272943475.gif

更多关于HarmonyOS鸿蒙Next中如何使得Navigation的split模式右侧始终有个占位页面？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，要使Navigation的split模式右侧始终有个占位页面，可以通过在Navigation组件中设置split属性为true，并在Destination中定义右侧页面。使用NavigationView时，确保在navigation_graph.xml中配置了两个Destination，左侧为主页面，右侧为占位页面。通过这种方式，右侧页面将始终显示在split模式下。

在HarmonyOS Next中，要实现Navigation的split模式下右侧始终显示占位页面，可以通过以下方式解决：

  1. 在Navigation的初始路由配置中添加一个占位页面作为右侧默认视图：
@Entry
@Component
struct MainPage {
  build() {
    Navigation({ mode: NavigationMode.Split }) {
      // 左侧主页面
      LeftPage()
      
      // 右侧占位页面
      PlaceholderPage()
    }
  }
}
  1. 当需要push新页面时，使用Navigation的replace方法替代push：
// 替换右侧页面而不是push
Navigation.replace({ 
  name: 'NewPage',
  params: {...}
})
  1. 对于后退行为，需要监听返回事件并处理：
onBackPress() {
  // 返回时替换回占位页
  Navigation.replace({
    name: 'PlaceholderPage'
  })
  return true // 阻止默认返回行为
}

这样配置后，右侧将始终显示内容（占位页或实际页面），避免出现空白或直接退回桌面的情况。

关键点在于使用replace而非push来更新右侧视图，并确保后退时也回到占位页而非空白状态。

回到顶部