注意:无特殊说明,Flutter版本及Dart版本如下:
目前创新互联建站已为上千家的企业提供了网站建设、域名、网络空间、网站托管、服务器托管、企业网站设计、天山网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。
- Flutter版本: 1.12.13+hotfix.5
- Dart版本: 2.7.0
在学习Flutter的过程中我们第一个看见的控件应该就是MaterialApp,毕竟创建一个新的Flutter项目的时候,项目第一个组件就是MaterialApp,这是一个Material风格的根控件,基本用法如下:
MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('老孟'),
),
),
)
home
参数是App默认显示的页面,效果如下:
title
参数是应用程序的描述,在Android上,在任务管理器的应用程序快照上面显示,在IOS上忽略此属性,IOS上任务管理器应用程序快照上面显示的是
Info.plist
文件中的
CFBundleDisplayName
。如果想根据区域显示不同的描述使用
onGenerateTitle
,用法如下:
MaterialApp(
title: '老孟',
onGenerateTitle: (context) {
var local = Localizations.localeOf(context);
if (local.languageCode == 'zh') {
return '老孟';
}
return 'laomeng';
},
...
)
routes
、
initialRoute
、
onGenerateRoute
、
onUnknownRoute
是和路由相关的4个属性,路由简单的理解就是页面,路由的管理通常是指页面的管理,比如跳转、返回等。
MaterialApp按照如下的规则匹配路由:
/
,
home
不为null则使用
home
。routes
指定的路由。onGenerateRoute
生成的路由,处理除
home
和
routes
以外的路由。onUnknownRoute
。是不是还是比较迷糊,不要紧,看下面的例子就明白了:
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的主题,包括颜色、字体、形状等,修改主题颜色为红色用法如下:
MaterialApp(
theme: ThemeData(
primaryColor: Colors.red
),
darkTheme: ThemeData(
primaryColor: Colors.red
),
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(
localizationsDelegates: [
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
GlobalCupertinoLocalizations.delegate
],
supportedLocales: [
const Locale('zh', 'CH'),
const Locale('en', 'US'),
],
...
)
supportedLocales
参数指定了当前App支持的语言。
localeResolutionCallback
和
localeListResolutionCallback
都是对语言变化的监听,比如切换系统语言等,
localeResolutionCallback
和
localeListResolutionCallback
的区别是
localeResolutionCallback
返回的第一个参数是当前语言的Locale,而
localeListResolutionCallback
返回当前手机支持的语言集合,在早期的版本手机没有支持语言的集合,只显示当前语言,在设置->语言和地区的设置选项效果如下:
在早期是没有红色区域的。
因此我们只需使用
localeListResolutionCallback
即可,通过用户手机支持的语言和当前App支持的语言返回一个语言选项。
通常情况下,如果用户的语言正好是App支持的语言,那么直接返回此语言,如果不支持,则返回一个默认的语言,用法如下:
MaterialApp(
localeListResolutionCallback:
(List locales, Iterable supportedLocales) {
if (locales.contains('zh')) {
return Locale('zh');
}
return Locale('en');
},
...
)
在App中也可以通过如下方法获取区域设置:
Locale myLocale = Localizations.localeOf(context);
还有几个方便调试的选项,debugShowMaterialGrid:打开网格调试
MaterialApp(
debugShowMaterialGrid: true,
效果如下:
showPerformanceOverlay:打开性能检测
MaterialApp(
showPerformanceOverlay: true,
效果如下:
右上角有一个DEBUG的标识,这是系统在debug模式下默认显示的,不显示的设置如下:
MaterialApp(
debugShowCheckedModeBanner: true,
...
)
我想你一定能想到既然有Material风格的MaterialApp,那么也应该有Cupertino(ios)风格与之相对应,是的Cupertino风格的是CupertinoApp,CupertinoApp的属性及用法和MaterialApp一模一样,就不在具体介绍了。
欢迎加入Flutter的微信交流群( laomengit),一起学习,一起进步,生活不止眼前的苟且,还有诗和《远方》。
当然我也非常希望您关注我个人的公众号,里面有各种福利等着大家哦。
本文标题:还记得第一个看到的Flutter组件吗?-创新互联
分享地址:http://www.cdkjz.cn/article/ddogpc.html