使用sheet包实现Cupertino BottomSheet时，背景缩小动画无法实现

你的问题出在页面层级的错误嵌套上——Material+Scaffold包裹CupertinoPageScaffold的结构会干扰Cupertino组件的默认动画逻辑，导致背景屏幕的缩小动画无法触发。

修复方案：调整页面层级结构 #

移除不必要的Material脚手架，确保Cupertino组件在正确的上下文环境中运行：

方案1：纯Cupertino环境（推荐）

直接用CupertinoApp作为根组件，内部使用CupertinoPageScaffold：

CupertinoApp(
  home: CupertinoPageScaffold(
    child: Center(
      child: CupertinoButton(
        child: const Text('弹出BottomSheet'),
        onPressed: () {
          showCupertinoModalPopup(
            context: context,
            builder: (context) => CupertinoActionSheet(
              title: const Text('操作菜单'),
              actions: [
                CupertinoActionSheetAction(
                  onPressed: () => Navigator.pop(context),
                  child: const Text('选项1'),
                ),
              ],
            ),
          );
        },
      ),
    ),
  ),
)

方案2：混合Material环境

如果必须使用MaterialApp，用CupertinoTheme包裹CupertinoPageScaffold，避免嵌套Scaffold：

MaterialApp(
  home: CupertinoTheme(
    data: const CupertinoThemeData(),
    child: CupertinoPageScaffold(
      child: Center(
        child: CupertinoButton(
          child: const Text('弹出BottomSheet'),
          onPressed: () {
            showCupertinoModalPopup(
              context: context,
              builder: (context) => CupertinoActionSheet(
                title: const Text('操作菜单'),
                actions: [
                  CupertinoActionSheetAction(
                    onPressed: () => Navigator.pop(context),
                    child: const Text('选项1'),
                  ),
                ],
              ),
            );
          },
        ),
      ),
    ),
  ),
)

关键说明 #

Cupertino组件的动画（包括背景缩小）依赖专属的上下文环境，Scaffold（Material风格）会覆盖路由的默认动画配置，导致Cupertino BottomSheet的背景缩放效果失效。确保CupertinoPageScaffold直接处于CupertinoApp或CupertinoTheme的层级下，不要嵌套Material的Scaffold。

内容的提问来源于stack exchange，提问作者crookedsys