自定义dialog样式时,HarmonyOS 鸿蒙Next dialog弹出后底部存在空白区域

自定义dialog样式时,HarmonyOS 鸿蒙Next dialog弹出后底部存在空白区域

自定义dialog样式的时候,dialog弹出之后,底部总有一个空白区域

2 回复

1、根据window.on("keyboardHeightChange")获取软键盘系统高度

2、在CustomDialog的根组件下通过onAreaChange确认Dialog实际抬升高度

3、两数相减得到具体偏移量

样例代码如下:

import { inputMethod } from '@kit.IMEKit'

import { window } from ‘@kit.ArkUI’

@CustomDialog

struct CustomDialogExample {

  controller?: CustomDialogController

  @State @Watch(‘keyboardHeightChange’) keyboardHeight: number = 0

  @State @Watch(‘keyboardHeightChange’) realKeyboardHeight: number = 0

  @State offsetY: number = 0

  aboutToAppear(): void {

    window.getLastWindow(getContext(this), (err, window) => {

      window.on(“keyboardHeightChange”, (keyboardHeight) => {

        if (keyboardHeight !== 0) {

          this.keyboardHeight = px2vp(keyboardHeight)

        }

      });

    })

  }

  keyboardHeightChange() {

    if (this.keyboardHeight !== 0 && this.realKeyboardHeight !== 0) {

      this.offsetY = this.realKeyboardHeight - this.keyboardHeight

    }

  }

  build() {

    Column() {

      Text(‘content’)

        .fontSize(20)

      TextArea()

        .width(“100%”)

        .height(100)

      Text(‘content’)

        .fontSize(20)

    }

    .width(“100%”)

    .offset({y: this.offsetY})

    .backgroundColor(Color.White)

    .borderRadius({topLeft: 32, topRight: 32})

    .onAreaChange((oldValue: Area, newValue: Area) => {

      if (Number(oldValue.globalPosition.y) > Number(newValue.globalPosition.y)) {

        this.realKeyboardHeight = Number(oldValue.globalPosition.y) - Number(newValue.globalPosition.y)

        console.log("")

      }

    })

  }

}

@Entry

@Component

struct CustomDialogTest {

  @State message: string = ‘Hello World’;

  dialogController: CustomDialogController = new CustomDialogController({

    builder: CustomDialogExample(),

    alignment: DialogAlignment.Bottom,

    customStyle: true

  })

  build() {

    RelativeContainer() {

      Text(this.message)

        .id(‘HelloWorld’)

        .fontSize(50)

        .fontWeight(FontWeight.Bold)

        .alignRules({

          center: { anchor: ‘container’, align: VerticalAlign.Center },

          middle: { anchor: ‘container’, align: HorizontalAlign.Center }

        })

        .onClick(() => {

          this.dialogController.open()

        })

    }

    .height(‘100%’)

    .width(‘100%’)

  }

}

更多关于自定义dialog样式时,HarmonyOS 鸿蒙Next dialog弹出后底部存在空白区域的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


针对自定义dialog样式时,HarmonyOS 鸿蒙Next dialog弹出后底部存在空白区域的问题,以下是一些可能的解决方案:

  1. 检查布局属性

    • 确保弹窗的布局没有超出其应有的范围,检查layout_heightlayout_width属性,避免设置为超出屏幕大小的值。
    • 如果使用的是自定义弹窗,检查其样式和布局文件,确保没有不必要的背景色或边框导致白条出现。
  2. 调整弹窗样式

    • 在自定义弹窗中,将最外层容器的宽度设置为100%,以确保弹窗的宽度占据整个屏幕。
    • 调整弹窗的高度,可能需要覆盖底部导航栏,这通常涉及到对弹窗内容的布局和样式的精细调整。
  3. 全屏模式设置

    • 如果弹窗需要在全屏模式下显示,确保在显示弹窗之前将当前页面设置为全屏模式。
    • 在HarmonyOS中,可以通过设置窗口的布局参数来实现全屏效果。

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

回到顶部