Flutter(四)- Navigator 的使用

 上一次我们创建了 Counter 计数器实例，关于  Navigator 使用在其基础上做以修改：

代码如下：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Counter(),
    );
  }
}

class Counter extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _CounterState();
  }
}

class _CounterState extends State<Counter> {
  int _counter = 0;

  void _increment() {
    setState(() {
      _counter++;
    });
  }

  void _min() {
    setState(() {
      _counter--;
    });
  }


  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('Counter'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Counter is '),
            Text('$_counter'),
            Center(
              child: Center(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    RaisedButton(
                      onPressed: _min,
                      child: Text('min'),
                    ),
                    Container(
                      padding: const EdgeInsets.fromLTRB(16.0, 0, 0, 0),
                      child:  RaisedButton(
                        onPressed: _increment,
                        child: Text('add'),
                      ),
                    ),
                  ],
                ),
              ),
            ),
            RaisedButton(
              child: Text("跳转到页面测试Router"),
              onPressed: (){
                Navigator.push(context, new MaterialPageRoute(builder: (context){
                   return Router();
                }));
              },
            ),
          ],
        ),
      ),
    );
  }
}

class Router extends StatelessWidget{
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text('Router'),
          ),
          body: Container(
            alignment: Alignment.center,
            child: RaisedButton(onPressed: (){
              Navigator.pop(context);
            },child: Text("返回上一个页面"),),
          ),
        ),
    );
  }

}

创建一个  Router 这个是要跳转到 的widget 相当于原生的activity：

class Router extends StatelessWidget{
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text('Router'),
          ),
          body: Container(
            alignment: Alignment.center,
            child: RaisedButton(onPressed: (){
              Navigator.pop(context);
            },child: Text("返回上一个页面"),),
          ),
        ),
    );
  }

在counter 计数器实例上添加了一个button:

 RaisedButton(
              child: Text("跳转到页面测试Router"),
              onPressed: (){
                Navigator.push(context, new MaterialPageRoute(builder: (context){
                   return Router();
                }));
              },
            )

Navigator.push(context, new MaterialPageRoute(builder: (context){
   return Router();

这段代码是用来跳转到第二个页面 ：返回到上一个的页面 

Navigator.pop(context);

可以看出Navigator 是一个路由的管理widget,

官方的解释： A widget that manages a set of child widgets with a stack discipline.

 MaterialPageRoute({
    WidgetBuilder builder,
    RouteSettings settings,
    bool maintainState = true,
    bool fullscreenDialog = false,
  })

这个widget 用来配置路由 ，看看几个参数：

• builder 是一个WidgetBuilder类型的回调函数，它的作用是构建路由页面的具体内容，返回值是一个widget。我们通常要实现此回调，返回新路由的实例。
• settings 包含路由的配置信息，如路由名称、是否初始路由（首页）。
• maintainState：默认情况下，当入栈一个新路由时，原来的路由仍然会被保存在内存中，如果想在路由没用的时候释放其所占用的所有资源，可以设置maintainState为false。
• fullscreenDialog表示新的路由页面是否是一个全屏的模态对话框，在iOS中，如果fullscreenDialog为true，新页面将会从屏幕底部滑入（而不是水平方向）。

来自官网的说明

const RouteSettings({
  this.name,
  this.isInitialRoute = false,
  this.arguments,
});

name: 路由的名称 （“/xxx”）

isInitialRoute：是否是初始路由

The arguments passed to this route :路由参数

 

    new MaterialPageRoute(
                        builder: (context) {
                          return Router();
                        },
                        settings: RouteSettings(
                            name: '/router', arguments: "router")));

路由参数获取：

   Text("获取路由参数："+ModalRoute.of(context).settings.arguments),

打印：router