還記得第一個看到的Flutter組件嗎？

注意：無特殊說明，Flutter版本及Dart版本以下：

• Flutter版本： 1.12.13+hotfix.5
• Dart版本： 2.7.0

MaterialApp

在學習Flutter的過程當中咱們第一個看見的控件應該就是MaterialApp，畢竟建立一個新的Flutter項目的時候，項目第一個組件就是MaterialApp，這是一個Material風格的根控件，基本用法以下：

MaterialApp(
  home: Scaffold(
    appBar: AppBar(
      title: Text('老孟'),
    ),
  ),
)
複製代碼

home參數是App默認顯示的頁面，效果以下：

title參數是應用程序的描述，在Android上，在任務管理器的應用程序快照上面顯示，在IOS上忽略此屬性，IOS上任務管理器應用程序快照上面顯示的是Info.plist文件中的CFBundleDisplayName。若是想根據區域顯示不一樣的描述使用onGenerateTitle，用法以下：

MaterialApp(
  title: '老孟',
  onGenerateTitle: (context) {
    var local = Localizations.localeOf(context);
    if (local.languageCode == 'zh') {
      return '老孟';
    }
    return 'laomeng';
  },
  ...
)
複製代碼

routes、initialRoute、onGenerateRoute、onUnknownRoute是和路由相關的4個屬性，路由簡單的理解就是頁面，路由的管理一般是指頁面的管理，好比跳轉、返回等。

MaterialApp按照以下的規則匹配路由：

1. 路由爲/，home不爲null則使用home。
2. 使用routes指定的路由。
3. 使用onGenerateRoute生成的路由，處理除home和routes之外的路由。
4. 若是上面都不匹配則調用onUnknownRoute。

是否是仍是比較迷糊，沒關係，看下面的例子就明白了：

MaterialApp(
  routes: {
    'container': (context) => ContainerDemo(),
    'fitted': (context) => FittedBoxDemo(),
    'icon': (context) => IconDemo(),
  },
  initialRoute: '/',
  home: Scaffold(
    appBar: AppBar(
      title: Text('老孟'),
    ),
  ),
  onGenerateRoute: (RouteSettings routeSettings){
        print('onGenerateRoute:$routeSettings');
        if(routeSettings.name == 'icon'){
          return MaterialPageRoute(builder: (context){
            return IconDemo();
          });
        }
      },
      onUnknownRoute: (RouteSettings routeSettings){
        print('onUnknownRoute:$routeSettings');
        return MaterialPageRoute(builder: (context){
          return IconDemo();
        });
      },
  ...
)
複製代碼

initialRoute設置爲/，那麼加載home頁面。

若是initialRoute設置爲icon，在routes中存在，因此加載routes中指定的路由，即IconDemo頁面。

若是initialRoute設置爲icons1,此時routes中並不存在名稱爲icons1的路由，調用onGenerateRoute，若是onGenerateRoute返回路由頁面，則加載此頁面，若是返回的是null，且home不爲null，則加載home參數指定的頁面，若是home爲null，則回調onUnknownRoute。

theme、darkTheme、themeMode是關於主題的參數，設置整個App的主題，包括顏色、字體、形狀等，修改主題顏色爲紅色用法以下：

MaterialApp(
  theme: ThemeData(
    primaryColor: Colors.red
  ),
  darkTheme: ThemeData(
      primaryColor: Colors.red
  ),
  themeMode: ThemeMode.dark,
複製代碼

效果以下：

locale、localizationsDelegates、localeListResolutionCallback、localeResolutionCallback、supportedLocales是區域設置和國際化相關的參數，若是App支持多國語言，那麼就須要設置這些參數，默認狀況下，Flutter僅支持美國英語，若是想要添加其餘語言支持則須要指定其餘MaterialApp屬性，並引入flutter_localizations 包，到2019年4月，flutter_localizations包已經支持52種語言，若是你想讓你的應用在iOS上順利運行，那麼你還必須添加「flutter_cupertino_localizations」包。

在pubspec.yaml文件中添加包依賴：

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  flutter_cupertino_localizations: ^1.0.1

複製代碼

設置以下：

MaterialApp(
  localizationsDelegates: [
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate
  ],
  supportedLocales: [
    const Locale('zh', 'CH'),
    const Locale('en', 'US'),
  ],
  ...
)
複製代碼

• GlobalMaterialLocalizations.delegate ：爲Material Components庫提供了本地化的字符串和其餘值。
• GlobalWidgetsLocalizations.delegate：定義widget默認的文本方向，從左到右或從右到左。
• GlobalCupertinoLocalizations.delegate：爲Cupertino（ios風格）庫提供了本地化的字符串和其餘值。

supportedLocales參數指定了當前App支持的語言。

localeResolutionCallback和localeListResolutionCallback都是對語言變化的監聽，好比切換系統語言等，localeResolutionCallback和localeListResolutionCallback的區別是localeResolutionCallback返回的第一個參數是當前語言的Locale，而localeListResolutionCallback返回當前手機支持的語言集合，在早期的版本手機沒有支持語言的集合，只顯示當前語言，在設置->語言和地區的設置選項效果以下：

在早期是沒有紅色區域的。

所以咱們只需使用localeListResolutionCallback便可，經過用戶手機支持的語言和當前App支持的語言返回一個語言選項。

一般狀況下，若是用戶的語言正好是App支持的語言，那麼直接返回此語言，若是不支持，則返回一個默認的語言，用法以下：

MaterialApp(
  localeListResolutionCallback:
      (List<Locale> locales, Iterable<Locale> supportedLocales) {
    if (locales.contains('zh')) {
      return Locale('zh');
    }
    return Locale('en');
  },
  ...
)
複製代碼

在App中也能夠經過以下方法獲取區域設置：

Locale myLocale = Localizations.localeOf(context);
複製代碼

還有幾個方便調試的選項，debugShowMaterialGrid：打開網格調試

MaterialApp(
  debugShowMaterialGrid: true,
複製代碼

效果以下：

showPerformanceOverlay：打開性能檢測

MaterialApp(
  showPerformanceOverlay: true,
複製代碼

效果以下：

右上角有一個DEBUG的標識，這是系統在debug模式下默認顯示的，不顯示的設置以下：

MaterialApp(
  debugShowCheckedModeBanner: true,
  ...
)
複製代碼

CupertinoApp

我想你必定能想到既然有Material風格的MaterialApp，那麼也應該有Cupertino（ios）風格與之相對應，是的Cupertino風格的是CupertinoApp，CupertinoApp的屬性及用法和MaterialApp如出一轍，就不在具體介紹了。

歡迎加入Flutter的微信交流羣(laomengit)，一塊兒學習，一塊兒進步，生活不止眼前的苟且，還有詩和《遠方》。

固然我也很是但願您關注我我的的公衆號，裏面有各類福利等着你們哦。