滑動到 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 想要你實現的，所以你最好不要這樣做。