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