HarmonyOS 鸿蒙Next中Navigation + bindContentCover的使用
HarmonyOS 鸿蒙Next中Navigation + bindContentCover的使用 在使用Navigation时
- NavDestination A中某一个组件使用bindContentCover展示一个ModalPage
- 使用NavPathStack.pushPath新的NavDestination B
现象: B页面在ModalPage之下
期望: B页面在ModalPage之上
覆盖在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)中,Navigation 和 bindContentCover 是用于构建页面导航和覆盖层的关键组件。
Navigation 组件用于管理页面之间的导航,支持页面栈的管理和页面切换。通过 Navigation,开发者可以定义页面之间的跳转逻辑,包括前进、后退、替换等操作。Navigation 还支持动态路由配置,允许根据不同的条件加载不同的页面。
bindContentCover 是用于在页面顶部或底部添加覆盖层的功能。它通常用于显示模态对话框、弹出菜单、或临时性的提示信息。通过 bindContentCover,开发者可以灵活控制覆盖层的显示和隐藏,并且可以设置覆盖层的样式、动画效果等。
在实际使用中,Navigation 和 bindContentCover 可以结合使用。例如,在页面跳转时,可以通过 bindContentCover 显示加载提示,或者在某个页面显示模态对话框时,使用 Navigation 进行页面切换。
总结来说,Navigation 负责页面导航管理,而 bindContentCover 用于页面覆盖层的显示和控制,两者结合可以构建复杂的页面交互逻辑。
在HarmonyOS鸿蒙Next中,Navigation与bindContentCover结合使用,可以实现页面导航与模态覆盖层的联动效果。Navigation用于管理页面栈,而bindContentCover则用于在页面上方显示一个模态覆盖层。通常,bindContentCover绑定一个布尔值状态变量,控制覆盖层的显示与隐藏。在导航到新页面时,可以通过改变该状态变量来动态显示或隐藏覆盖层,从而实现更灵活的交互。例如,在点击按钮导航到新页面的同时,显示一个加载动画覆盖层,待页面加载完成后再隐藏。

