flutter的路由跳转与传参

首先定义路由：

import 'package:flutter/material.dart';
import 'pages/Home.dart';
import 'pages/loading.dart';
import 'pages/location.dart';

void main() => runApp(MaterialApp(
 initialRoute: '/home',
  routes: <String, WidgetBuilder>{
    '/':(context)=>Loading(),
    '/home':(context)=>Home(),
    '/location':(context)=>Location(),
  },
));

initialRoute定义打开APP的路由

routes存放路由

routes对象是一个Map<String，WidgetBuilder>，当使用Navigator.pushName来路由的时候，会在routes查找路由的名字，然后使用对应的WidgetBuilder来构造一个带有页面切换动画的MaterialPageRoute。

注：路由跳转分静态路由跳转和动态路由跳转，两者的区别就是是否给第二个页面传值

import 'package:flutter/material.dart';
import 'pages/Home.dart';
import 'pages/loading.dart';
import 'pages/location.dart';

void main() => runApp(MaterialApp(
 initialRoute: '/home',
  routes: <String, WidgetBuilder>{
    '/':(context)=>Loading(),
    '/home':(context)=>Home(),
    '/location':(context)=>Location(),
  },
));

首先初始化路由列表，为后面页面跳转做准备，路由列表对应这每一个页面

路由跳转

import 'package:flutter/material.dart';

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child:Column(
          children: <Widget>[
            FlatButton.icon(
              color: Colors.grey,
              onPressed: (){
                Navigator.pushNamed(context, '/location');
              },
              icon: Icon(Icons.edit_location),
              label: Text('路由跳转'),
            ),
          ],
        ),
      ),
    );
  }
}

Navigator.pushNamed（上下文，路由地址，需要传递的参数）

路由传参

  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: <Widget>[
            Text(times),
            FlatButton.icon(
              onPressed: () {
                Navigator.pushNamed(context,'/home',arguments: {
                  'id':"1",
                  "age":18,
                });
              },
              icon: Icon(Icons.router),
              label: Text('点击路由跳转携带参数'),
              color: Colors.blueAccent,
            ),
          ],
        ),
      ),
    );
  }
}

home页面接收参数：

class _HomeState extends State<Home> {
  Map routerData={};
  @override
  Widget build(BuildContext context) {
    routerData= ModalRoute.of(context).settings.arguments;
    print(routerData);
    return Scaffold(
      body: SafeArea(
        child:Column(
          children: <Widget>[
           Text('路由参数接收,id:${routerData['id']},age：${routerData['age']}')
          ],
        ),
      ),
    );
  }
}

ModalRpute.of(context).setting.arguments接收上个页面传递的参数

返回页面携带数据

Navigator.pushNamed相当于在页面上面添加一个路由。Navigator.pop相当于删除当前页面返回上一个页面。

home代码：

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('首页'),
    ),
    body: Column(
      children: <Widget>[
        FlatButton(
          child: Text('点击跳转Home页面'),
          onPressed: () async {
            dynamic result = await Navigator.pushNamed(context, '/home');
            print(result);
          },
        ),
      ],
    ),
  );
}

list代码：

body:Column(
  children: <Widget>[
    FlatButton(
      onPressed: (){
        Navigator.pop(context,{
          'id':1,
          'age':23
        });
      },
      child: Text('页面返回携带参数'),
    ),
  ],
),

点击返回携带参数，需要在home页面的，点击跳转事件中使用async 和await，等待下个页面返回数据。