Flutter 向任何方向滑动以重新加载当前屏幕答案

【问题标题】：Flutter Swipe in Any Direction to Reload Current ScreenFlutter 向任何方向滑动以重新加载当前屏幕
【发布时间】：2021-01-11 01:50:37
【问题描述】：

我希望用户能够通过向任何方向滑动来重新加载当前屏幕。现在，我尝试使用我能找到的几乎所有手势检测小部件来实现这一点，但我认为它们有点不可靠。

例如，使用内置的 GestureDetector 或使用它的 pub 包，滑动手势注册可能有 10 次中的 7 次。如果我有一个在滑动时注册的打印功能，在控制台中我会看到“查看端口操作方向”，但打印“滑动”了 10 次中的 7 次。

所以我的问题是，如何在每次注册滑动的地方进行设置？我正在考虑不屑一顾或浏览量小部件的滑动响应能力。有任何想法吗？提前致谢！


class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
  }

   void _onVerticalSwipe(SwipeDirection direction) {
     setState(() {
       if (direction == SwipeDirection.up) {
         //print('Swiped up!');
         Navigator.push(
             context,
             PageTransition(
                 type: PageTransitionType.downToUp, child: MyHomePage()));
       } else {
        // print('Swiped down!');
         Navigator.push(
             context,
             PageTransition(
                 type: PageTransitionType.upToDown, child: MyHomePage()));
       }
     });
   }

   void _onHorizontalSwipe(SwipeDirection direction) {
     setState(() {
       if (direction == SwipeDirection.left) {
        // print('Swiped left!');
         Navigator.push(
             context,
             PageTransition(
                 type: PageTransitionType.rightToLeft, child: MyHomePage()));
       } else {
        // print('Swiped right!');
         Navigator.push(
             context,
             PageTransition(
                 type: PageTransitionType.leftToRight, child: MyHomePage()));
       }
     });
   }

  Widget build(BuildContext context) {
    return SimpleGestureDetector(
      onVerticalSwipe: _onVerticalSwipe,
      onHorizontalSwipe: _onHorizontalSwipe,
      child: Scaffold(
        body: Padding(
          padding: const EdgeInsets.all(30.0),
          child: Center(
            child: Column(
              children: <Widget>[
                Expanded(child: FittedBox(child: Text('Text'))),
                Expanded(child: FittedBox(child: Text('Image'))),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

【问题讨论】：

您是否将Scaffold 包裹在GestureDetector 中？如果不是GestureDetector 的命中框，则仅包含 Scaffold 内的任何内容，而不是整个屏幕本身。另一件需要注意的事情是确保你的脚手架是不透明的。如果它是透明的，无论出于何种原因，它都不会注册手势，因为你从技术上来说什么都没有滑动。
如果这没有帮助，请尝试分享一些代码，我很难在不知道有什么问题的情况下提供帮助哈哈。
您好安东尼，非常感谢您的回复。是的，我试过用脚手架包裹起来。我为您发布了代码。它使用 'package:page_transition/page_transition.dart' 进行过渡动画，使用 'package:simple_gesture_detector/simple_gesture_detector.dart' 进行滑动检测。
我玩过转场插件中的动画速度等设置，也玩过简单手势检测器中的阈值级别。没有配置可以完善滑动。提前感谢您的帮助！

标签： flutter dart

【解决方案1】：

我通过调整我在网上找到的一些信息来回答我自己的问题。以下是提供响应和可靠的 4 方式刷卡动作！（注意：我正在使用页面转换包进行转换动画。）

var initial_x;
var distance_x;

var initial_y;
var distance_y;

GestureDetector(
      onPanStart: (DragStartDetails details) {
        initial_x = details.globalPosition.dx;
        initial_y = details.globalPosition.dy;
      },
      onPanUpdate: (DragUpdateDetails details) {
        distance_x = details.globalPosition.dx - initial_x;
        distance_y = details.globalPosition.dy - initial_y;
      },
      onPanEnd: (DragEndDetails details) {
       
        initial_x = 0.0;
        initial_y = 0.0;

        var x_abs = distance_x.abs();
        var y_abs = distance_y.abs();

        if (x_abs > y_abs) {
          if (distance_x > 20) {
            Navigator.pushReplacement(
                context,
                PageTransition(
                    type: PageTransitionType.leftToRight, child: MainSwiper()));
          }
          if (distance_x < -20) {
            Navigator.pushReplacement(
                context,
                PageTransition(
                    type: PageTransitionType.rightToLeft, child: MainSwiper()));
          }
        } else if (y_abs > x_abs) {
          if (distance_y > 20) {
            Navigator.pushReplacement(
                context,
                PageTransition(
                    type: PageTransitionType.upToDown, child: MainSwiper()));
          }
          if (distance_y < -20) {
            Navigator.pushReplacement(
                context,
                PageTransition(
                    type: PageTransitionType.downToUp, child: MainSwiper()));
          }
        }
      },
      child: Scaffold(

【讨论】：