我如何在Flutter中实现从左侧滑动返回的手势?不确定它是否已经在iOS中自动实现,但我也希望它在Android中实现(因为事情正在变得基于手势)。
izj3ouym1#
使用CupertinoPageRoute使其在Android上工作;import 'package:flutter/cupertino.dart';(as在How to implement swipe to previous page in Flutter?上应答)
CupertinoPageRoute
import 'package:flutter/cupertino.dart';
6tqwzwtp2#
您可以将Theme.platform设置为TargetPlatform.ios。这将利用在每个设备上使用的向后滑动手势。
bvjxkvbb3#
您可以将CupertinoPageRoute()用作Tom O'Sullivan said above。然而,如果你想使用PageRouteBuilder s自定义它(例如,使用自定义过渡持续时间),并获得相同的滑动返回手势,那么你可以覆盖buildTransitions()。在iOS系统中,默认的PageTransitionBuilder是CupertinoPageTransitionsBuilder(),所以我们可以在buildTransitions()中使用它,这会自动给我们一个向右滑动返回的手势。下面是CustomPageRouteBuilder的一些示例代码:
CupertinoPageRoute()
PageRouteBuilder
buildTransitions()
PageTransitionBuilder
CupertinoPageTransitionsBuilder()
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: ..., )
yb3bgrhw4#
您可以将您的theme(和darkTheme)的platform设置为TargetPlatform.iOS,您可以将您的主题的pageTransitionsTheme设置为,
theme
darkTheme
platform
TargetPlatform.iOS
pageTransitionsTheme
pageTransitionsTheme: PageTransitionsTheme( builders: { TargetPlatform.android: CupertinoPageTransitionsBuilder(), TargetPlatform.iOS: CupertinoPageTransitionsBuilder(), }, ),
你可以使用CupertinoPageRoute来加载新页面......但是在你确定使用Navigator.push(而不是Navigator.pushReplacement)来进入新屏幕之前,这些都不会起作用!我希望这能帮助那些正在使用现有过渡而没有注意到这个关键细节的人。:)
Navigator.push
Navigator.pushReplacement
pbossiut5#
使用此插件: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(), ), )
有关插件页面的更多详细信息
zzoitvuj6#
在我的例子中,解决方案非常简单,我只是使用context.push('screen')而不是context.go('/screen')
context.push('screen')
context.go('/screen')
jc3wubiy7#
这不应在Android上实现,因为它会使整个操作系统的交互不一致。从屏幕边缘滑动返回不是Android希望你实现的事情,所以你最好不要这样做。
7条答案
按热度按时间izj3ouym1#
使用
CupertinoPageRoute
使其在Android上工作;import 'package:flutter/cupertino.dart';
(as在How to implement swipe to previous page in Flutter?上应答)
6tqwzwtp2#
您可以将Theme.platform设置为TargetPlatform.ios。这将利用在每个设备上使用的向后滑动手势。
bvjxkvbb3#
您可以将
CupertinoPageRoute()
用作Tom O'Sullivan said above。然而,如果你想使用
PageRouteBuilder
s自定义它(例如,使用自定义过渡持续时间),并获得相同的滑动返回手势,那么你可以覆盖buildTransitions()
。在iOS系统中,默认的
PageTransitionBuilder
是CupertinoPageTransitionsBuilder()
,所以我们可以在buildTransitions()
中使用它,这会自动给我们一个向右滑动返回的手势。下面是
CustomPageRouteBuilder
的一些示例代码:然后转到新页面:
yb3bgrhw4#
您可以将您的
theme
(和darkTheme
)的platform
设置为TargetPlatform.iOS
,您可以将您的主题的pageTransitionsTheme
设置为,你可以使用
CupertinoPageRoute
来加载新页面......但是在你确定使用Navigator.push
(而不是Navigator.pushReplacement
)来进入新屏幕之前,这些都不会起作用!我希望这能帮助那些正在使用现有过渡而没有注意到这个关键细节的人。:)pbossiut5#
使用此插件:
https://pub.dev/packages/cupertino_back_gesture
一个Flutter包,用于设置iOS向后滑动手势区域的自定义宽度。对于基本用途:
有关插件页面的更多详细信息
zzoitvuj6#
在我的例子中,解决方案非常简单,我只是使用
context.push('screen')
而不是context.go('/screen')
jc3wubiy7#
这不应在Android上实现,因为它会使整个操作系统的交互不一致。
从屏幕边缘滑动返回不是Android希望你实现的事情,所以你最好不要这样做。