文档管理中心

跳转页面如何实现页面级别的透明效果

推荐使用的是Navigation跳转方式,可以将NavDestination设置mode为NavDestinationMode.DIALOG弹窗类型,此时整个NavDestination页面默认透明显示,具体可以参考:页面显示类型中的弹窗类型。示例代码如下:

收起
自动换行
深色代码主题
复制
  1. @Component
  2. export struct TransparentPage {
  3. @Provide('NavPathStack') pageStack: NavPathStack = new NavPathStack();
  4. @Builder
  5. pageMapBuilder(name: string) {
  6. if (name === 'DialogPage') {
  7. DialogPage()
  8. }
  9. }
  10. build() {
  11. Navigation(this.pageStack) {
  12. Button('Push DialogPage')
  13. .margin(20)
  14. .width('80%')
  15. .onClick(() => {
  16. this.pageStack.pushPathByName('DialogPage', '');
  17. })
  18. }
  19. .mode(NavigationMode.Stack)
  20. .title('Main')
  21. .navDestination(this.pageMapBuilder)
  22. }
  23. }
  24. @Component
  25. export struct DialogPage {
  26. @Consume('NavPathStack') pageStack: NavPathStack;
  27. build() {
  28. NavDestination() {
  29. Stack({ alignContent: Alignment.Center }) {
  30. Column() {
  31. Text("Dialog NavDestination")
  32. .fontSize(20)
  33. .margin({ bottom: 100 })
  34. Button("Close")
  35. .onClick(() => {
  36. this.pageStack?.pop() ?? console.warn("Navigation stack is empty");
  37. })
  38. .width('30%')
  39. }
  40. .justifyContent(FlexAlign.Center)
  41. .borderRadius(10)
  42. .height('30%')
  43. .width('80%')
  44. }
  45. .height("100%")
  46. .width('100%')
  47. }
  48. .hideTitleBar(true)
  49. .mode(NavDestinationMode.DIALOG)
  50. }
  51. }