滑动返回手势颤动

Question

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

Answer 1

这不应在 Android 上实现，因为它会导致 OS 之间的交互不一致。

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

Answer 2

使用 CupertinoPageRoute 使其在 Android 上工作；

import 'package:flutter/cupertino.dart';

（在上的回答）

Answer 3

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

Answer 4

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

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

并且您可以使用 CupertinoPageRoute 加载新页面 ... 并且 none 将起作用，直到您确保使用 Navigator.push（而不是 Navigator.pushReplacement ) 去那个新屏幕！我希望这可以帮助那些正在处理现有过渡但没有注意到这个关键细节的人。 :)

Answer 5

您可以将 CupertinoPageRoute() 用作。

但是，如果您想使用 PageRouteBuilders 自定义它（例如，使用自定义过渡持续时间）并获得相同的滑动返回手势，那么您可以覆盖 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 6

使用这个插件：

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(),
  ),
)

有关插件页面的更多详细信息

滑动返回手势颤动

Swipe to go back gesture flutter

dart

flutter

back

swipe-gesture