Flutter 控制元件之 MaterialApp 【1】
MaterialApp 代表使用紙墨設計（Material Design）風格的應用。裡面包含了紙墨設計風格應用所需要的基本控制元件。
MaterialApp 主要屬性如下：
- title ： 在任務管理視窗中所顯示的應用名字
- theme ： 應用各種 UI 所使用的主題顏色
- color ： 應用的主要顏色值（primary color），也就是安卓任務管理視窗中所顯示的應用顏色
- home ： 應用預設所顯示的介面 Widget
- routes ： 應用的頂級導航表格，這個是多頁面應用用來控制頁面跳轉的，類似於網頁的網址
- initialRoute ：第一個顯示的路由名字，預設值為 Window.defaultRouteName
- onGenerateRoute ： 生成路由的回撥函式，當導航的命名路由的時候，會使用這個來生成介面
- onLocaleChanged ： 當系統修改語言的時候，會觸發å這個回撥
- navigatorObservers ： 應用 Navigator 的監聽器
- debugShowMaterialGrid ： 是否顯示 紙墨設計 基礎佈局網格，用來除錯 UI 的工具
- showPerformanceOverlay ： 顯示效能標籤，https://flutter.io/debugging/#performanceoverlay
- checkerboardRasterCacheImages 、showSemanticsDebugger、debugShowCheckedModeBanner 各種除錯開關
下面將介紹重要的幾個屬性。
title
這個和啟動圖示名字是不一樣的，和當前 Activity 的名字也是不一樣的。 這個 Title 是用來定義任務管理視窗介面所看到應用名字的。在原生 Android 系統中點選圓圈 Home 按鈕右邊的方塊按鈕就會開啟多工切換視窗。
theme
定義應用所使用的主題顏色，在紙墨設計中定義了 primaryColor、accentColor、hintColor 等顏色值。可以通過這個來指定一個 ThemeData 定義應用中每個控制元件的顏色。
home
這個是一個 Widget 物件，用來定義當前應用開啟的時候，所顯示的介面。
color
定義系統中該應用的主要顏色
routes
定義應用中頁面跳轉規則。 該物件是一個 Map<String, WidgetBuilder>。
當使用 Navigator.pushNamed 來路由的時候，會在 routes 查詢路由名字，然後使用 對應的 WidgetBuilder 來構造一個帶有頁面切換動畫的 MaterialPageRoute。如果應用只有一個介面，則不用設定這個屬性，使用 home 設定這個介面即可。
如果 home 不為 null，當 routes 中包含 Navigator.defaultRouteName（'/'） 的時候會出錯，兩個都是 home 衝突了。
如果所查詢的路由在 routes 中不存在，則會通過 onGenerateRoute 來查詢。
initialRoute
指定預設顯示的路由名字，預設值為 Window.defaultRouteName
onGenerateRoute
路由回撥函式
比如，我們可以做如下修改：
Java
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
class MyApp extends StatelessWidget { final Map<String, WidgetBuilder> _routes = <String, WidgetBuilder>{ Navigator.defaultRouteName: (context) => new MyHomePage(title: 'Flutter Demo Home Page') };
// This widget is the root of your application. @override Widget build(BuildContext context) { return new MaterialApp( title: 'Flutter App', debugShowMaterialGrid: true, routes: _routes, theme: new ThemeData( // This is the theme of your application. // // Try running your application with "flutter run". You'll see // the application has a blue toolbar. Then, without quitting // the app, try changing the primarySwatch below to Colors.green // and then invoke "hot reload" (press "r" in the console where // you ran "flutter run", or press Run > Hot Reload App in IntelliJ). // Notice that the counter didn't reset back to zero -- the application // is not restarted. primarySwatch: Colors.cyan, ), // 使用 _routes 中定義的 預設路由來替代 home //home: new MyHomePage(title: 'Flutter Demo Home Page'), ); } }
|
修改了 title、home 被註釋了使用 routes 來替代，同時顯示了紙墨設計基礎網格線來檢視 UI 佈局是否符合紙墨設計規範。
執行介面如下：
請注意在任務管理視窗中，App顯示的名字已經修改為 Flutter App 了。