還記得第一個看到的Flutter元件嗎?
阿新 • • 發佈:2020-03-21
![](https://img2020.cnblogs.com/other/467322/202003/467322-20200321171101823-1019065466.png)
> 注意:無特殊說明,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://img2020.cnblogs.com/other/467322/202003/467322-20200321171102779-309080964.png)
`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://img2020.cnblogs.com/other/467322/202003/467322-20200321171103953-260347292.png)
`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://img2020.cnblogs.com/other/467322/202003/467322-20200321171104735-422491332.png)
在早期是沒有紅色區域的。
因此我們只需使用`localeListResolutionCallback`即可,通過使用者手機支援的語言和當前App支援的語言返回一個語言選項。
通常情況下,如果使用者的語言正好是App支援的語言,那麼直接返回此語言,如果不支援,則返回一個預設的語言,用法如下:
```dart
MaterialApp(
localeListResolutionCallback:
(List