模仿 iOS 13 全屏对话框答案

【问题标题】：Mimic iOS 13 fullscreen dialog模仿 iOS 13 全屏对话框
【发布时间】：2020-03-16 22:49:09
【问题描述】：

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

是否可以用颤振来模仿这种行为？ iOS动画不是简单的从下往上滑，还涉及到背景页面。

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

谢谢

【问题讨论】：

你检查过stackoverflow.com/questions/59530136/… 吗？

标签： flutter flutter-animation

【解决方案1】：

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

如果我对您的问题的理解正确，您希望显示一个从底部向上滑动的全屏对话框，其 UI 与您图片中显示的类似。

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

您可以使用showGeneralDialog 实现接近发布的图像的效果

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

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

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

更新：一个类似于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 一样工作，但无需对现有代码进行任何更改，例如要求使用MaterialWithModalsPageRoute 或包装CupertinoScaffold 中的当前/预览路由都由同一个包提供。

预览：

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

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

【讨论】：

【解决方案2】：

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

您还可以在此处查看更多现有的颤振问题：enter link description here

【讨论】：

【解决方案3】：

你可以使用这个包cupertino_fullscreen_modal

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

【讨论】：

【解决方案4】：

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

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

【讨论】：