HarmonyOS 鸿蒙Next 自定义弹窗部分问题答疑

发布于 1周前 作者 wuwangju 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 自定义弹窗部分问题答疑 1、使用自定义弹窗时，希望拦截返回键不隐藏
2、自定义弹窗展示怎么遮盖住底部导航条

Harmonyos Next教程
3 回复

现在想要实现防止用户侧滑关闭自定义弹窗的效果需要基于Navigation实现自定义弹窗，然后设置.onBackPressed((): boolean => true)

试试这段代码：

@Entry
@Component
struct CustomDialogUser {
  dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample({
      cancel: () => { this.onCancel() },
      confirm: () => { this.onAccept() },
    }),
    alignment: DialogAlignment.Bottom,
    offset: { dx: -2, dy: 5 },
    gridCount: 4,
    customStyle: false,
    backgroundColor: 0xd9ffffff,
    cornerRadius: 10,
  })

  onCancel() {
    console.info('Callback when the first button is clicked')
  }

  onAccept() {
    console.info('Callback when the second button is clicked')
  }

  build() {
    Column() {
      Button('click me')
        .onClick(() => {
          this.dialogController.open()
        })
    }.width('100%').margin({ top: 5 })
  }
}

@CustomDialog
struct CustomDialogExample {
  cancel?: () => void
  confirm?: () => void
  controller: CustomDialogController

  build() {
    Column() {
      Text('我是内容').fontSize(20).margin({ top: 10, bottom: 10 })
      Flex({ justifyContent: FlexAlign.SpaceAround }) {
        Button('cancel')
          .onClick(() => {
            this.controller.close()
            if (this.cancel) {
              this.cancel()
            }
          }).backgroundColor(0xffffff).fontColor(Color.Black)
        Button('confirm')
          .onClick(() => {
            this.controller.close()
            if (this.confirm) {
              this.confirm()
            }
          }).backgroundColor(0xffffff).fontColor(Color.Red)
      }.margin({ bottom: 10 })
    }.backgroundColor(Color.Red)
  }
}

这是遮盖导航条方案，是通过修改offset和alignment这俩属性的值实现：

@Entry
@Component
struct CustomDialogUser {
  dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample({
      cancel: () => { this.onCancel() },
      confirm: () => { this.onAccept() },
    }),
    alignment: DialogAlignment.Bottom,
    offset: { dx: -2, dy: 5 },
    gridCount: 4,
    customStyle: false,
    backgroundColor: 0xd9ffffff,
    cornerRadius: 10,
  })

  onCancel() {
    console.info('Callback when the first button is clicked')
  }

  onAccept() {
    console.info('Callback when the second button is clicked')
  }

  build() {
    Column() {
      Button('click me')
        .onClick(() => {
          this.dialogController.open()
        })
    }.width('100%').margin({ top: 5 })
  }
}

@CustomDialog
struct CustomDialogExample {
  cancel?: () => void
  confirm?: () => void
  controller: CustomDialogController

  build() {
    Column() {
      Text('我是内容').fontSize(20).margin({ top: 10, bottom: 10 })
      Flex({ justifyContent: FlexAlign.SpaceAround }) {
        Button('cancel')
          .onClick(() => {
            this.controller.close()
            if (this.cancel) {
              this.cancel()
            }
          }).backgroundColor(0xffffff).fontColor(Color.Black)
        Button('confirm')
          .onClick(() => {
            this.controller.close()
            if (this.confirm) {
              this.confirm()
            }
          }).backgroundColor(0xffffff).fontColor(Color.Red)
      }.margin({ bottom: 10 })
    }.backgroundColor(Color.Red)
  }
}

更多关于HarmonyOS 鸿蒙Next 自定义弹窗部分问题答疑的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


1 NavDestinationMode.DIALOG 可以配合onBackPressed可以拦截。

2 盖不住。适配或者直接干掉导航条。干掉可以在dialog 展示的时候。然后dialog在消失的时候在把导航条弄出来，但感觉问题会比较多。

针对帖子标题“HarmonyOS 鸿蒙Next 自定义弹窗部分问题答疑”，以下是对鸿蒙系统中自定义弹窗相关问题的直接回答：

  1. 自定义弹窗布局不生效：

    • 确保自定义布局文件已正确放置在res/layout目录下，并在代码中正确引用。
    • 检查布局文件中使用的组件是否支持在弹窗中使用，部分组件可能在弹窗中有特定的限制。

  2. 弹窗显示位置异常：

    • 自定义弹窗时，可通过设置弹窗的Window属性来调整其显示位置，如使用setGravity方法。
    • 确保未对弹窗进行不必要的偏移设置，避免位置计算错误。

  3. 弹窗背景透明问题：

    • 弹窗背景透明通常与Window的背景设置有关，可尝试设置Window的背景为透明或指定颜色的半透明背景。
    • 检查弹窗内部布局的背景设置，确保未覆盖外部Window的背景设置。

  4. 弹窗动画效果：

    • 自定义弹窗动画可通过设置Window的进出动画资源来实现，确保动画资源文件已正确放置在res/anim目录下，并在代码中正确引用。

  5. 弹窗点击事件不响应：

    • 确保弹窗中的组件已正确设置点击事件监听器。
    • 检查弹窗的焦点和触摸事件是否被其他组件拦截。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html

回到顶部