HarmonyOS 鸿蒙Next中Navigation + bindContentCover的使用

HarmonyOS 鸿蒙Next中Navigation + bindContentCover的使用 在使用Navigation时

  1. NavDestination A中某一个组件使用bindContentCover展示一个ModalPage
  2. 使用NavPathStack.pushPath新的NavDestination B
    现象: B页面在ModalPage之下
    期望: B页面在ModalPage之上
3 回复

覆盖在page上是所有弹窗类组件的特性,这个特性无法改变;需要通过页面切换自行把模态的true置为false。

如果要用模态框展示详情页,肯定会覆盖根容器的,因为他是类似于添加了一个新的window覆盖在原有页面的window上面。目前已有案例navigation在模态框中进行跳转,覆盖了新页面,解决方案是通过控制模态框的显隐去解决的。

您可以直接使用将详情页作为新页面,这样不会出现模态框层级过高的覆盖现象。

或者使用if实现模态转场,示例demo:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-modal-transition-V5#%E4%BD%BF%E7%94%A8if%E5%AE%9E%E7%8E%B0%E6%A8%A1%E6%80%81%E8%BD%AC%E5%9C%BA

或者使用浮层取代模态框参考代码:

// PageOne.ets

@Component
export struct PageOneTmp {
  @Consume('pageInfos') pageInfos: NavPathStack;
  @State isShowModal:boolean = false
  @State isShowPanel:boolean = false

  @Builder
  getModal(){
    Column(){
      Panel(this.isShowPanel) { // 展示
        Column() {
          Text('弹框内容做跳转')
        }
      }
      .height('100%')
      .type(PanelType.Foldable)
      .mode(PanelMode.Full)
      .dragBar(true) // 默认开启
      .showCloseIcon(false) // 显示关闭图标
      .onChange((width: number, height: number, mode: PanelMode) => {
        console.info(`width:${width},height:${height},mode:${mode}`)
        if(mode<=0){
          this.isShowPanel = false
        }
      })
      .onHeightChange((height)=>{
        if(height<=0){
          this.isShowModal = false
        }
      })
    }.width('100%').height("100%").backgroundColor('red').onClick(()=>{
      this.pageInfos.pushPath({ name: 'pageTwo' })
    })
    .visibility(this.isShowModal?Visibility.Visible:Visibility.None)
  }

  build() {
    NavDestination() {
      Column() {
        Button('pushPathByName', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(() => {
            this.isShowModal = true
            this.isShowPanel = true
          })
      }.width('100%').height('100%')
    }.title('pageOne')
    .overlay(this.getModal(), {
      align: Alignment.Bottom,
    })
    .onBackPressed(() => {
      const popDestinationInfo = this.pageInfos.pop() // 弹出路由栈栈顶元素
      console.log('pop' + '返回值' + JSON.stringify(popDestinationInfo))
      return true
    })
  }
}

更多关于HarmonyOS 鸿蒙Next中Navigation + bindContentCover的使用的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS(鸿蒙Next)中,NavigationbindContentCover 是用于构建页面导航和覆盖层的关键组件。

Navigation 组件用于管理页面之间的导航,支持页面栈的管理和页面切换。通过 Navigation,开发者可以定义页面之间的跳转逻辑,包括前进、后退、替换等操作。Navigation 还支持动态路由配置,允许根据不同的条件加载不同的页面。

bindContentCover 是用于在页面顶部或底部添加覆盖层的功能。它通常用于显示模态对话框、弹出菜单、或临时性的提示信息。通过 bindContentCover,开发者可以灵活控制覆盖层的显示和隐藏,并且可以设置覆盖层的样式、动画效果等。

在实际使用中,NavigationbindContentCover 可以结合使用。例如,在页面跳转时,可以通过 bindContentCover 显示加载提示,或者在某个页面显示模态对话框时,使用 Navigation 进行页面切换。

总结来说,Navigation 负责页面导航管理,而 bindContentCover 用于页面覆盖层的显示和控制,两者结合可以构建复杂的页面交互逻辑。

在HarmonyOS鸿蒙Next中,NavigationbindContentCover结合使用,可以实现页面导航与模态覆盖层的联动效果。Navigation用于管理页面栈,而bindContentCover则用于在页面上方显示一个模态覆盖层。通常,bindContentCover绑定一个布尔值状态变量,控制覆盖层的显示与隐藏。在导航到新页面时,可以通过改变该状态变量来动态显示或隐藏覆盖层,从而实现更灵活的交互。例如,在点击按钮导航到新页面的同时,显示一个加载动画覆盖层,待页面加载完成后再隐藏。

回到顶部