3.Flutter打卡-基础知识（2）

路由管理

在web开发中，我们经常会碰到路由这个概念，简单来说，路由就是URL到函数的映射。对于服务器来说，当接收到客户端发来的HTTP请求，会根据请求的URL，来找到相应的路由映射关系，然后执行相应的方法，并将返回值发送给客户端。

那么在Flutter中，路由我们也可以这么理解，就是通过一定的映射关系，来去跳转到指定的页面。在flutter中文网的解释是Route在Android中通常指一个Activity，在iOS中指一个ViewController。所谓路由管理，就是管理页面之间如何跳转，通常也可被称为导航管理。

实例

（1）新建两个页面

import 'package:flutter/material.dart';
import 'newroute.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(),
    );
  }
}


class MyHomePage extends StatelessWidget {
  @override
  Widgetbuild(BuildContext context) {
    return MaterialApp(
        title:'Flutter Demo',
        theme:ThemeData(
          primarySwatch: Colors.blue,
        ),
        home:Scaffold(
          appBar:AppBar(
            title:Text("Welcome to Flutter"),
          ),
          body:Center(
            child:FlatButton(
              child: Text("open new route"),
              textColor: Colors.blue,
              onPressed: () {
                //导航到新路由   
                Navigator.push( context,
                    new MaterialPageRoute(builder: (context) {
                      return new NewRoute();
                    }));
              },
            ),
          ),
        )
    );
  }
}

import 'package:flutter/material.dart';

class NewRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("New route"),
      ),
      body: Center(
        child: Text("This is new route"),
      ),
    );
  }
}

MaterialPageRoute继承自PageRoute类，PageRoute类是一个抽象类，表示占有整个屏幕空间的一个模态路由页面，它还定义了路由构建及切换时过渡动画的相关接口及属性。MaterialPageRoute 是Material组件库的一个Widget，它可以针对不同平台，实现与平台页面切换动画风格一致的路由切换动画：

对于Android，当打开新页面时，新的页面会从屏幕底部滑动到屏幕顶部；当关闭页面时，当前页面会从屏幕顶部滑动到屏幕底部后消失，同时上一个页面会显示到屏幕上。
对于iOS，当打开页面时，新的页面会从屏幕右侧边缘一致滑动到屏幕左边，直到新页面全部显示到屏幕上，而上一个页面则会从当前屏幕滑动到屏幕左侧而消失；当关闭页面时，正好相反，当前页面会从屏幕右侧滑出，同时上一个页面会从屏幕左侧滑入。

注册路由表

我们需要先注册路由表后，我们的Flutter应用才能正确处理命名路由的跳转。注册方式很简单，我们回到之前“计数器”的示例，然后在MyApp类的build方法中找到MaterialApp，添加routes属性，代码如下：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      routes:{
          "new_page":(context)=>NewRoute(),
      } ,
      home: new MyHomePage(),
    );
  }
}

然后，我们就可以通过路由名打开新路由页。

Navigator.pushNamed(context, "new_page");

参考文章：https://book.flutterchina.club/chapter2/flutter_router.html

最后编辑于：2019.10.10 10:00:44