Flutter之WidgetsApp使用詳解&與MaterialApp的糾纏

如需轉載，請尊重做者，註明出處，謝謝配合！

未通過改裝的MaterialApp 能夠說MaterialApp基於WidgetsApp

若是對MaterialApp不熟悉，可先看我上一篇文章： Flutter之MaterialApp使用詳解

與MaterialApp相比

18個相同字段:

字段	類型
navigatorKey（導航鍵）	GlobalKey
onGenerateRoute（生成路由）	RouteFactory
onUnknownRoute（未知路由）	RouteFactory
navigatorObservers（導航觀察器）	List
initialRoute（初始路由）	String
builder（建造者）	TransitionBuilder
title（標題）	String
onGenerateTitle（生成標題）	GenerateAppTitle
color（顏色）	Color
locale(地點)	Locale
localizationsDelegates（本地化委託）	Iterable<LocalizationsDelegate>
localeResolutionCallback（區域分辨回調）	LocaleResolutionCallback
supportedLocales（支持區域）	Iterable
showPerformanceOverlay（顯示性能疊加）	bool
checkerboardRasterCacheImages（棋盤格光柵緩存圖像）	bool
checkerboardOffscreenLayers（棋盤格層）	bool
showSemanticsDebugger（顯示語義調試器）	bool
debugShowCheckedModeBanner（調試顯示檢查模式橫幅）	bool

WidgetsApp特有的字段：

字段	類型
textStyle（文字樣式）	TextStyle
debugShowWidgetInspector（調試小部件檢測）	bool
inspectorSelectButtonBuilder（審查員選擇按鈕生成器）	InspectorSelectButtonBuilder

MaterialApp特有的字段：

字段	類型
home（主頁）	Widget
routes（路由）	Map<String, WidgetBuilder>
theme（主題）	ThemeData
debugShowMaterialGrid（調試顯示材質網格）	bool

先來介紹WidgetsApp特有的字段吧！

1. textStyle

爲應用中的文本使用的默認樣式

使用

//該段代碼源自flutter/material/app.dart
//由於MaterialApp都是使用Theme裏面的主題色，而且通常部件使用的是MaterialApp部件，因此該textStyle爲報錯文字的顏色
const TextStyle _errorTextStyle= const TextStyle(
  color: const Color(0xD0FF0000),
  fontFamily: 'monospace',
  fontSize: 48.0,
  fontWeight: FontWeight.w900,
  decoration: TextDecoration.underline,
  decorationColor: const Color(0xFFFFFF00),
  decorationStyle: TextDecorationStyle.double,
  debugLabel: 'fallback style; consider putting your text in a Material',
);
new WidgetsApp(
      color: Colors.grey,
      textStyle: _myTextStyle ,
    );
複製代碼

2. debugShowWidgetInspector

當爲true時，打開檢查覆蓋，該字段只能在檢查模式下可用

3. inspectorSelectButtonBuilder

構建一個視圖與視圖切換的小部件，能夠經過該小部件或按鈕切換到檢查模式（debugShowWidgetInspector==true時纔有效，點擊該按鈕以後再點擊你要檢查的視圖）

new WidgetsApp(
      debugShowWidgetInspector: true,
      inspectorSelectButtonBuilder: (BuildContext context, VoidCallback onPressed) {
          return new FloatingActionButton(
            child: const Icon(Icons.search),
            onPressed: onPressed,
            mini: true,
          );
        },
    );
複製代碼

如今介紹一下MaterialApp特有的字段究竟對WidgetsApp作了什麼？

4. home

該字段在MaterialApp中調用的是WidgetsApp的onGenerateRoute 當參數setting.name爲Navigator.defaultRouteName(即"/")時返回home的Widget 因此能夠推測當程序啓動時，會調用一個以"/"爲路由名的Widget 下面來看一段源碼

Route<dynamic> _onGenerateRoute(RouteSettings settings) {
    final String name = settings.name;
    WidgetBuilder builder;
//判斷當前home字段不爲空，並且name爲Navigator.defaultRouteName
//返回home字段的Widget
    if (name == Navigator.defaultRouteName && widget.home != null) {
      builder = (BuildContext context) => widget.home;
    } else {
//這裏查找路由對應的Widget，即爲routes字段傳入的map
      builder = widget.routes[name];
    }
    if (builder != null) {
//能夠看到默認是使用MaterialPageRoute的切換界面動畫
      return new MaterialPageRoute<dynamic>(
        builder: builder,
        settings: settings,
      );
    }
    if (widget.onGenerateRoute != null)
      return widget.onGenerateRoute(settings);
    return null;
  }
//下面這裏有部分省略
    new WidgetsApp(
        onGenerateRoute: _haveNavigator ? _onGenerateRoute : null,
      )
複製代碼

5. routes

這個字段上面源碼已經解釋的很清楚 就是在 _onGenerateRoute方法裏面查找合適的路由 查找不到纔在自身字段onGenerateRoute裏面查找

6. theme

該主題主要傳入到AnimatedTheme這個部件中，最終傳入Theme 用於做爲MaterialAPP裏面的Widget的主題 通常使用BottomNavigationBar、AppBar這些部件，會應用到這個主題

//若是爲空使用默認光亮主題
final ThemeData theme = widget.theme ?? new ThemeData.fallback();
//factory ThemeData.fallback() => new ThemeData.light();
    Widget result = new AnimatedTheme(
      data: theme,
      isMaterialAppTheme: true,
      child: new WidgetsApp(
        key: new GlobalObjectKey(this),
      //..........
      )
    );
複製代碼

7. debugShowMaterialGrid

該字段開啓後，會在WidgetsApp外層包裹GridPaper，這個部件主要顯示網格

assert(() {
      if (widget.debugShowMaterialGrid) {
        result = new GridPaper(
          color: const Color(0xE0F9BBE0),
          interval: 8.0,
          divisions: 2,
          subdivisions: 1,
          child: result,
        );
      }
      return true;
    }());
複製代碼