如何制作一个像这样推动另一个屏幕的屏幕？（例如：不和谐的应用程序）答案

【问题标题】：How do I make a screen that pushes another screen like this? (Example: discord app)如何制作一个像这样推动另一个屏幕的屏幕？（例如：不和谐的应用程序）
【发布时间】：2020-12-27 20:55:16
【问题描述】：

我想制作一个可滑动的屏幕。我应该像使用特殊版本的 Navigator.push 一样使用吗？

discord 中的示例链接在这里：

【问题讨论】：

标签： flutter flutter-layout flutter-dependencies

【解决方案1】：

你可以使用这个类做你想做的事，你可以在你的导航代码上使用这个类。这个类不能像你想要的那样工作，但这只是一个例子。

class BouncyPageRoute extends PageRouteBuilder{
  final Widget widget;

 BouncyPageRoute ({this.widget})
  :super(

  transitionDuration: Duration(milliseconds:  850),
  transitionsBuilder: (BuildContext context,
      Animation<double> animation,
      Animation<double> secAnimation,
      Widget child){
    animation = CurvedAnimation(
        parent: animation, curve: Curves.bounceOut
    );
    return ScaleTransition(alignment: Alignment.center,
      scale:animation,
      child: child,
    );
  },

  pageBuilder: (BuildContext context, Animation<double> animation,
      Animation<double> secAnimation){
    return widget;
  }

 );
}

【讨论】：

我以前看过很多这样的动画，但这些动画并没有真正的帮助，因为页面在另一个之上，但对我来说，我需要它来真正地相互交互

【解决方案2】：

它更像是一个带有自定义左侧菜单形状的抽屉，你可以使用它，flutter_inner_drawer

为具有右上角和右下角边框半径的容器设置定位偏移量和左子项。

[更新] 对于 snap 底部导航，您可以通过在切换抽屉时显示 modalBottomSheet 来实现，必要时延迟一秒钟以显示模式，在关闭抽屉时显示 Navigator.pop(context)：

   showModalBottomSheet(
      context: context,
      backgroundColor: Colors.transparent,
      isDismissible: false,
      enableDrag: false,
      builder: (BuildContext builder) {
        return Container(
          height: MediaQuery.of(context).size.height * 0.2,
          child: // your buttons
        );
      },
    );

或者，

创建一个幻灯片容器slide_container，在抽屉打开时显示。

【讨论】：

是的，这有点帮助。谢谢！但是你知道如何在抽屉打开后弹出按钮菜单吗？

【解决方案3】：

您可以使用https://github.com/blackmann/overlapping_panels

但我们的想法是使用Stack 和最顶部的小部件是GestureDetector 来检测拖动并根据拖动偏移量平移下面的小部件。

【讨论】：