模仿 iOS 13 全屏对话框

Question

我注意到 iOS13 全屏对话框发生了变化，从底部动画引入了新的幻灯片。这是一个例子

是否可以用 flutter 模仿这种行为？ iOS动画不是简单的从底部滑动，还涉及到背景页。

通过查看 flutter 文档，我发现 this class 但是，没有任何示例，我无法理解如何使用它或者它是否是我正在搜索的内容。

谢谢

Answer 1

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

如果我没理解你的问题，你想要显示一个从底部向上滑动的全屏对话框，并且 UI 类似于你图片中显示的那个。

CupertinoFullscreenDialogTransition 其实就是两个 SlideTransition 叠起来所以没什么特别的。

您可以通过使用 showGeneralDialog

获得与发布的图像接近的效果

在那里，您可以使用 pageBuilder 和 transitionBuilder 的组合来显示任何内容。它非常灵活，甚至可以用来在当前路线之上显示完整路线。

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

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

更新: 一个transitionBuilder类似modal_bottom_sheet提供的可以用来添加叠加效果

来自 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 相同，但 无需对现有代码进行任何更改 例如使用 MaterialWithModalsPageRoute 或在 CupertinoScaffold 中包装 current/preview 路由的要求，这两者都由同一个包提供。

预览：

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

注意：flutter 团队已经提供了 showCupertinoDialog，但它没有提供足够的灵活性。但是，它可以用于通常不会全屏显示的普通小对话框弹出窗口 space.

Answer 2

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

您还可以在此处查看更多现有的 flutter 问题：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)})

模仿 iOS 13 全屏对话框

Mimic iOS 13 fullscreen dialog

flutter

flutter-animation