flutter 轻扫以返回手势抖动

ubof19bj  于 2022-11-25  发布在  Flutter
关注(0)|答案(7)|浏览(176)

我如何在Flutter中实现从左侧滑动返回的手势?不确定它是否已经在iOS中自动实现,但我也希望它在Android中实现(因为事情正在变得基于手势)。

izj3ouym

izj3ouym1#

使用CupertinoPageRoute使其在Android上工作;
import 'package:flutter/cupertino.dart';
(as在How to implement swipe to previous page in Flutter?上应答)

6tqwzwtp

6tqwzwtp2#

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

bvjxkvbb

bvjxkvbb3#

您可以将CupertinoPageRoute()用作Tom O'Sullivan said above
然而,如果你想使用PageRouteBuilder s自定义它(例如,使用自定义过渡持续时间),并获得相同的滑动返回手势,那么你可以覆盖buildTransitions()
在iOS系统中,默认的PageTransitionBuilderCupertinoPageTransitionsBuilder(),所以我们可以在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: ...,
)
yb3bgrhw

yb3bgrhw4#

您可以将您的theme(和darkTheme)的platform设置为TargetPlatform.iOS,您可以将您的主题的pageTransitionsTheme设置为,

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

你可以使用CupertinoPageRoute来加载新页面......但是在你确定使用Navigator.push(而不是Navigator.pushReplacement)来进入新屏幕之前,这些都不会起作用!我希望这能帮助那些正在使用现有过渡而没有注意到这个关键细节的人。:)

pbossiut

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

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

zzoitvuj

zzoitvuj6#

在我的例子中,解决方案非常简单,我只是使用context.push('screen')而不是context.go('/screen')

jc3wubiy

jc3wubiy7#

这不应在Android上实现,因为它会使整个操作系统的交互不一致。
从屏幕边缘滑动返回不是Android希望你实现的事情,所以你最好不要这样做。

相关问题