Android Flutter 路由管理

Android Flutter 路由管理

Route在Android中通常指一个Activity，在iOS中指一个ViewController

路由管理

路由管理：就是管理页面之间如何跳转，通常也可被称为导航管理

贴段路由跳转代码：

// MaterialPageRoute 是Material组件库的一个Widget
// 它可以针对不同平台，实现与平台页面切换动画风格一致的路由切换动画
// push 给定的路由入栈（即打开新的页面）
Navigator.push(context, 
	new MaterialPageRoute(builder: (context) {
		// MyHomePage代表一个新路由页面
        return new MyHomePage(title: '主Tab');
     })
);

与路由相关的另一个概念命名路由

Navigator类中第一个参数为context的静态方法都对应一个Navigator的实例方法， 比如

Navigator.push(BuildContext context, Route route)

等价于

Navigator.of(context).push(Route route) route) 

命名路由

所谓命名路由（Named Route）即给路由起一个名字，然后可以通过路由名字直接打开新的路由。这为路由管理带来了一种直观、简单的方式

路由表

要想使用命名路由，我们必须先提供并注册一个路由表（routing table），这样应用程序才知道哪个名称与哪个路由Widget对应。路由表的定义如下

Map<String, WidgetBuilder> routes；

它是一个Map， key 为路由的名称，是个字符串；value是个builder回调函数，用于生成相应的路由Widget。我们在通过路由名称入栈新路由时，应用会根据路由名称在路由表中找到对应的WidgetBuilder回调函数，然后调用该回调函数生成路由widget并返回

注册路由表

main.dart：

// 1. 应用入口
// 2. 接受一个Widget参数
// 3. => 单行函数或方法的简写
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      // 6. 应用名称
      title: '初心一点',
      theme: new ThemeData(
          primarySwatch: Colors.blue
      ),
      // 7. 注册路由表
      routes: {
        "main": (context) => MyHomePage()
      },
      // 4. 首先我们看到的页面是登录页面
      home: LoginPage(),
    );
  }
}

// 8. Stateful widget至少由两个类组成
// 8.1 一个StatefulWidget类
// 8.2 一个 State类
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> {

  @override
  Widget build(BuildContext context) {
    // 9. Material库中提供的页面脚手架
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
    );
  }
}

login.dart：

class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        title: new Text('登录'),
      ),
      body: new Center(
        child: new Column(
          children: <Widget>[
            FlatButton(
              child: Text('登录'),
              textColor: Colors.black,
              onPressed: () {
                // 5. 点击登录按钮，通过路由跳转到主Tab页面
                Navigator.pushNamed(context, "main",
                    arguments: '主tab');
              },
            ),
          ],
        ),
      ),
    );
  }
}

上面路由跳转代码我们可以修改为：

// 旧方式
Navigator.push(context, new MaterialPageRoute(builder: (context) {
		return new MyHomePage(title: '主Tab');
	}
));
// 路由
// Navigator.pushNamed(context, "main");
Navigator.pushNamed(context, "main",
                    arguments: '主Tab');

另外，我们还可以在目标路由页面解析传递参数

// 获取路由参数  
var args = ModalRoute.of(context).settings.arguments
//...省略无关代码

参考链接：路由管理