Flutter 系列文章：Flutter MaterialApp 控件介紹

1、控件介紹

一個用於材料設計的容器組件，是咱們定義子控件的一個容器，它的構造函數裏面雖然有多個參數，可是基本上大多數參數都是能夠省略的。

2、使用方法

MaterialApp(
      title: 'TabBar', //用於爲用戶識別應用程序的單行描述
      theme: ThemeData(
        //應用各類 UI 所使用的主題顏色
        primarySwatch: Colors.red,
      ),
      color: Colors.red, //操做系統界面中用於應用程序的主要顏色,在Android上，這是應用程序切換器中應用程序使用的顏色。
      home: MaterialAppDemo(), //MaterialApp 顯示的主界面
      routes: <String, WidgetBuilder>{
        // 應用的頂級導航表格，這個是多頁面應用用來控制頁面跳轉的，相似於網頁的網址
        "/MaterialApp": (BuildContext context) => TabBarView(),
      },
      initialRoute: '', //第一個顯示的路由名字，默認值爲 Window.defaultRouteName
      navigatorObservers: List<NavigatorObserver>(),
      debugShowMaterialGrid: false, //是否顯示 紙墨設計 基礎佈局網格，用來調試 UI 的工具
// showPerformanceOverlay:true,//顯示性能標籤，https://flutter.io/debugging/#performanceoverlay
// showSemanticsDebugger: true,
// debugShowCheckedModeBanner: true,//性能調試工具
    )
  
複製代碼

3、經常使用屬性

1.設置titile,這個和啓動圖標名字是不同的，和當前 Activity 的名字也是不同的。 這個 Title 是用來定義任務管理窗口界面所看到應用名字的。在原生 Android 系統中點擊圓圈 Home 按鈕右邊的方塊按鈕就會打開多任務切換窗口。

title: 'MaterialApp',//用於爲用戶識別應用程序的單行描述
複製代碼

2.定義應用所使用的主題顏色，在材料設計中定義了 primaryColor、accentColor、hintColor 等顏色值。能夠經過這個來指定一個 ThemeData 定義應用中每一個控件的顏色。

theme: ThemeData(
    //應用各類 UI 所使用的主題顏色
    primarySwatch: Colors.red,
  ),

複製代碼

三、定義主界面的顯示控件，這個是一個 Widget 對象，用來定義當前應用打開的時候，所顯示的界面。

home: MaterialAppDemo(), //MaterialApp 顯示的主界面
 
 class MaterialAppDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Material Appbar'),
      ),
      body: Center(
        child: Text('MaterialApp Demo'),
      ),
    );
  }
}

複製代碼

四、定義頁面跳轉的路由規則，定義應用中頁面跳轉規則。 該對象是一個 Map<String, WidgetBuilder>。 當使用 Navigator.pushNamed 來路由的時候，會在 routes 查找路由名字，而後使用 對應的 WidgetBuilder 來構造一個帶有頁面切換動畫的 MaterialPageRoute。若是應用只有一個界面，則不用設置這個屬性，使用 home 設置這個界面便可。

routes: <String, WidgetBuilder>{
    // 應用的頂級導航表格，這個是多頁面應用用來控制頁面跳轉的，相似於網頁的網址
    "/MaterialApp": (BuildContext context) => TabBarView(),
  },

複製代碼

五、一系列調試工具

debugShowMaterialGrid: false, //是否顯示 材料設計 基礎佈局網格，用來調試 UI 的工具

複製代碼

showPerformanceOverlay:
      true, // 顯示性能標籤，https://flutter.io/debugging/#performanceoverlay
  showSemanticsDebugger: true,
  debugShowCheckedModeBanner: true,//性能調試工具

複製代碼

4、一個完整的例子

import 'dart:ui';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      title: 'MaterialApp', //用於爲用戶識別應用程序的單行描述
      theme: ThemeData(
        //應用各類 UI 所使用的主題顏色
        primarySwatch: Colors.red,
      ),
      color: Colors.red, //操做系統界面中用於應用程序的主要顏色,在Android上，這是應用程序切換器中應用程序使用的顏色。
      home: MaterialAppDemo(), //MaterialApp 顯示的主界面
      routes: <String, WidgetBuilder>{
        // 應用的頂級導航表格，這個是多頁面應用用來控制頁面跳轉的，相似於網頁的網址
        "/MaterialApp": (BuildContext context) => TabBarView(),
      },
      initialRoute: '', //第一個顯示的路由名字，默認值爲 Window.defaultRouteName
      navigatorObservers: List<NavigatorObserver>(),
      debugShowMaterialGrid: false, //是否顯示 材料設計 基礎佈局網格，用來調試 UI 的工具
// showPerformanceOverlay:
// true, // 顯示性能標籤，https://flutter.io/debugging/#performanceoverlay
// showSemanticsDebugger: true,
// debugShowCheckedModeBanner: true,//性能調試工具
    ));

class MaterialAppDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Material Appbar'),
      ),
      body: Center(
        child: Text('MaterialApp Demo'),
      ),
    );
  }
}

複製代碼