如何在Flutter中实现向前滑动到上一页？

Question

如何在Flutter中实现向前滑动到上一页？

dartflutter

12

在iPhone上，“返回”功能只在屏幕边缘可用。如何在屏幕的任何位置滑动以返回上一页？

- David

6个回答

2

使用 CupertinoPageRoute 可以让它在 Android 上工作。

- najeira

1

你能解释一下吗？我尝试使用CupertinoPageRoute - 它提供了iOS风格的动画。但是从左向右滑动返回到上一页仍然无法工作。 - Andrii Turkovskyi

1

如果我理解正确，问题是如何设置iOS返回滑动手势区域的自定义宽度？因此，其中一种可能的解决方案是使用此包：cupertino_back_gesture。

该包作者的解释：

要更改用户可以为整个应用程序开始后退滑动的区域的宽度：

- 使用所需的backGestureWidth将您的MaterialApp与BackGestureWidthTheme包装 - 将pageTransitionsTheme的iOS builder设置为CupertinoPageTransitionsBuilderCustomBackGestureWidth

import 'package:cupertino_back_gesture/cupertino_back_gesture.dart';

BackGestureWidthTheme(   backGestureWidth: BackGestureWidth.fraction(1 / 2),   child: MaterialApp(
    theme: ThemeData(
      pageTransitionsTheme: PageTransitionsTheme(
        builders: {
          TargetPlatform.android: FadeUpwardsPageTransitionsBuilder(),
          TargetPlatform.iOS: CupertinoPageTransitionsBuilderCustomBackGestureWidth(),
        },
      ),
    ),
    home: MainPage(),   
  ), 
)

示例应用程序可以在github.com上找到。

- Valentin

它是否与onGenerateRoute一起使用？ - shinriyo

0

在 materialApp 中，只需设置主题即可。

theme: ThemeData(
    primarySwatch: Colors.green,
    pageTransitionsTheme: const PageTransitionsTheme(
      builders: {
        TargetPlatform.android: CupertinoPageTransitionsBuilder(),
      },
    ),
  ),

如果你正在进行路由操作，请使用CupertinoPageRoute而不是MaterialPageRoute，这样它会正常工作。

- Muhammad Hassan Razzaq

0

另一个解决方案是使用swipeable_page_rout。它有特定的参数onlySwipeFromEdge: false。

- hexwhyzet

-1

您可能正在寻找PageView，它允许滑动手势进行下一页/上一页操作。

- Rémi Rousselet

3

抱歉，我不知道如何实现PageView以允许向前划动手势。你可以给我展示一个相关的例子吗？ - David

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- DJafari · Accepted Answer

正确的方法是：

MaterialApp(
  .
  .
  .
  theme: ThemeData(
    pageTransitionsTheme: PageTransitionsTheme(
      builders: {
        TargetPlatform.android: CupertinoPageTransitionsBuilder(),
        TargetPlatform.iOS: CupertinoPageTransitionsBuilder(),
      }
    )
  ),
  .
  .
  .
);