19、 Flutter Widgets 之 MaterialApp-有解無憂

MaterialApp

MaterialApp 代表使用紙墨設計（Material Design）風格的應用，里面包含了紙墨設計風格應用所需要的基本控制元件，

MaterialApp 主要屬性如下：

title ：在任務管理視窗中所顯示的應用名字
theme ：應用各種 UI 所使用的主題顏色
color ：應用的主要顏色值（primary color），也就是安卓任務管理視窗中所顯示的應用顏色
home ：應用默認所顯示的界面 Widget
routes ：應用的頂級導航表格，這個是多頁面應用用來控制頁面跳轉的，類似于網頁的網址
initialRoute ：第一個顯示的路由名字，默認值為 Navigator.defaultRouteName
onGenerateRoute ：生成路由的回呼函式，當導航的命名路由的時候，會使用這個來生成界面
onLocaleChanged ：當系統修改語言的時候，會觸發這個回呼
navigatorObservers ：應用 Navigator 的監聽器
debugShowMaterialGrid ：是否顯示紙墨設計基礎布局網格，用來除錯 UI 的工具
showPerformanceOverlay ：顯示性能標簽
debugShowCheckedModeBanner ：是否顯示右上角DEBUG標簽（除錯開關）
checkerboardRasterCacheImages ：檢查快取的影像開關，檢測在界面重繪時頻繁閃爍的影像（除錯開關）
showSemanticsDebugger ：是否打開Widget邊框，類似Android開發者模式中顯示布局邊界（除錯開關）

下面將介紹重要的幾個屬性，

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

MaterialApp(
    title: 'flutter',
    onGenerateTitle: (context){
      var local = Localizations.localeOf(context);
      if(local.languageCode=='zh'){
        return 'flutter 學習';
      }
      return 'flutter study';
    },
   ...

  )

routes、initialRoute、onGenerateRoute、onUnknownRoute是和路由相關的4個屬性，路由簡單的理解就是頁面，路由的管理通常是指頁面的管理，比如跳轉、回傳等，

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

路由為/，home不為null則使用home，
使用routes指定的路由，
使用onGenerateRoute生成的路由，處理除home和routes以外的路由，
如果上面都不匹配則呼叫onUnknownRoute，

 MaterialApp(
    title: 'flutter',
    onGenerateTitle: (context){
      var local = Localizations.localeOf(context);
      if(local.languageCode=='zh'){
        return 'flutter 學習';
      }
      return 'flutter study';
    },
    theme: ThemeData(primaryColor: Colors.blue),
    home: MyHomePage(
      title: "首頁",
    ),
    routes: <String, WidgetBuilder>{
      'less': (BuildContext context) => StatefullGroup(),
      'photo': (BuildContext context) => PhotoAppDemo(),
    },
    initialRoute: '/',
    onGenerateRoute:(RouteSettings routeSettings){
      print('onGenerateRoute:$routeSettings');
      if(routeSettings.name =='less'){
        return MaterialPageRoute(builder: (context){
          return StatefullGroup();
        });
      }
    } ,
    onUnknownRoute: (RouteSettings routeSettings){
      print('onUnknownRoute:$routeSettings');
      return MaterialPageRoute(builder: (context){
        return PhotoAppDemo();
      });
    },

  )

如果initialRoute設定為less1,此時routes中并不存在名稱為less1的路由，呼叫onGenerateRoute，如果onGenerateRoute回傳路由頁面，則加載此頁面，如果回傳的是null，且home不為null，則加載home引數指定的頁面，如果home為null，則回呼onUnknownRoute，

theme、darkTheme、themeMode是關于主題的引數，設定整個App的主題，包括顏色、字體、形狀等，修改主題顏色為紅色用法如下：

MaterialApp(
  theme: ThemeData(
    primaryColor: Colors.blue
  ),
  darkTheme: ThemeData(
      primaryColor: Colors.blue
  ),
  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設定：

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支持的語言，那么直接回傳此語言，如果不支持，則回傳一個默認的語言，用法如下：

 localeListResolutionCallback: (locales, supportedLocales) {
      print('當前系統語言環境:$locales');
      if (locales!.contains('zh')) {
        return Locale('zh');
      }
      return Locale('en');
    },

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

  debugShowMaterialGrid: true,

showPerformanceOverlay：打開性能檢測

    showPerformanceOverlay: true,

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

  debugShowCheckedModeBanner: true,

CupertinoApp

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

基本構造方法：

const CupertinoApp({
    Key? key,
    this.navigatorKey,
    this.home,
    this.theme,
    Map<String, Widget Function(BuildContext)> this.routes = const <String, WidgetBuilder>{},
    this.initialRoute,
    this.onGenerateRoute,
    this.onGenerateInitialRoutes,
    this.onUnknownRoute,
    List<NavigatorObserver> this.navigatorObservers = const <NavigatorObserver>[],
    this.builder,
    this.title = '',
    this.onGenerateTitle,
    this.color,
    this.locale,
    this.localizationsDelegates,
    this.localeListResolutionCallback,
    this.localeResolutionCallback,
    this.supportedLocales = const <Locale>[Locale('en', 'US')],
    this.showPerformanceOverlay = false,
    this.checkerboardRasterCacheImages = false,
    this.checkerboardOffscreenLayers = false,
    this.showSemanticsDebugger = false,
    this.debugShowCheckedModeBanner = true,
    this.shortcuts,
    this.actions,
    this.restorationScopeId,
    this.scrollBehavior,
    this.useInheritedMediaQuery = false,）

demo原始碼地址：flutter_demo: flutter組件測驗學習demo

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/404166.html

標籤：其他

上一篇：利用hls.js實作ios端和安卓端視頻直播fls流播放。

下一篇：Android 從底部彈出三級(省市區)選擇器