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