模拟iOS全屏对话框

Question

我注意到在iOS 13中，全屏对话框已更改，从底部动画引入了新的幻灯片。 这是一个例子

是否可以用颤动来模仿这种行为？ iOS动画并不是一张简单的幻灯片，它还涉及背景页面。

翻阅文档，我发现this class，但没有任何示例，我无法理解如何使用它，或者它是否是我要搜索的东西。

谢谢

Answer 1

更新：基于@VadimKo的另一个答案，我现在了解到可能还需要堆叠效果。答案链接到了一个软件包modal_bottom_sheet，根据该软件包我更新了示例

如果我对您的问题的理解正确，那么您想显示一个全屏对话框，该对话框从底部向上滑动，并且具有类似于图片中显示的UI。

CupertinoFullscreenDialogTransition实际上只是两个SlideTransition，所以没什么特别的。

通过使用showGeneralDialog

，您可以获得与已发布图像接近的图像

这样，您可以使用pageBuilder和transitionBuilder的组合显示任何内容。它非常灵活，甚至可以用于在当前路线的顶部显示完整路线。

如果您将CupertinoFullscreenDialogTransition用作pageBuilder，则应该可以实现您的目标。不需要提供transitionBuilder，因为它是由pageBuilder隐式执行的。

以下示例尝试通过使用CupertinoApp，CustomScrollView和CupertinoSliverNavigationBar作为对话框的内容来模仿请求的UI

更新：类似于modal_bottom_sheet提供的transitionBuilder可以用来增加堆叠效果。

DartPad示例中的重要代码：

showGeneralDialog(
  barrierDismissible: true,
  barrierLabel: 'Settings',
  barrierColor: Colors.black,
  context: context,
  /// This would be slow but good to understand how transitions are working
  transitionDuration: const Duration(seconds: 1),
  /// Optionally provide the [transitionBuilder] to get the stacking effect 
  /// as of iOS 13
  transitionBuilder: (context, animation, secondaryAnimation, child) {
    /// The following transition widget was inspired from `modal_bottom_sheet` package
    /// Some modifications have been made to remove certain limitations,
    /// See the full DartPad example or take a look at `modal_bottom_sheet`
    return _CupertinoModalTransition(
      animation: animation,
      child: child,
      /// This renders the current widget behind the modal
      /// Notice the use of [this], it is to make sure correct context is used
      behindChild: this.build(this.context),
    );
  },
  pageBuilder: (context, animation, secondaryAnimation) {
    /// This is the simplest use case for [CupertinoFullscreenDialogTransition]
    /// This provides the slide up and slide down transition effects
    return CupertinoFullscreenDialogTransition(
      primaryRouteAnimation: animation,
      secondaryRouteAnimation: secondaryAnimation,
      /// Content of your dialog
      child: Container(),
      linearTransition: true,
    );
  },
);

DartPad完整示例：https://dartpad.dev/57de88ce8d64dff9d3e6fe0627a8b654

更新：DartPad示例的工作方式与modal_bottom_sheet类似，但无需更改现有代码，例如使用{{1}的要求}或将当前/预览路由包装在MaterialWithModalsPageRoute中，两者都是由同一包提供的。

预览：

查看GIF预览：https://i.imgur.com/mZ77M62.gifv

注意：颤振团队已经提供了CupertinoScaffold，但没有提供那么多的灵活性。但是，它可以用于通常不占用全部屏幕空间的普通小对话框弹出窗口。

Answer 2

您始终可以构建自己的窗口小部件，但是在这种情况下，您可以使用现有的程序包：Modal bottom sheet

您还可以在此处查看其他一些现有的抖动问题：enter link description here

Answer 3

你可以使用这个包cupertino_fullscreen_modal

CupertinoFullscreenModal.of(context).showModal(Widget child, onClose (popValue) {});

Answer 4

您也可以尝试另一个已经存在的包Cupertino Stackview

CupertinoStackView(
  true,             //_isPrimary 
  "Page I",         //_navigation
  Scaffold(...),    //_child
  Colors.black,     //_backgroundColor 
 {Key key,
  isDismissible : true,
  radius        : Radius.circular(10.0)})