Flutter 之Router 页面跳转

Flutter 之Router 页面跳转

页面跳转在移动开发中是很常见的事情，在Android中打开另外一个页面主要是用startActivity这个方法，在Flutter中也是提供这种能力，主要的使用方式就是通过Navigator 去打开一个页面

1.跳转到另外一个页面

构建FirstScreen和SecondScreen 页面

import 'package:flutter/material.dart';

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("First Screen"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.push(context, MaterialPageRoute(builder: (context) {
              return SecondScreen();
            }));
          },
          child: Text("next screen"),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Screen"),
      ),
      body: Center(
        child: RaisedButton(
            onPressed: () {
               Navigator.pop(context);
            },
          child: Text("back"),
        ),
      ),
    );
  }
}

这里就是跳转的主要代码

Navigator.push(context, MaterialPageRoute(builder: (context) {
  return SecondScreen();
}));

push方式详解

static Future<T> push<T extends Object>(BuildContext context, Route<T> route)

第一个参数就是上下问信息，类似Android中的Context，第二个参数就是路由信息，也就是要打开的主要页面是哪个，MaterialPageRoute 就是Route其中的一个子类，用于在Material Desgin 模式下打开页面的

Navigator.pop(context);

是用来返回上一个页面的

 

 

 

2.通过routes路径方式跳转到下一个页面

先定义Routes路由表，实际上就是一个Map结构，key是路径，value就是对应的页面

import 'package:flutter/material.dart';

import 'navigation/navigation_demo.dart';

void main() {
  runApp(MaterialApp(
    initialRoute: "/",
    routes: {
      "/": (context) => FirstScreen(),
      '/second': (context) => SecondScreen(),
    },
  ));
}

　　

routes 就是一个map结构，根目录/对应的页面就是FirstScreen，/second路径对应的页面就是ScendScreen，在FirstScreen中打开SecondScreen的方式我们换一下，要通过Navigator.pushNamed方式打开一个在路由表中已经存在的页面

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("First Screen"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.pushNamed(context, "/second");
//            Navigator.push(context, MaterialPageRoute(builder: (context) {
//              return SecondScreen();
//            }));
          },
          child: Text("next screen"),
        ),
      ),
    );
  }
}

　　

3.传递数据到下一个页面

传递数据到下一个页面也是比较常见的情况，例如说在一个相册应用中，有一个列表页面，单击列表中某一个item，应该跳转到照片的详情页面，其实这种情况就应该把照片的信息传递给另外一个页面

传递的方式有两种:

• 在构造方法中传递数据
• 在Route中传递数据给下一个页面

在第一个页面构造要传递的数据

class Photo {
  String title;
  String message;

  Photo({this.title, this.message});
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("First Screen"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.pushNamed(context, "/second", arguments: Photo(title: "pass title",message: "pass message"));
//            Navigator.push(context, MaterialPageRoute(builder: (context) {
//              return SecondScreen();
//            }));
          },
          child: Text("next screen"),
        ),
      ),
    );
  }
}

　　

在第二个页面获取数据

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final Photo photo=ModalRoute.of(context).settings.arguments;
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Screen ${photo.title}"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text("back ${photo.message}"),
        ),
      ),
    );
  }
}

　　

这种方式有种不太好的地方就是需要在下一个页面通过ModalRoute.of(context).settings.arguments; 方式获取传递的数据，其实Flutter中已经提供了这种方式简便处理方式

import 'package:flutter/material.dart';

import 'navigation/navigation_demo.dart';

void main() {
  runApp(MaterialApp(
    home: FirstScreen(),
    onGenerateRoute: (settings) {
      if (settings.name == ThreeScreen.routeName) {
        final Photo args = settings.arguments;
        return MaterialPageRoute(builder: (context) {
          return ThreeScreen(
            title: args.title,
            message: args.message,
          );
        });
      }
    },
  ));
}

onGenerateRoute 是用来统一拦截传递参数的方法，我们可以在这个地方获取传递的数据，然后在构造页面的时候把参数传递给目标页面，这样在目标页面也就是不用考虑如何解析传递过来的数据了

class ThreeScreen extends StatelessWidget {
  static const routeName = '/extractArguments';

  final String title;
  final String message;

  ThreeScreen({this.title, this.message});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("second"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(title),
            Text(message),
          ],
        ),
      ),
    );
  }
}

在这个页面，数据都是通过构造方法中传递了，减少了在页面获取传递数据的代码

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("First Screen"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.pushNamed(context, ThreeScreen.routeName,
                arguments: Photo(title: "args title", message: "args message"));
          },
          child: Text("next screen"),
        ),
      ),
    );
  }
}

发送方式的代码没有改变

 

4.接收页面返回值

有的时候我们希望在前一个页面接收另外一个页面的数据，这个怎么处理呢

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("First Screen"),
      ),
      body: FirstButton(),
    );
  }
}

class FirstButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: RaisedButton(
        onPressed: () {
          Navigator.pushNamed(context, "/second",
                  arguments:
                      Photo(title: "pass title", message: "pass message"))
              .then((vale) {
            final snackBar = SnackBar(
              content: Text('Yay! A SnackBar!'),
              action: SnackBarAction(
                label: 'Undo',
                onPressed: () {
                },
              ),
            );
            Scaffold.of(context).showSnackBar(snackBar);

          });
        },
        child: Text("next screen"),
      ),
    );
  }
}

关键的代码是这段，then 方法用来处理接收数据后的处理逻辑，这个例子中主要通过SnackBar 展示一下接收的信息

Navigator.pushNamed(context, "/second",
        arguments:
            Photo(title: "pass title", message: "pass message"))
    .then((vale) {
  final snackBar = SnackBar(
    content: Text('Yay! A SnackBar!'),
    action: SnackBarAction(
      label: 'Undo',
      onPressed: () {
      },
    ),
  );
  Scaffold.of(context).showSnackBar(snackBar);
});

为什么要单独抽取出FirstButton组件？

是因为SnackBar只能在Scaffold 组件代码中使用会报错

下面代码是用于在推出当前页面的时候，处理了ok 给前一个页面

Navigator.pop(context, "ok");

 

 

总结

使用上跟Android 的使用方式类似，有点经验的人掌握这个不是很难

https://docs.flutter.io/flutter/widgets/Navigator-class.html

https://www.raywenderlich.com/110-flutter-navigation-tutorial

作者：饥饿的大灰狼  来源：简书