如何更改 CupertinoPageRoute 的滑动方向

Question

我正在使用 Cupertino Page Route 产生以下行为

      title: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            //doesn't do what I want to do
            GestureDetector(             
              onTap: () => Navigator.of(context).pushNamed(settingsPage),
              onPanUpdate: (details){
                if(details.delta.dx < 0){
                  Navigator.of(context).pushNamed(settingsPage);
                }
              },
              child: Icon(Icons.settings),
            ),
            //Not my concern for now
            IconButton(
              onPressed: () {},
              icon: const Icon(Icons.notifications, color: Colors.black),
            ),
            //Does what I want it to do
            GestureDetector(
              onTap: () => Navigator.of(context).pushNamed(messages),
              child: Icon(Icons.message),
            ),                    
          ],
        ),

它允许我从左向右滑动以关闭消息屏幕

不幸的是，它不允许我通过从从右向左滑动滑动来关闭设置屏幕[=29] =]

有人知道如何更改 CupertinoPageRoute 的滑动方向或使用其他解决方案模仿它的行为吗？

Answer 1

我认为您无法轻松更改 CupertinoRoute 的滑动方向，但我为您找到了两个简单的解决方案：

您可以使用 PageView Widget - 它允许您在屏幕之间滑动

或者 - 针对您的具体情况的更好解决方案：

您可以改为使用 page_transition Package 和 滑动方向检测器

第二个解决方案将最好地重现 CupertinoPageRoute

的行为

此外，它会为您提供从主屏幕到 Settings/Messages 以及返回主屏幕的动画：

这就是如何将上面 GIF 中显示的第二个解决方案 实施到 您的应用程序中：

import 'package:page_transition/page_transition.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);
  @override
  _HomeScreen createState() => _HomeScreen();
}

class _HomeScreen extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: Colors.white,
        automaticallyImplyLeading: false,
        title: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            GestureDetector(
                onTap: () => Navigator.push(
                      context,
                      //Use Page Transition left to right here
                      PageTransition(
                          // duration: Duration(seconds: 1),
                          type: PageTransitionType.leftToRightWithFade,
                          child: SettingsScreen(),
                          inheritTheme: true,
                          ctx: context),
                    ),
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: const Icon(Icons.settings, color: Colors.black),
                )),
            IconButton(
              onPressed: () {},
              icon: const Icon(Icons.notifications, color: Colors.black),
            ),
            GestureDetector(
                onTap: () => Navigator.push(
                      context,
                      //Use Page Transition right to left here
                      PageTransition(
                          // duration: Duration(seconds: 1),
                          type: PageTransitionType.rightToLeftWithFade,
                          child: const MessageScreen(),
                          inheritTheme: true,
                          ctx: context),
                    ),
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: const Icon(Icons.message, color: Colors.black),
                )),
          ],
        ),
      ),
      //body
      body: Container(),
    );
  }
}

然后在你的Settings/Messages屏幕中实现一个GestureDetector，它将在滑动[=17时触发=]

它会Navigator.pop（关闭）你的屏幕 - Flutter 会处理反向动画

class SettingsScreen extends StatefulWidget {
  const SettingsScreen({Key? key}) : super(key: key);

  @override
  _SettingsScreen createState() => _SettingsScreen();
}

class _SettingsScreen extends State<SettingsScreen> {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
// This is where you detect swiping from right to left
        onPanUpdate: (details) {
          if (details.delta.dx < -10) {
// Upon swiping detection it then pops the screen - reverse animation happens without additional code
            Navigator.pop(context);
          }
        },
        child: const Scaffold(
          backgroundColor: Colors.blueGrey,
          body: Center(child: const Text(" Settings")),
        ));
  }
}


// Same code here for your MessageScreen but with opposite swipe gesture detection (left to right)

class MessageScreen extends StatefulWidget {
  const MessageScreen({Key? key}) : super(key: key);

  @override
  _MessageScreen createState() => _MessageScreen();
}

class _MessageScreen extends State<MessageScreen> {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
        onPanUpdate: (details) {
          if (details.delta.dx > 10) {
            Navigator.pop(context);
          }
        },
        child: const Scaffold(
          backgroundColor: Colors.redAccent,
          body: Center(child: const Text(" Messages")),
        ));
  }
}

就是这样！ - 此方法的唯一缺点是一旦检测到滑动就无法取消

---- 经过与用户的长时间讨论 - 下面的评论已得到解决以上 & 问题已编辑

如何更改 CupertinoPageRoute 的滑动方向

How to Change Swiping direction of CupertinoPageRoute

gesturedetector

dart

flutter

flutter-animation