Flutter 路由 实现界面跳转

界面跳转

普通路由

不携值

Navigator.of(context).push(
                    MaterialPageRoute(builder: (BuildContext context){
                      //此处放回被跳转的界面
                      return SearchPage();
                    }));

携值

在被跳转界面的构造方法中添加对应参数,实现传值效果

Navigator.of(context).push(
                    MaterialPageRoute(builder: (BuildContext context){
                      //此处放回被跳转的界面
                      return SearchPage(searchContent: "一个搜索内容");
                    }));

---

命名路由

实现步骤

1. 在main文件中添加路由表单

    final routes = {
      //无需传递参数的界面
      "/search": (context,{arguments}) => SearchPage(),
      //需要传递参数的界面(设置默认参数,可不传),其中的arguments为Objects类型,增加了传值的灵活性
      "/form": (context,{arguments}) => FormPage(arguments: arguments,),
    };

2. 为 MaterialApp 添加 onGenerateRoute 参数

//固定写法,用于命名路由的传值(此参数用于回调时生成MaterialPageRoute参数)
onGenerateRoute: (RouteSettings settings) {
  //通过pushName实现跳转时传递的 name和arguments被封装成了RouteSettings对象
  final String? name = settings.name;
  if (name != null && name.isNotEmpty) {
    //从自定义的routes中查询
    final Function? pageContentBuilder = routes[name];
    if (pageContentBuilder != null) {
      //查看是否存在传值,从而生成不同的MaterialPageRoute对象并返回
      if (settings.arguments != null) {
        final Route route = MaterialPageRoute(
            builder: (context) => pageContentBuilder(context,
                arguments: settings.arguments));
        return route;
      } else {
        final Route route = MaterialPageRoute(
            builder: (context) => pageContentBuilder(context));
        return route;
      }
    }
  }
},

3. 执行携值跳转

children: [
          Text("命名路由跳转"),
          ElevatedButton(
              onPressed: () {
                Navigator.of(context).pushNamed("/form");
              },
              child: Text("跳转到表单界面")),
          ElevatedButton(
              onPressed: () {
                Navigator.of(context).pushNamed("/form",arguments: {
                  "content":"表单内容"
                });
              },
              child: Text("携值跳转到表单界面"))
        ],

被跳转的界面处理

class FormPage extends StatefulWidget {

  final arguments;

  FormPage({this.arguments});

  @override
  _FormPageState createState() => _FormPageState(arguments: arguments);
}

class _FormPageState extends State<FormPage> {

  final arguments;

  String content = "";

  _FormPageState({this.arguments});

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    if(this.arguments!=null){
      content = this.arguments["content"];
      print("接收到的arguments: $arguments");
    }
  }

  @override
  Widget build(BuildContext context) {
    print("接收到的content: $content");
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text("表单"),
      ),
      body: Text("$content"),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          //返回上一页
          Navigator.of(context).pop();
        },
        child: Text("返回"),
      ),
    );
  }
}

---

返回上一级界面

返回上一级

Navigator.of(context).pop();

携值返回上一级

//跳转时通过.then来接收返回参数
Navigator.of(context).pushNamed("跳转界面",
                    arguments: {"content": "表单内容"}).then((value) {
                  print("返回的值:   $value");
                });
                
...
//返回时携带参数
Navigator.pop(context,"携带参数");

路由替换

由当前页加载跳转页,不生成新的界面

Navigator.of(context).pushReplacementNamed("跳转页");

返回到根界面

将所有路由置空并重新创建根界面

Navigator.of(context).pushAndRemoveUntil(MaterialPageRoute(builder: (BuildContext context) {
          return MyStateApp();
        }), 
        //一直清空直至返回true,此处固定返回false,会清空全部路由
		(route) => false);

返回到指定界面

Navigator.popUntil(context, ModalRoute.withName('指定界面'));