Flutter for OpenHarmony：Dialog 与 BottomSheet

Dialog 与 BottomSheet --- 弹出式交互

- [一、AlertDialog / SimpleDialog / CupertinoAlertDialog](#一、AlertDialog / SimpleDialog / CupertinoAlertDialog)
- - [1.1 AlertDialog --- 标准确认/警告对话框](#1.1 AlertDialog — 标准确认/警告对话框)
  - [1.2 SimpleDialog --- 选项列表对话框](#1.2 SimpleDialog — 选项列表对话框)
  - [1.3 CupertinoAlertDialog --- iOS 风格弹窗](#1.3 CupertinoAlertDialog — iOS 风格弹窗)
- [二、showModalBottomSheet 与 showBottomSheet 区别](#二、showModalBottomSheet 与 showBottomSheet 区别)
- - [2.1 showModalBottomSheet --- 模态底部抽屉](#2.1 showModalBottomSheet — 模态底部抽屉)
  - [2.2 showBottomSheet --- 非模态持久底部面板](#2.2 showBottomSheet — 非模态持久底部面板)
  - [2.3 对比总结](#2.3 对比总结)
- 三、自定义弹窗与动画控制
- - [3.1 自定义 Dialog](#3.1 自定义 Dialog)
  - [3.2 动画增强](#3.2 动画增强)
  - - [（1）使用 `AnimatedDialog`](#（1）使用 AnimatedDialog)
    - [（2）BottomSheet 自定义动画](#（2）BottomSheet 自定义动画)
- [四、OpenHarmony 权限与模态窗口行为差异](#四、OpenHarmony 权限与模态窗口行为差异)
- - [4.1 权限要求](#4.1 权限要求)
  - [4.2 模态窗口行为差异](#4.2 模态窗口行为差异)
  - - （1）点击外部关闭行为
    - （2）多窗口与分屏模式
    - [（3）智慧屏/TV 适配](#（3）智慧屏/TV 适配)
- 五、总结

在移动应用中，弹出式交互 （如确认提示、选择菜单、操作面板）是引导用户决策、展示临时信息或收集输入的重要手段。Flutter 提供了丰富的内置弹窗组件（AlertDialog、SimpleDialog）和底部抽屉（BottomSheet），支持快速构建符合平台规范的模态体验。

然而，当将 Flutter 应用部署到 OpenHarmony 平台时，开发者必须面对系统权限模型差异 、窗口管理机制不同 以及多设备形态适配等挑战。例如，OpenHarmony 对悬浮窗权限有严格限制，部分设备（如车机、TV）不支持传统弹窗交互，而智慧屏上的模态窗口行为也与手机存在显著差异。

本文将系统解析 Flutter 的 Dialog 与 BottomSheet 体系，对比各类弹窗的适用场景，详解自定义弹窗与动画控制，并重点剖析在 OpenHarmony 平台下的权限要求 与模态窗口行为差异，帮助开发者构建安全、合规、跨设备一致的弹出式交互。

一、AlertDialog / SimpleDialog / CupertinoAlertDialog

1.1 AlertDialog --- 标准确认/警告对话框

适用于需要用户明确确认或取消的操作（如删除、退出）。

dart 复制代码

showDialog(
  context: context,
  builder: (context) => AlertDialog(
    title: const Text('确认删除？'),
    content: const Text('此操作不可恢复。'),
    actions: [
      TextButton(
        onPressed: () => Navigator.pop(context, false),
        child: const Text('取消'),
      ),
      ElevatedButton(
        onPressed: () => Navigator.pop(context, true),
        child: const Text('删除'),
      ),
    ],
  ),
);

✅ 特点：

带标题、内容、操作按钮；
默认居中显示；
背景半透明蒙层（Barrier）；
点击外部不可关闭 （需显式设置 barrierDismissible: true）。

1.2 SimpleDialog --- 选项列表对话框

适用于从多个选项中选择一项（如语言切换、操作菜单）。

dart 复制代码

showDialog(
  context: context,
  builder: (context) => SimpleDialog(
    title: const Text('选择操作'),
    children: [
      SimpleDialogOption(
        onPressed: () => _handleOption('edit'),
        child: const Text('编辑'),
      ),
      SimpleDialogOption(
        onPressed: () => _handleOption('delete'),
        child: const Text('删除'),
      ),
    ],
  ),
);

✅ 特点：

无"确认/取消"按钮组；
每个选项点击后自动关闭；
更轻量，适合纯选择场景。

1.3 CupertinoAlertDialog --- iOS 风格弹窗

在 OpenHarmony 上一般不推荐使用，因其视觉风格与鸿蒙设计语言（HarmonyOS Design）不符。

dart 复制代码

showCupertinoDialog(
  context: context,
  builder: (context) => CupertinoAlertDialog(
    title: Text('Alert'),
    content: Text('Message'),
    actions: [...],
  ),
);

📌 OpenHarmony 建议 ：

统一使用 Material Design 风格 （AlertDialog/SimpleDialog），以符合 OpenHarmony 官方 UI 规范。

二、showModalBottomSheet 与 showBottomSheet 区别

2.1 showModalBottomSheet --- 模态底部抽屉

模态：显示时背景有蒙层，阻止与底层页面交互；
可拖拽关闭：用户可上滑/下滑关闭；
常用场景：分享面板、筛选条件、操作菜单。

dart 复制代码

showModalBottomSheet(
  context: context,
  builder: (context) => Container(
    height: 300,
    child: Column(children: [
      ListTile(title: Text('Option 1')),
      ListTile(title: Text('Option 2')),
    ]),
  ),
);

✅ 关键属性：

isScrollControlled: true：允许内容高度动态变化；
useRootNavigator: true：避免嵌套 Navigator 导致的问题（OpenHarmony 推荐开启）。

2.2 showBottomSheet --- 非模态持久底部面板

非模态：无背景蒙层，用户可同时操作底层页面；
持久存在 ：除非手动调用 close()，否则不会自动关闭；
典型用途：音乐播放器控制栏、地图工具栏。

dart 复制代码

final bottomSheet = Scaffold.of(context).showBottomSheet(
  (context) => Container(height: 80, child: Text('Persistent Panel')),
);

// 手动关闭
bottomSheet.close();

⚠️ 注意：
showBottomSheet 返回 PersistentBottomSheetController，用于后续控制。

2.3 对比总结

特性	`showModalBottomSheet`	`showBottomSheet`
模态	是（有蒙层）	否（无蒙层）
自动关闭	是（拖拽/点击外部）	否（需手动关闭）
返回值	`Future<T?>`（类似 Dialog）	`PersistentBottomSheetController`
适用场景	临时操作、选择	持久工具面板
OpenHarmony 推荐度	⭐⭐⭐⭐⭐	⭐⭐（需谨慎使用）

✅ 最佳实践 ：

90% 的底部交互场景应使用 showModalBottomSheet。

三、自定义弹窗与动画控制

3.1 自定义 Dialog

通过 Dialog 或 Container 构建完全自定义 UI：

dart 复制代码

showDialog(
  context: context,
  barrierColor: Colors.black54,
  builder: (context) => Dialog(
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
    child: SizedBox(
      width: 300,
      child: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('Custom Dialog', style: TextStyle(fontSize: 18)),
            SizedBox(height: 16),
            TextField(decoration: InputDecoration(hintText: 'Input')),
            ElevatedButton(onPressed: () {}, child: Text('Submit')),
          ],
        ),
      ),
    ),
  ),
);

3.2 动画增强

（1）使用 `AnimatedDialog`

结合 ScaleTransition 实现缩放入场：

dart 复制代码

showGeneralDialog(
  context: context,
  pageBuilder: (context, anim1, anim2) => MyCustomDialog(),
  transitionBuilder: (context, anim, secAnim, child) {
    return ScaleTransition(scale: anim, child: child);
  },
  transitionDuration: Duration(milliseconds: 300),
);

（2）BottomSheet 自定义动画

dart 复制代码

showModalBottomSheet(
  shape: RoundedRectangleBorder(topLeft: Radius.circular(20), topRight: Radius.circular(20)),
  constraints: BoxConstraints(maxHeight: MediaQuery.of(context).size.height * 0.7),
  // 默认已有滑入动画，无需额外处理
)

💡 OpenHarmony 提示 ：

避免复杂动画（如粒子效果），低端设备可能掉帧。

四、OpenHarmony 权限与模态窗口行为差异

这是 OpenHarmony 平台适配的核心难点。

4.1 权限要求

OpenHarmony 对悬浮窗（即模态窗口）有严格权限控制：

普通应用 ：默认无法显示系统级悬浮窗；

系统应用 ：需在 module.json5 中声明权限：

json 复制代码

{
  "module": {
    "requestPermissions": [
      { "name": "ohos.permission.SYSTEM_FLOATING_WINDOW" }
    ]
  }
}

🔒 现实情况 ：

第三方 Flutter 应用通常无法获取该权限 。因此，所有 Dialog/BottomSheet 必须运行在应用自身窗口内，而非系统级悬浮窗。

✅ 好消息：

Flutter 的 showDialog / showModalBottomSheet 默认在应用窗口内渲染 ，无需特殊权限，可安全使用。

4.2 模态窗口行为差异

（1）点击外部关闭行为

Android/iOS ：AlertDialog 默认点击外部不关闭；
OpenHarmony ：行为一致，但车机/TV 设备无触控，需提供物理按键关闭方式。

✅ 适配建议：

在非触控设备上，确保弹窗有明确的"关闭"按钮；

监听返回键：

dart 复制代码

WillPopScope(
  onWillPop: () async => false, // 禁用返回键关闭
  child: AlertDialog(...),
)

（2）多窗口与分屏模式

OpenHarmony 支持应用分屏。若主窗口进入后台，弹窗不会自动关闭，可能导致状态不一致。

✅ 解决方案：

监听生命周期，在 AppLifecycleState.paused 时主动关闭弹窗；
使用 WidgetsBindingObserver：

dart 复制代码

@override
void didChangeAppLifecycleState(AppLifecycleState state) {
  if (state == AppLifecycleState.paused) {
    Navigator.of(context).pop(); // 关闭顶层弹窗
  }
}

（3）智慧屏/TV 适配

焦点导航：弹窗按钮需支持方向键聚焦；
尺寸放大：文字和按钮至少 48×48 dp；
避免半透明蒙层：在低亮度环境下可能看不清内容。

dart 复制代码

// TV 优化示例
AlertDialog(
  titlePadding: EdgeInsets.all(24),
  contentPadding: EdgeInsets.all(24),
  actionsPadding: EdgeInsets.symmetric(horizontal: 24, vertical: 16),
  actions: [
    ElevatedButton(
      style: ElevatedButton.styleFrom(
        minimumSize: Size(120, 48), // 增大触摸目标
      ),
      onPressed: () {},
      child: Text('确定'),
    ),
  ],
)

五、总结

在 OpenHarmony 平台上使用 Dialog 与 BottomSheet，开发者需做到：

按场景选择弹窗类型 ：确认用 AlertDialog，选择用 SimpleDialog，面板用 showModalBottomSheet；
优先使用内置组件，避免过度自定义导致兼容性问题；
无需担心悬浮窗权限：Flutter 弹窗运行在应用内，合法合规；
主动适配多设备形态 ：
- 手机：标准交互；
- 车机/TV：增大元素、支持焦点导航；
- 智慧屏：简化动画、强化对比度。

尤其在 OpenHarmony 强调"安全可信"与"全场景体验"的背景下，模态交互的合规性 与跨设备可用性是高质量应用的基石。通过理解平台限制并合理利用 Flutter 的抽象能力，可高效构建既美观又稳健的弹出式 UI。

欢迎加入开源鸿蒙跨平台社区： https://openharmonycrossplatform.csdn.net

Flutter for OpenHarmony：Dialog 与 BottomSheet — 弹出式交互

Dialog 与 BottomSheet --- 弹出式交互

一、AlertDialog / SimpleDialog / CupertinoAlertDialog

1.1 AlertDialog --- 标准确认/警告对话框

1.2 SimpleDialog --- 选项列表对话框

1.3 CupertinoAlertDialog --- iOS 风格弹窗

二、showModalBottomSheet 与 showBottomSheet 区别

2.1 showModalBottomSheet --- 模态底部抽屉

2.2 showBottomSheet --- 非模态持久底部面板

2.3 对比总结

三、自定义弹窗与动画控制

3.1 自定义 Dialog

3.2 动画增强

（1）使用 AnimatedDialog

（2）BottomSheet 自定义动画

四、OpenHarmony 权限与模态窗口行为差异

4.1 权限要求

4.2 模态窗口行为差异

（1）点击外部关闭行为

（2）多窗口与分屏模式

（3）智慧屏/TV 适配

五、总结

（1）使用 `AnimatedDialog`