1. 核心需求复述

你在鸿蒙 6 开发多设备文博类应用的弹框交互时，面临三大核心适配问题：轻量级穿戴圆形屏的文物详情弹框出现文字 / 按钮裁剪、按钮点击区域偏移；平板横竖屏切换后原生 AlertDialog 弹框按钮布局错位，且遮罩层级覆盖系统状态栏；页面跳转过程中触发弹框偶发导致应用崩溃（ArkTS 提示 “组件未挂载完成无法创建弹框”），需要统一多设备弹框适配逻辑，解决这些问题并保证交互稳定性。

2. 完整解决方案（可直接复用）

核心优化思路

• 穿戴圆形屏：放弃原生 AlertDialog，自定义适配圆形可视区的弹框，按钮点击区域基于布局树而非固定坐标；
• 平板横竖屏：自定义弹框布局（弹性布局替代固定布局），手动控制遮罩层级避免覆盖状态栏；
• 弹框触发时机：增加组件挂载状态校验，弹框请求队列化，仅当组件完全挂载后触发。

步骤 1：自定义多设备适配弹框组件（核心）

import { deviceInfo } from '@ohos.device';

// 自定义弹框组件（适配圆形屏/横竖屏）
@Component
export struct MuseumDialog {
  // 弹框配置参数
  @Link isShow: boolean; // 控制弹框显示/隐藏
  title: string = '';
  content: string = '';
  confirmText: string = '确认';
  cancelText: string = '取消';
  onConfirm: () => void = () => {};
  onCancel: () => void = () => {};

  // 设备类型/屏幕参数
  private isWearable: boolean = false;
  private isLandscape: boolean = false;
  private circleRadius: number = 0; // 穿戴圆形屏可视半径

  async aboutToAppear() {
    // 1. 判断设备类型（穿戴/平板/手机）
    const deviceType = await deviceInfo.getDeviceType();
    this.isWearable = deviceType === 'liteWearable';
    
    // 2. 获取穿戴圆形屏可视半径（46mm表盘可视半径约180vp）
    if (this.isWearable) {
      const screenSize = await deviceInfo.getScreenSize();
      this.circleRadius = Math.min(screenSize.width, screenSize.height) / 2 * 0.9; // 留10%边距
    }

    // 3. 监听平板横竖屏状态
    const orientation = await deviceInfo.getScreenOrientation();
    this.isLandscape = orientation === deviceInfo.Orientation.LANDSCAPE;
    deviceInfo.on('orientationChange', (newOrientation) => {
      this.isLandscape = newOrientation === deviceInfo.Orientation.LANDSCAPE;
    });
  }

  build() {
    if (!this.isShow) return;

    // 弹框遮罩（控制层级：穿戴/平板差异化）
    Stack({ alignContent: Alignment.Center }) {
      // 遮罩层：穿戴屏全覆盖，平板避开状态栏（48vp）
      Column()
        .width('100%')
        .height(this.isWearable ? '100%' : '100% - 48vp') // 避开状态栏
        .backgroundColor('rgba(0,0,0,0.5)')
        .zIndex(999); // 低于状态栏层级（1000）

      // 弹框主体（适配圆形屏/横竖屏）
      Column()
        .width(this.getDialogWidth())
        .height(this.getDialogHeight())
        .backgroundColor(Color.White)
        .borderRadius(this.getBorderRadius())
        .padding(this.getPadding())
        .zIndex(1000)
        .clip(true) // 穿戴屏裁剪为圆形
        .justifyContent(FlexAlign.Center)
        .alignItems(Alignment.Center)
      {
        // 弹框标题
        Text(this.title)
          .fontSize(this.isWearable ? 18 : 22)
          .fontWeight(FontWeight.Bold)
          .margin({ bottom: this.isWearable ? 8 : 12 });

        // 弹框内容（穿戴屏自动换行，避免截断）
        Text(this.content)
          .fontSize(this.isWearable ? 14 : 16)
          .maxLines(this.isWearable ? 3 : 5)
          .textAlign(TextAlign.Center)
          .margin({ bottom: this.isWearable ? 10 : 16 });

        // 按钮区域（适配横竖屏/圆形屏）
        Flex({
          direction: this.isLandscape && !this.isWearable ? FlexDirection.Row : FlexDirection.Column,
          justifyContent: FlexAlign.SpaceAround,
          alignItems: Alignment.Center,
          width: '100%'
        }) {
          Button(this.cancelText)
            .width(this.getButtonWidth())
            .height(this.isWearable ? 32 : 40)
            .fontSize(this.isWearable ? 12 : 14)
            .backgroundColor(Color.Grey)
            .onClick(() => {
              this.onCancel();
              this.isShow = false;
            });

          Button(this.confirmText)
            .width(this.getButtonWidth())
            .height(this.isWearable ? 32 : 40)
            .fontSize(this.isWearable ? 12 : 14)
            .backgroundColor(Color.Blue)
            .margin({ top: this.isWearable ? 6 : (this.isLandscape ? 0 : 8) })
            .onClick(() => {
              this.onConfirm();
              this.isShow = false;
            });
        }
      }
    }
    .width('100%')
    .height('100%')
    .position({ top: 0, left: 0 });
  }

  // 适配弹框宽度（差异化）
  private getDialogWidth(): string | number {
    if (this.isWearable) return this.circleRadius * 2; // 穿戴屏圆形宽度
    return this.isLandscape ? '60%' : '80%'; // 平板/手机横竖屏
  }

  // 适配弹框高度
  private getDialogHeight(): string {
    return this.isWearable ? 'auto' : (this.isLandscape ? '50%' : 'auto');
  }

  // 适配圆角（穿戴屏圆形，平板/手机圆角）
  private getBorderRadius(): number {
    return this.isWearable ? this.circleRadius : 16;
  }

  // 适配内边距
  private getPadding(): number {
    return this.isWearable ? 12 : 20;
  }

  // 适配按钮宽度
  private getButtonWidth(): string {
    if (this.isWearable) return '40%'; // 穿戴屏按钮占40%宽度
    return this.isLandscape ? '40%' : '80%'; // 平板/手机横竖屏
  }
}

步骤 2：弹框触发工具类（校验组件挂载状态，避免崩溃）

// 弹框触发工具类（控制触发时机）
export class DialogTriggerUtil {
  private static instance: DialogTriggerUtil;
  private dialogQueue: Array<() => void> = []; // 弹框请求队列
  private isComponentMounted: boolean = false; // 组件挂载状态

  // 单例模式
  public static getInstance() {
    if (!this.instance) this.instance = new DialogTriggerUtil();
    return this.instance;
  }

  // 标记组件挂载状态
  setComponentMounted(status: boolean) {
    this.isComponentMounted = status;
    // 组件挂载完成后，执行队列中的弹框请求
    if (status && this.dialogQueue.length > 0) {
      this.dialogQueue.forEach((task) => task());
      this.dialogQueue = []; // 清空队列
    }
  }

  // 安全触发弹框（校验挂载状态）
  safeShowDialog(showDialogFunc: () => void) {
    if (this.isComponentMounted) {
      // 组件已挂载，立即触发
      showDialogFunc();
    } else {
      // 组件未挂载，加入队列
      this.dialogQueue.push(showDialogFunc);
      // 超时兜底：5秒后清空未执行的队列（避免内存泄漏）
      setTimeout(() => {
        this.dialogQueue = this.dialogQueue.filter(task => task !== showDialogFunc);
      }, 5000);
    }
  }

  // 页面销毁时清空队列
  clearDialogQueue() {
    this.dialogQueue = [];
    this.isComponentMounted = false;
  }
}

步骤 3：页面中集成使用（完整示例）

@Entry
@Component
struct MuseumDetailPage {
  @State showDialog: boolean = false;
  private dialogTrigger = DialogTriggerUtil.getInstance();

  aboutToAppear() {
    // 延迟500ms确认组件挂载完成（兜底）
    setTimeout(() => {
      this.dialogTrigger.setComponentMounted(true);
    }, 500);
  }

  aboutToDisappear() {
    // 页面销毁时清空弹框队列
    this.dialogTrigger.clearDialogQueue();
  }

  build() {
    Column() {
      // 触发弹框按钮（模拟页面跳转后触发）
      Button('展示文物详情弹框')
        .onClick(() => {
          // 安全触发弹框（避免组件未挂载崩溃）
          this.dialogTrigger.safeShowDialog(() => {
            this.showDialog = true;
          });
        });

      // 集成自定义多设备弹框
      MuseumDialog({
        isShow: $showDialog,
        title: '青铜鼎详情',
        content: '这件青铜鼎为商代晚期文物，通高83厘米，口径72厘米，现收藏于故宫博物院。',
        confirmText: '查看3D模型',
        cancelText: '关闭',
        onConfirm: () => {
          console.log('点击查看3D模型');
          // 跳转到3D详情页逻辑
        },
        onCancel: () => {
          console.log('点击关闭弹框');
        }
      });
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center);
  }
}

关键优化点解释

1. 穿戴圆形屏适配：
   • 弹框主体按圆形屏可视半径设置尺寸，clip(true)裁剪为圆形，避免内容超出可视区；
   • 文字限制最大行数、自动换行，按钮按比例设置宽度，点击区域基于布局树（而非固定坐标），解决截断和点击偏移；
2. 平板横竖屏适配：
   • 监听屏幕方向变化，按钮区域在横屏时横向排列、竖屏时纵向排列，避免挤成一行；
   • 遮罩层高度设为100% - 48vp，避开系统状态栏（层级 1000），解决遮罩覆盖状态栏问题；
3. 弹框触发时机：
   • DialogTriggerUtil校验组件挂载状态，未挂载时将弹框请求加入队列，挂载完成后执行；
   • 页面销毁时清空队列，避免内存泄漏；延迟 500ms 标记挂载完成，兜底解决 “组件未挂载” 崩溃；

3. 总结

1. 圆形屏适配：放弃原生 AlertDialog，自定义弹框按圆形可视区裁剪，文字 / 按钮按比例适配，避免截断和点击偏移；
2. 横竖屏适配：监听屏幕方向，按钮区域弹性布局（横屏行、竖屏列），控制遮罩层级避开状态栏；
3. 触发时机：通过队列化弹框请求 + 组件挂载状态校验，避免页面跳转过程中触发弹框导致的崩溃；
4. 核心避坑：穿戴屏弹框需基于可视半径设置尺寸，平板遮罩层要避开状态栏高度，弹框触发必须等待组件完全挂载。