从左滑动返回之前风格的 iOS 屏幕 Flutter答案

【问题标题】：swipe from the left to return to the previous style iOS screen Flutter从左滑动返回之前风格的 iOS 屏幕 Flutter
【发布时间】：2021-05-06 09:10:11
【问题描述】：

在 ios 中，如果我从屏幕左侧开始滑动并朝中心下降，它会从视图中返回。现在我想将 Flutter 中的相同内容复制到我的应用程序中，因为我有左上角的按钮可以返回经典，但我也希望拥有 ios 样式，即使从左侧滑动也可以返回。我该怎么办？

【问题讨论】：

标签： ios flutter controller swipe

【解决方案1】：

查看我使用手势检测器创建的这个示例：

您可以在页面顶部使用此小部件，以便它可以检测到滑动

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
      body: Center(
        child: FlatButton(
          child: Text("Next Page"),
          onPressed: () {
            Navigator.push(
                context, MaterialPageRoute(builder: (context) => SecondPage()));
          },
        ),
      ),
    );
  }
}

class SecondPage extends StatefulWidget {
  @override
  _SecondPageState createState() => _SecondPageState();
}

class _SecondPageState extends State<SecondPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(onHorizontalDragUpdate: (details) {
        // Note: Sensitivity is integer used when you don't want to mess up vertical drag
        int sensitivity = 8;
        if (details.delta.dx > sensitivity) {
          // Right Swipe

        } else if (details.delta.dx < -sensitivity) {
          //Left Swipe
          Navigator.of(context).pop();
        }
      }

      ),
    );
  }
}

让我知道这就是您要实现的目标

【讨论】：

我必须在我做背部的每个班级都实施这个吗？或者如果我主要做的话？
它是如何实现的，对于堆栈中的最后一页，您可以使用 willpopscope 弹出您想退出的窗口。
您可以创建自定义的有状态小部件，您可以根据需要覆盖该方法和用户。
@SagarAcharya - 我们可以在 Flutter Web View 应用中添加手势检测机制吗？？
@PARASGUPTA 我还没有在 Flutter Web 上工作过，但也许这对你有用 stackoverflow.com/questions/64985580/…

【解决方案2】：

试过这个并且工作正常，在屏幕 1 上，您正在导航，在您的 手势检测器上添加这一行。

onHorizontalDragUpdate: (details) {
    if (details.delta.direction > 0) {
      Navigator.of(context).push(MaterialPageRoute(builder: (context) => Page2()));
    }
  },

在第 2 页的构建上下文中，添加这一行

    onVerticalDragUpdate: (details) {},
onHorizontalDragUpdate: (details) {
   if (details.delta.direction <= 0) {
          Navigator.pop(context);
    }
},

下面是完整的代码sn-p

import 'package:flutter/material.dart';
import 'package:swipe_detection_example/page2.dart';

class Page1 extends StatelessWidget {
  const Page1({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onVerticalDragUpdate: (details) {},
      onHorizontalDragUpdate: (details) {
        if (details.delta.direction > 0) {
          Navigator.of(context).push(MaterialPageRoute(builder: (context) => Page2()));
        }
      },
      child: Scaffold(
        body: Center(
          child: Text('Page 1'),
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';
import 'package:swipe_detection_example/page2.dart';

class Page2 extends StatelessWidget {
  const Page2({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onVerticalDragUpdate: (details) {},
      onHorizontalDragUpdate: (details) {
        if (details.delta.direction <= 0) {
          Navigator.pop(context);
        }
      },
      child: Scaffold(
        body: Center(
          child: Text('Page 2'),
        ),
      ),
    );
  }
}

【讨论】：