HarmonyOS 如何穿透 NavDestination 透明弹窗,点击到页面内容

通过NavDestination DIALOG模式,实现自定义toast,期望显示toast时,可以点击页面其他内容,有没有最佳实践推荐

1.NavDestination 透明弹窗,如何实现宽高随内容适应

2.如何将NavDestination 弹窗居中

HarmonyOS
2025-01-09 15:08:43
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
put_get

navDestination 宽高自适应内容区域使用 auto

navDestination 位置居中可以使用positon + translate

参考代码如下:

NavDestination(){}
.height('auto')
.width('auto')
.position({left:px2vp(screenWidth/2),top: px2vp(screenHeight/2)}) // 偏移屏幕一半
.translate({x:'-50%',y:'-50%'}) // 修正位置
.mode(NavDestinationMode.DIALOG)

完整代码如下:

import display from '@ohos.display';
import { BusinessError } from '@kit.BasicServicesKit';

let screenWidth = 0;
let screenHeight = 0;

@Entry
@Component
struct Index {
  @Provide('NavPathStack') pageStack: NavPathStack = new NavPathStack()

  aboutToAppear() {
    display.getAllDisplays((err: BusinessError, data: Array<display.Display>) => {
      const errCode: number = err.code;
      screenWidth = data[0].width
      screenHeight = data[0].height
    });
  }

  @Builder
  PagesMap(name: string) {
    if (name == 'DialogPage') {
      DialogPage()
    }
  }

  build() {
    Column() {
      Navigation(this.pageStack) {
        Button('Open DialogPage')
          .margin(20)
          .onClick(() => {
            this.pageStack.pushPathByName('DialogPage', '');
          })

        Button('click')
          .onClick(() => {
            console.log('click btn')
          })
      }
      .mode(NavigationMode.Stack)
      .navDestination(this.PagesMap)
    }
  }
}

@Component
export struct DialogPage {
  @Consume('NavPathStack') pageStack: NavPathStack;

  build() {
    NavDestination() {
      Stack({ alignContent: Alignment.Center }) {
        Column() {
          Text("toast content")
            .fontSize(20)
          Button("Close").onClick(() => {
            this.pageStack.pop()
          }).width('30%')
        }
        .justifyContent(FlexAlign.Center)
        .backgroundColor(Color.White)
        .borderRadius(10)
        .borderWidth(2)
        .width('200')
      }
    }
    .height('auto')
    .width('auto')
    .position({left:px2vp(screenWidth/2),top: px2vp(screenHeight/2)}) // 偏移屏幕一半
    .translate({x:'-50%',y:'-50%'}) // 修正位置
    .mode(NavDestinationMode.DIALOG)
    .hideTitleBar(true)
    .onBackPressed((): boolean => {
      return true;
    })
  }
}
分享
微博
QQ
微信
回复
2025-01-09 17:44:12
相关问题
HarmonyOS web页面点击穿透问题
349浏览 • 1回复 待解决
HarmonyOS 弹窗,可触摸穿透
304浏览 • 1回复 待解决
HarmonyOS ReactNavigation点击事件穿透
246浏览 • 1回复 待解决
HarmonyOS 点击穿透的策略
362浏览 • 1回复 待解决
HarmonyOS 如何设置自定义弹窗透明
378浏览 • 1回复 待解决
HarmonyOS 如何设置Entry页面透明页面
756浏览 • 1回复 待解决
如何设置半透明页面
301浏览 • 1回复 待解决
HarmonyOS 如何设置页面背景半透明
351浏览 • 1回复 待解决
HarmonyOS navdestination页面返回按钮问题
774浏览 • 1回复 待解决
HarmonyOS 如何实现事件穿透
166浏览 • 1回复 待解决
HarmonyOS 如何对page页面设置透明
1070浏览 • 1回复 待解决