HarmonyOS鸿蒙Next中折叠屏展开状态下，希望弹窗位置出现在左侧

HarmonyOS鸿蒙Next中折叠屏展开状态下，希望弹窗位置出现在左侧

样例代码见官网：https://developer.huawei.com/consumer/cn/doc/best-practices-V5/multi-communication-app-V5，希望弹窗出现在导航页的内容区

3 回复

进入页面后，先调用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中折叠屏展开状态下，希望弹窗位置出现在左侧的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，折叠屏展开状态下，弹窗位置可以通过设置WindowManager.LayoutParams的gravity属性来控制。将gravity设置为Gravity.START或Gravity.LEFT，弹窗将出现在屏幕左侧。具体实现时，需在代码中指定弹窗的布局参数，确保在展开状态下弹窗位置符合预期。

在HarmonyOS Next中，可以通过设置弹窗组件的alignment属性来控制折叠屏展开状态下的弹窗位置。要让弹窗出现在左侧内容区，可以使用以下代码示例：

// 创建弹窗组件
@CustomDialog
struct CustomDialogExample {
  controller: CustomDialogController

  build() {
    Column() {
      Text('左侧弹窗内容')
        .fontSize(20)
        .margin(10)
    }
    .width('40%')
    .height('30%')
    .backgroundColor(Color.White)
    .borderRadius(10)
  }
}

// 调用弹窗时设置对齐方式
@Entry
@Component
struct Index {
  dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample(),
    alignment: DialogAlignment.Start, // 设置为起始对齐(左侧)
    customStyle: true
  })

  build() {
    Column() {
      Button('显示左侧弹窗')
        .onClick(() => {
          this.dialogController.open()
        })
    }
  }
}

关键点说明：

  1. 设置alignment: DialogAlignment.Start使弹窗对齐到容器起始位置(左侧)
  2. 通过width和height控制弹窗尺寸
  3. customStyle: true允许自定义弹窗样式

对于折叠屏设备，系统会自动适配展开状态下的布局，保持弹窗在设置的左侧位置显示。

回到顶部