Flutter:通过滑动关闭对话框

Question

我已经使用对话框创建了此图像查看器，我需要实现滑动以存在(向上或向下拖动)以执行 Navigator.of(context).pop()

这是我需要在其中实现滑动的代码。

showGeneralDialog(
  context: context,
  barrierColor: Colors.grey.shade900
      .withOpacity(0.95), // Background color
  barrierDismissible: false,
  barrierLabel: 'Dialog',
  transitionDuration: Duration(
      milliseconds:
          400), 
  pageBuilder: (_, __, ___) {
    // Makes widget fullscreen
    return SafeArea(
      child: SizedBox.expand(
        child: Column(
          children: <Widget>[
          
          ],
        ),
      ),
    );
  },
);

Answer 1

您可以使用 GestureDetector 将 SafeArea 包装在对话框内，并使用其 onVerticalDragUpdate。

我还用透明的Container包裹了Column以使GestureDetector工作。

showGeneralDialog(
  context: context,
  barrierColor: Colors.grey.shade900
  .withOpacity(0.95), // Background color
  barrierDismissible: false,
  barrierLabel: 'Dialog',
  transitionDuration: Duration(milliseconds: 400),
  pageBuilder: (context, __, ___) {
    // Makes widget fullscreen
    return GestureDetector(
      onVerticalDragUpdate: (details) {
        int sensitivity = 10;
        if (details.delta.dy > sensitivity ||
            details.delta.dy < -sensitivity) {
          Navigator.of(context).pop();
        }
      },
      child: SafeArea(
        child: SizedBox.expand(
          child: Container(
            color: Colors.transparent,
            child: Column(
              children: [],
            ),
          ),
        ),
      ),
    );
  },
);

要实现滑动关闭行为，您可以使用 Dismissible 代替 GestureDetector:

showGeneralDialog(
  context: context,
  barrierColor: Colors.grey.shade900
  .withOpacity(0.95), // Background color
  barrierDismissible: false,
  barrierLabel: 'Dialog',
  transitionDuration: Duration(milliseconds: 400),
  pageBuilder: (context, __, ___) {
    // Makes widget fullscreen
    return Dismissible(
      direction: DismissDirection.vertical,
      onDismissed: (_) {
        Navigator.of(context).pop();
      },
      key: Key("key"),
      child: SafeArea(
        child: SizedBox.expand(
          child: Container(
            color: Colors.transparent,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  color: Colors.white,
                  height: 300,
                )
              ],
            ),
          ),
        ),
      ),
    );
  },
);