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),
                        )
                      );
                    }
                  },                  
                );
            },
          ),         
      );
    }


}