Flutter向下拖动以弹出ModalRoute页面

Question

嘿，我有这样的应用

我的问题是，该模式路线如何拖动到弹出路线？ 我根据此示例https://stackoverflow.com/a/51908876/10068765

创建的弹出页面

我尝试在颤动示例中使用背景，但是它不起作用，有人可以帮助示例手势检测器弹出此模式路线吗？ 谢谢。

Answer 1

我认为，还有其他解决方案，

您可以按以下方式使用showModelBottomSheet

showModalBottomSheet(
     context: context,
     builder: (BuildContext bc) {
     return Container();
});

根据您的要求设计Container，也许您会找到解决方案。

Answer 2

这使用onVerticalDragStart和onVerticalDragUpdate来确定指针是否在positionDelta时间内移动了timeDelta数量。要触发它，只需快速向下滑动即可。

int initialDragTimeStamp;
int currentDragTimeStamp;
int timeDelta;
double initialPositionY;
double currentPositionY;
double positionYDelta;

void _startVerticalDrag(details) {
  // Timestamp of when drag begins
  initialDragTimeStamp = details.sourceTimeStamp.inMilliseconds;

  // Screen position of pointer when drag begins
  initialPositionY = details.globalPosition.dy;
}

void _whileVerticalDrag(details) {
  // Gets current timestamp and position of the drag event
  currentDragTimeStamp = details.sourceTimeStamp.inMilliseconds;
  currentPositionY = details.globalPosition.dy;

  // How much time has passed since drag began
  timeDelta = currentDragTimeStamp - initialDragTimeStamp;

  // Distance pointer has travelled since drag began
  positionYDelta = currentPositionY - initialPositionY;

  // If pointer has moved more than 50pt in less than 50ms... 
  if (timeDelta < 50 && positionYDelta > 50) {
    // close modal
  }
}

在您的GestureDetector上：

GestureDetector(
  onVerticalDragStart: (details) => _startVerticalDrag(details),
  onVerticalDragUpdate: (details) => _whileVerticalDrag(details)
)

details引用DragUpdateDetails并传递事件信息

请记住，如果模态包含ListView或其他任何会阻止滚动手势的东西，您将要包含something like this以继续接收它们。