Home Articles

如何在每次推送时使用不同的动画时,如何正确执行Navigator.popUntil

Asked
Viewed 716 times
1

我正在尝试在Flutter中重建iOS应用程序,但面临导航问题 .

这是我想要做的:

  • 添加按钮的已添加交换对的列表(A屏幕)

  • 添加按钮打开带有交换的选择器(B屏幕),从下到上进行转换 .

  • 通过点击交换,它会推动新的Picker与Pirs(C屏幕)从右向左过渡 .

  • 当用户点击一对时,它会立即关闭所有选择器并将拾取结果传递给A屏幕 .

我尝试过双弹出和popUntil,但结果总是一样,我同时看到2个后退过渡(从左到右,从上到下) .

它在iOS原生应用中的外观:

How it looks in iOS native app

它在Flutter app中的样子:

How it looks in Flutter app

使用嵌套导航器解决

用导航器包裹屏幕B并使用此导航器推送屏幕C,在屏幕C上使用根导航器弹出 . 结果如下:
Final result

1 Answer

  • 2

    这是我如何解决它的例子:

    import 'package:flutter/material.dart';
    
    void main() {
      MaterialPageRoute.debugEnableFadingRoutes = true;
      runApp(new MyApp());
    }
    
    class MyApp extends StatelessWidget {
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
        return new MaterialApp(
          title: 'Flutter Demo',
          theme: new ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: new MyHomePage(title: 'Flutter Demo Home Page'),
        );
      }
    }
    
    class MyHomePage extends StatefulWidget {
      MyHomePage({Key key, this.title}) : super(key: key);
    
      final String title;
    
      @override
      _MyHomePageState createState() => new _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyHomePage> {
      String _result = "--";
    
      void _openSubscreen() {
        Navigator.of(context).push<String>(
          new MaterialPageRoute(
            settings: RouteSettings(name: '/subscreen'),
            builder: (context) => SubScreen(),
          ),
        ).then((result) => setState((){
          _result = result;
        }));
      }
    
      @override
      Widget build(BuildContext context) {
        return new Scaffold(
          appBar: new AppBar(
            title: new Text(widget.title),
          ),
          body: new Center(
            child: new Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                new Text(
                  'Result from navigator:',
                ),
                new Text(
                  _result,
                  textAlign: TextAlign.center,
                  style: Theme.of(context).textTheme.headline,
                ),
                SizedBox(height: 32.0,),
                OutlineButton(
                  onPressed: _openSubscreen,
                  child: Text('Start flow'),
                ),
              ],
            ),
          ),
        );
      }
    }
    
    class SubScreen extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: new Navigator(
            onGenerateRoute: (routeSettings) {
              final path = routeSettings.name;
              if (path == '/') {
                return new MaterialPageRoute(
                  settings: routeSettings.copyWith(isInitialRoute: true),
                  builder: (_) => SubScreenPage1(),
                );
              } else if (path == '/nexpage') {
                return new MaterialPageRoute(
                  settings: routeSettings,
                  builder: (_) => SubScreenPage2(),
                );
              }
            },
          ),
        );
      }
    }
    
    class SubScreenPage1 extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return new Center(
          child: OutlineButton(
            child: Text('Next sub page!'),
            onPressed: () {
              Navigator.of(context).pushNamed('/nexpage');
            },
          ),
        );
      }
    }
    
    class SubScreenPage2 extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return new Center(
          child: OutlineButton(
            child: Text('Deliver result!'),
            onPressed: () {
              final date = DateTime.now().toString();
              Navigator
                  .of(context, rootNavigator: true)
                  .pop('Delivered at $date');
            },
          ),
        );
      }
    }
    

Related