HarmonyOS鸿蒙Next中CustomDialog自适应/自定义样式问题

HarmonyOS鸿蒙Next中CustomDialog自适应/自定义样式问题 CustomDialog样式大小如何自适应设备

4 回复

【背景知识】

折叠屏相对于普通手机有一个明显的特点：可随时折叠展开、折叠展开会导致屏幕属性改变。HarmonyOS提供了display.on(‘foldStatusChange’)接口开启折叠设备折叠状态变化的监听，具体来说，包括折叠态、展开态、悬停态等。为了适配不同的折叠状态，可以通过设置弹窗offset位置坐标偏移量在不同位置进行弹窗。

【解决方案】

进入页面后，先调用display.isFoldable判断设备是否可折叠、display.getFoldStatus获取当前折叠状态，再设置弹窗offset实现在不同位置进行弹窗，并添加display.on(‘foldStatusChange’)监听折叠状态变化，实时修改弹窗位置。 代码示例如下：

dialogController: CustomDialogController | null = null;
aboutToAppear(): void {
  // 进入页面根据当前折叠状态重置弹窗位置
  this.resetDialog();
  if (display.isFoldable()) { // 判断是否是折叠设备
    let callback: Callback<display.FoldStatus> = (data: display.FoldStatus) => {
      // 切换折叠状态重置弹窗位置
      this.resetDialog();
    };
    // 监听折叠状态变化
    display.on('foldStatusChange', callback);
  }
}
resetDialog() {
  // 重置弹窗位置
  let offsetDx = 0;
  if (display.isFoldable()) { // 判断是否是折叠设备
    let status: display.FoldStatus = display.getFoldStatus(); // 获取当前可折叠设备的折叠状态
    if (status === display.FoldStatus.FOLD_STATUS_EXPANDED) { // 判断是否是折叠态
      let displayClass = display.getDefaultDisplaySync();
      offsetDx = -px2vp(displayClass.width) / 4;
    }
  }
  this.dialogController = new CustomDialogController({
    builder: CustomDialogExample({}),
    onWillDismiss: (dismissDialogAction: DismissDialogAction) => {
      if (dismissDialogAction.reason == DismissReason.PRESS_BACK) {
        dismissDialogAction.dismiss();
      }
      if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) {
        dismissDialogAction.dismiss();
      }
    },
    offset: { dx: offsetDx, dy: 0 }, // 设置offset
    customStyle: true,
  })
}

更多关于HarmonyOS鸿蒙Next中CustomDialog自适应/自定义样式问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


customDialog的customStyle属性，值为true时弹框的样式和大小均需开发者自行控制，若值为false时，弹框会使用系统默认样式， 具体使用可参考接口说明：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-methods-custom-dialog-box

注意：当前openCustomDialog（传参为ComponentContent形式），默认为customStyle=true时的显示效果

在HarmonyOS鸿蒙Next中，CustomDialog的自适应和自定义样式可以通过CustomDialogController和CustomDialogComponent实现。使用@CustomDialog装饰器定义自定义弹窗，通过Component的布局和样式属性进行自定义。自适应布局可使用Flex、Grid等容器组件，结合@State和@Prop实现动态调整。样式可通过@Styles或@Extend进行全局或局部定义，确保在不同设备上适配。

在HarmonyOS Next中，CustomDialog的自适应样式可以通过以下方式实现：

  1. 使用百分比布局： 在xml布局中使用百分比单位(vp/fp)定义宽高，例如：
<DirectionalLayout
    width="80%vp"
    height="50%vp">
  1. 响应式布局： 结合Display的API获取设备尺寸动态设置：
let display = getContext().getDisplay()
let width = display.width * 0.8  // 80%屏幕宽度
let height = display.height * 0.6 // 60%屏幕高度
  1. 自适应内容高度： 使用自适应布局属性：
<DirectionalLayout
    width="match_parent"
    height="wrap_content">
  1. 多设备适配： 在resource目录下定义不同尺寸的样式：
resources/
  ├── base
  ├── small
  ├── medium
  └── large
  1. 自定义样式： 通过setStyle()方法动态修改样式：
dialog.setStyle({
    width: '80%vp',
    height: 'auto',
    backgroundColor: '#ffffff',
    borderRadius: '8vp'
})

建议使用组合式布局容器(Flex/Grid)配合响应式单位(vp/fp)实现最佳自适应效果。

回到顶部