![](https://upload-images.jianshu.io/upload_images/20353030-08789ceb90f4b3df.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

> 注意：無特殊說明，Flutter版本及Dart版本如下：
> - Flutter版本： 1.12.13+hotfix.5 
> - Dart版本： 2.7.0

## MaterialApp

在學習Flutter的過程中我們第一個看見的控制元件應該就是MaterialApp，畢竟建立一個新的Flutter專案的時候，專案第一個元件就是MaterialApp，這是一個Material風格的根控制元件，基本用法如下：

```dart
MaterialApp(
  home: Scaffold(
    appBar: AppBar(
      title: Text('老孟'),
    ),
  ),
)
```

`home`引數是App預設顯示的頁面，效果如下：

![](https://upload-images.jianshu.io/upload_images/20353030-7feb44120e1da214.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

`title`引數是應用程式的描述，在Android上，在工作管理員的應用程式快照上面顯示，在IOS上忽略此屬性，IOS上工作管理員應用程式快照上面顯示的是`Info.plist`檔案中的`CFBundleDisplayName`。如果想根據區域顯示不同的描述使用`onGenerateTitle`，用法如下：

```dart
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`。

是不是還是比較迷糊，不要緊，看下面的例子就明白了：

```dart
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的主題，包括顏色、字型、形狀等，修改主題顏色為紅色用法如下：

```dart
MaterialApp(
  theme: ThemeData(
    primaryColor: Colors.red
  ),
  darkTheme: ThemeData(
      primaryColor: Colors.red
  ),
  themeMode: ThemeMode.dark,
```

效果如下：

![](https://upload-images.jianshu.io/upload_images/20353030-f36eada8023dca41.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

`locale`、`localizationsDelegates`、`localeListResolutionCallback`、`localeResolutionCallback`、`supportedLocales`是區域設定和國際化相關的引數，如果App支援多國語言，那麼就需要設定這些引數，預設情況下，Flutter僅支援美國英語，如果想要新增其他語言支援則需要指定其他MaterialApp屬性，並引入flutter_localizations 包，到2019年4月，flutter_localizations包已經支援52種語言，如果你想讓你的應用在iOS上順利執行，那麼你還必須新增“flutter_cupertino_localizations”包。

在`pubspec.yaml`檔案中新增包依賴：

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

```

設定如下：

```dart
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`返回當前手機支援的語言集合，在早期的版本手機沒有支援語言的集合，只顯示當前語言，在設定->語言和地區的設定選項效果如下：

![](https://upload-images.jianshu.io/upload_images/20353030-d0297760d362bdd5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

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

因此我們只需使用`localeListResolutionCallback`即可，透過使用者手機支援的語言和當前App支援的語言返回一個語言選項。

通常情況下，如果使用者的語言正好是App支援的語言，那麼直接返回此語言，如果不支援，則返回一個預設的語言，用法如下：

```dart
MaterialApp(
  localeListResolutionCallback:
      (List<locale> locales, Iterable<locale> supportedLocales) {
    if (locales.contains('zh')) {
      return Locale('zh');
    }
    return Locale('en');
  },
  ...
)
```

在App中也可以透過如下方法獲取區域設定：

```dart
Locale myLocale = Localizations.localeOf(context);
```

還有幾個方便除錯的選項，debugShowMaterialGrid：開啟網格除錯

```dart
MaterialApp(
  debugShowMaterialGrid: true,
```

效果如下：

![](https://upload-images.jianshu.io/upload_images/20353030-e176a9d2d5e7fcc3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

showPerformanceOverlay：開啟效能檢測

```dart
MaterialApp(
  showPerformanceOverlay: true,
```

效果如下：

![](https://upload-images.jianshu.io/upload_images/20353030-4764ea64e0a37d45.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

右上角有一個DEBUG的標識，這是系統在debug模式下預設顯示的，不顯示的設定如下：

```dart
MaterialApp(
  debugShowCheckedModeBanner: true,
  ...
)
```

## CupertinoApp

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

歡迎加入Flutter的微信交流群(<font color="red">laomengit</font>)，一起學習，一起進步，生活不止眼前的苟且，還有詩和《遠方》。

當然我也非常希望您關注我個人的公眾號，裡面有各種福利等著大家哦。

![](https://upload-images.jianshu.io/upload_images/20353030-9462936ebcbd6fb1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</locale></locale>

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

相關文章