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

您可以用SafeAreaa 包裹对话框内部GestureDetector并使用它的onVerticalDragUpdate.

我还用Column透明材料包裹起来Container以完成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: [],
            ),
          ),
        ),
      ),
    );
  },
);

要实现滑动关闭行为，您可以使用 aDismissible代替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,
                )
              ],
            ),
          ),
        ),
      ),
    );
  },
);