如需轉載，請註明出處：Flutter學習筆記（15）--MaterialApp應用元件及routes路由詳解

最近一段時間生病了，整天往醫院跑，也沒狀態學東西了，現在是好了不少了，也該繼續學習啦！！！

今天給大家講一下MaterialApp應用元件及routes路由詳解，我會著重說一下routes路由的使用及解釋，因為會經常用到，前面我寫的一些demo所涉及到的元件，都是遵循著Material Design設計風格，所謂的Material Design是由Goodle推出的全新的設計語言，這種設計旨在為手機、平板電腦、桌上型電腦和其他平臺更一致、更廣泛的外觀和感覺，接下來我們看一下常見的Material Design風格元件：

Material Design風格的元件有這麼多，不看不知道，一看嚇一跳，這基本上都沒有用過呀，漫漫長征路，還有很遠要走呀，一個一個學吧！！！

• MaterialApp（應用元件）

具體看下程式碼應用：

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

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

class DemoApp extends StatelessWidget{
  //這個是整個應用的主元件
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: 'MaterialApp示例',
      debugShowMaterialGrid: true,
      showPerformanceOverlay: true,
      theme: new ThemeData(
        primaryColor: Colors.deepOrange
      ),
      home: new MaterialAppDemo(),
    );
  }
}

class MaterialAppDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: Text('MaterialAppDemo'),
      ),
      body: new Center(
        child: new Text('MaterialAppDemo'),
      ),
    );
  }
}

效果圖：

demo裡面我主要嘗試了title、theme、home、debugShowMaterialGird、showPerformanceOverlay屬性，根據截圖，給大家直觀的對比一下結果：

title：應用程式的標題（因為我只有Android測試機），可以看到第二張截圖，切到工作管理員，應用程式的標題為MaterialApp示例。

theme：我用theme更改了應用主題的顏色，可以看到第一張截圖導航欄的顏色改為了橙色。

home：home代表著整個頁面的主widget，可以理解為根widget，而home的主體就是一個Center容器元件，然後裡面放一個文字。

debugShowMaterialGird：這個屬性我們設定為了true，頁面展示出來會有很多網格，用於除錯UI（這個要怎麼用來除錯UI，小弟還不會。。。）

showPerformanceOverlay：效能標籤，這個設定為true，在頁面的最上方會出現一些效能相關的資料。

• routes（路由處理）

下面我著重講一下routes路由處理，因為我覺得頁面間的跳轉是最常用到的，而且很重要，下面的demo主要功能是在A頁面點選一個按鈕跳轉到B頁面，並且兩個頁面間傳值。

注：路由跳轉分靜態路由跳轉和動態路由跳轉，兩者的區別就是是否給第二個頁面傳值

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

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

class DemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: 'theme Title',
      debugShowMaterialGrid: false,
      home: new Scaffold(
        appBar: new AppBar(
          leading: Icon(Icons.menu),
          actions: <Widget>[
            Icon(Icons.search)
          ],
          title: new Text('routes demo'),
        ),
        body: new Center(
          child: new Text('主頁'),
        ),
      ),
      routes: {
        '/first':(BuildContext context) => new FirstPage(),
        '/second':(BuildContext context) => new SecondPage(""),
      },
      initialRoute: '/first',//初始化路由為first頁面
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('First Page'),
      ),
      body: new Center(
        child: RaisedButton(
          child: new Text('第一個頁面'),
            onPressed: (){
                //靜態路由跳轉，不給第二個頁面傳值
//              Navigator.pushNamed(context, '/second').then((value){
//                Fluttertoast.showToast(msg: value,toastLength: Toast.LENGTH_LONG,gravity: ToastGravity.BOTTOM);
//              });
              //動態路由跳轉，給第二個頁面傳值
              Navigator.of(context).push(new MaterialPageRoute(builder: (context){
                return new SecondPage('這是從第一個頁面傳遞出去的資料');
              })).then((value){
                Fluttertoast.showToast(msg: value,toastLength: Toast.LENGTH_LONG,gravity: ToastGravity.BOTTOM);
              });
            }
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  var content = '';
  SecondPage(this.content);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Second Page'),
      ),
      body: new RaisedButton(
        child: new Text(content),
          onPressed: (){
//            Navigator.pop(context);//不給上一級頁面返回引數
            Navigator.of(context).pop("這個是從第二個頁面返回的資料");//給上一級頁面返回引數
          }
      ),
    );
  }
}

效果截圖：

來細講一下上面的程式碼吧，要不然還真容易看懵逼了。

1.首先初始化路由列表，為後面頁面跳轉做準備，路由列表對應這每一個頁面

routes: {
        '/first':(BuildContext context) => new FirstPage(),
        '/second':(BuildContext context) => new SecondPage(""),
      },

2.靜態路由跳轉，靜態由A頁面跳轉到B頁面，不給B頁面傳值，但是接收B頁面返回的資料，並將返回值toast出來，即圖3

Navigator.pushNamed(context, '/second').then((value){
                Fluttertoast.showToast(msg: value,toastLength: Toast.LENGTH_LONG,gravity: ToastGravity.BOTTOM);
              });

3.動態路由跳轉，A頁面跳轉到B頁面，並給B頁面傳值，將B頁面的按鈕文案賦值，從B頁面返回後，將B頁面的返回值toast出來，即圖2，圖3

Navigator.of(context).push(new MaterialPageRoute(builder: (context){
                return new SecondPage('這是從第一個頁面傳遞出去的資料');
              })).then((value){
                Fluttertoast.showToast(msg: value,toastLength: Toast.LENGTH_LONG,gravity: ToastGravity.BOTTOM);
              });

4.由B頁面帶資料返回到A頁面（頁面Pop返回有兩類，一類帶引數返回，一類不帶引數返回）

4.1帶引數返回

Navigator.of(context).pop("這個是從第二個頁面返回的資料");//給上一級頁面返回引數

4.2不帶引數返回

Navigator.pop(context);//不給上一級頁面返回引數

注：頁面Pop還有兩個方法常用到

Navigator.canPop(context);//頁面是否可以pop，返回bool值，可以用作頁面判斷
Navigator.maybePop(context);//如果當前頁面可以pop，則會執行，反之則不會執行，更安全

以上就是今天的全部內容了，稍微難一點的就是路由這塊兒了，我寫的demo還是很簡單的，頁面跳轉傳值只是字串，在專案中還會遇到其他型別的資料引數，暫時就先不研究了，等用到的時候在具體細看吧，上面的內容，如果各位有任何疑問，或者發現有錯誤的地方，還望留言！！！

&n