滑动到 go 返回手势 flutter

Question

如何在 flutter 中实现从左滑动到 go 后退手势？ 不确定它是否已经为 iOS 自动实现，但我也希望它用于 Android（因为事情正在变得基于手势）。

Answer 1

使用CupertinoPageRoute使其在 Android 上运行；

import 'package:flutter/cupertino.dart';

（如如何在 Flutter 中实现滑动到上一页？ ）

Answer 2

您可以将 Theme.platform 设置为 TargetPlatform.ios。 这将利用在每个设备上使用向后滑动手势。

Answer 3

您可以使用CupertinoPageRoute()正如上面 Tom O'Sullivan 所说的那样。

但是，如果您想使用PageRouteBuilder自定义它（例如使用自定义过渡持续时间）并获得相同的滑动以返回手势，那么您可以覆盖buildTransitions() 。

对于 iOS，默认的PageTransitionBuilder是CupertinoPageTransitionsBuilder() 。 所以我们可以在buildTransitions()中使用它。 这会自动让我们向右滑动以返回手势。

这是CustomPageRouteBuilder的一些示例代码：

class CustomPageRouteBuilder<T> extends PageRoute<T> {
  final RoutePageBuilder pageBuilder;
  final PageTransitionsBuilder matchingBuilder = const CupertinoPageTransitionsBuilder(); // Default iOS/macOS (to get the swipe right to go back gesture)
  // final PageTransitionsBuilder matchingBuilder = const FadeUpwardsPageTransitionsBuilder(); // Default Android/Linux/Windows

  CustomPageRouteBuilder({this.pageBuilder});

  @override
  Color get barrierColor => null;

  @override
  String get barrierLabel => null;

  @override
  Widget buildPage(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {
    return pageBuilder(context, animation, secondaryAnimation);
  }

  @override
  bool get maintainState => true;

  @override
  Duration get transitionDuration => Duration(milliseconds: 900); // Can give custom Duration, unlike in MaterialPageRoute

  @override
  Widget buildTransitions(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
    return matchingBuilder.buildTransitions<T>(this, context, animation, secondaryAnimation, child);
  }
}

然后进入新页面：

GestureDetector(
  onTap: () => Navigator.push(
    context,
    CustomPageRouteBuilder(pageBuilder: (context, animation, secondaryAnimation) => NewScreen()),
  ),
  child: ...,
)

Answer 4

您可以将theme （和darkTheme ）的platform设置为TargetPlatform.iOS ，您可以将主题的pageTransitionsTheme设置为，

pageTransitionsTheme: PageTransitionsTheme(
    builders: {
      TargetPlatform.android: CupertinoPageTransitionsBuilder(),
      TargetPlatform.iOS: CupertinoPageTransitionsBuilder(),
    },
),

并且您可以使用CupertinoPageRoute加载新页面......在您确保使用Navigator.push （而不是Navigator.pushReplacement ）进入该新屏幕之前，这些都不会起作用！ 我希望这可以帮助那些正在处理现有转换并且没有注意到这个关键细节的人。 :)

Answer 5

使用这个插件：

https://pub.dev/packages/cupertino_back_gesture

一个 Flutter 包，用于设置 iOS 后滑动手势区域的自定义宽度。 基本用途：

import 'package:cupertino_back_gesture/cupertino_back_gesture.dart';

BackGestureWidthTheme(
 backGestureWidth: BackGestureWidth.fraction(1 / 2),
  child: MaterialApp(
    theme: ThemeData(
      pageTransitionsTheme: PageTransitionsTheme(
        builders: {
           //this is default transition
          //TargetPlatform.android: FadeUpwardsPageTransitionsBuilder(),
          //You can set iOS transition on Andoroid
          TargetPlatform.android: CupertinoPageTransitionsBuilderCustomBackGestureWidth(),
          TargetPlatform.iOS: CupertinoPageTransitionsBuilderCustomBackGestureWidth(),
        },
      ),
    ),
    home: MainPage(),
  ),
)

插件页面上的更多详细信息

Answer 6

就我而言，解决方案非常简单。 我只是使用context.push('screen')而不是context.go('/screen')

Answer 7

这不应该在 Android 上实现，因为它会使整个操作系统的交互不一致。

从屏幕边缘滑动返回不是 Android 想要你实现的，所以你最好不要这样做。