7-flutter Navigator 和Route

Route 和 Navigator 用于页面之间的跳转

一 Navigator 的 push 和 pop 用于页面之间的跳转

创建MaterialApp时可以指定routes参数，该参数是一个映射路由名称和构造器的Map

跳转的时候 使用 push

跳回的时候使用 pop

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: FirstPage(),
      routes: <String ,WidgetBuilder>{
        '/first':(BuildContext context) =>FirstPage(),
        '/second':(BuildContext context) =>SecondPage()
      },
    );
  }
}

// 第一个页面
class FirstPage extends StatelessWidget
{

  @override
  Widget build(BuildContext context) {
      return new Scaffold(
        appBar:new AppBar(title:new Text( "第一个页面")),
        body:new Center(
            child:new RaisedButton(
              child: new Text("点击打开第二个页面"),
              onPressed: (){
                Navigator.of(context).pushNamed('/second');
              },      
          ),
        ),
      );
  }

}

class SecondPage extends StatelessWidget
{
  
  @override
  Widget build(BuildContext context) {
      return new Scaffold(
        appBar:new AppBar(title:new Text( "第二个页面")),
        body:new Center(
            child:new RaisedButton(
              child: new Text("点击返回"),
              onPressed: (){
                 Navigator.of(context).pop();
              },      
          ),
        ),
      );
  }

}

二 第二种方式

直接使用MaterialPageRoute创建路由，它是一种模态路由，可以通过平台自适应的过渡效果来切换屏幕。默认情况下，当一个模态路由被另一个替换时，上一个路由将保留在内存中，如果想释放所有资源

onPressed: (){
    Navigator.push(context, 
    new MaterialPageRoute(builder: (context) => SecondPage()
    ));                  
}, 

三 示例操作 参数回调

第一个页面点击进去 第二个页面 点击喜欢与否 回传结果

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: NewTableList(),

    );
  }
}


class ContentPage extends StatelessWidget
{

  final HotNews news;
  ContentPage(this.news);

 
  @override
  Widget build(BuildContext context) {
      return new Scaffold(
        appBar:new AppBar(title:new Text(news.title)),
        body:new Padding( 
          padding: new EdgeInsets.all(25),
          child: new Column(
            children: <Widget>[
              new Text(news.content),
              new Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: <Widget>[
                    new RaisedButton(
                      onPressed: (){
                        // 点击的时候 回调用户的选择结果
                        Navigator.pop(context,'Good');
                      },
                      child: new Text("不错"),                      
                    ),
                    new RaisedButton(
                      onPressed: (){
                        // 点击的时候 回调用户的选择结果
                        Navigator.pop(context,'Bad');                       
                      },
                      child:new Text("差劲"),                      
                    )

                  ],
              )

            ],
          ),

        ),
      );
  }
}

// 创建一个新闻的类
class HotNews{
  String title;
  String content;

  HotNews({this.title,this.content});

}

// 创建列表
class NewTableList extends StatelessWidget
{
    final List<HotNews> arrs = new List.generate(20, 
        (idx) => new HotNews(
          title:'这是第 $idx 标题',
          content: '这是第 $idx 部分的正文',
        )
    ); 

    @override 
    Widget build(BuildContext context) {
      return new Scaffold(
          appBar: AppBar(title: Text("热点资讯")),
          body: new ListView.builder(
            itemCount: arrs.length,
            itemBuilder: (context,idx){
                return new ListTile(
                  title: new Text(arrs[idx].title),
                  // 添加一个点击事件
                  onTap: () async {

                    // 创建一个结果 结束用户的点击  
                    String readRes = await Navigator.push(context ,new MaterialPageRoute(
                      builder: (context) => new ContentPage(arrs[idx])));

                    // 显示回传的结果内容
                    if (readRes != null){
                      Scaffold.of(context).showSnackBar(
                        new SnackBar(
                          content: new Text("$readRes"),
                          duration: const Duration(seconds: 2),
                        )
                      );
                    }
                  },                  
                );
            },
          ),         
      );
    }


}