还记得第一个看到的Flutter组件吗?
注意:无特殊说明,Flutter版本及Dart版本如下:
- Flutter版本: 1.12.13+hotfix.5
- Dart版本: 2.7.0
MaterialApp
在学习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'), ], ... )
- GlobalMaterialLocalizations.delegate :为Material Components库提供了本地化的字符串和其他值。
- GlobalWidgetsLocalizations.delegate:定义widget默认的文本方向,从左到右或从右到左。
- GlobalCupertinoLocalizations.delegate:为Cupertino(ios风格)库提供了本地化的字符串和其他值。
supportedLocales
参数指定了当前App支持的语言。
localeResolutionCallback
和localeListResolutionCallback
都是对语言变化的监听,比如切换系统语言等,localeResolutionCallback
和localeListResolutionCallback
的区别是localeResolutionCallback
返回的第一个参数是当前语言的Locale,而localeListResolutionCallback
返回当前手机支持的语言集合,在早期的版本手机没有支持语言的集合,只显示当前语言,在设置->语言和地区的设置选项效果如下:
在早期是没有红色区域的。
因此我们只需使用localeListResolutionCallback
即可,通过用户手机支持的语言和当前App支持的语言返回一个语言选项。
通常情况下,如果用户的语言正好是App支持的语言,那么直接返回此语言,如果不支持,则返回一个默认的语言,用法如下:
MaterialApp( localeListResolutionCallback: (List<Locale> locales, Iterable<Locale> 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, ... )
CupertinoApp
我想你一定能想到既然有Material风格的MaterialApp,那么也应该有Cupertino(ios)风格与之相对应,是的Cupertino风格的是CupertinoApp,CupertinoApp的属性及用法和MaterialApp一模一样,就不在具体介绍了。
欢迎加入Flutter的微信交流群(laomengit),一起学习,一起进步,生活不止眼前的苟且,还有诗和《远方》。
当然我也非常希望您关注我个人的公众号,里面有各种福利等着大家哦。
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
MrDoc 0.3.3 发布,新增图片管理功能,优化样式,修复 Bug
2020年3月21日,MrDoc迎来0.3.3版本的更新,主要新增的图片管理功能,同时修复了部分Bug,优化了一些样式,让使用更加方便,下面来看看具体的更新内容。 一、新增后台图片管理功能 之前版本的MrDoc可以在编辑文档的时候上传图片(粘贴上传和选择文件上传),但是没有对图片管理的功能。缺少了这个功能,导致我们在编辑文档的时候,即使插入的是同一个图片,却需要不断地上传新的图片;同时,一些删除了文档,里面的图片根本无处寻找。本次更新,着重新增了后台的图片管理功能。 在【个人中心】页面可以进行到【图片素材管理】页面,如下图所示: 在这里,你可以上传新的图片,新建图片分组,对分组进行管理,对某个图片移动其分组,删除某个图片,查看某个图片的原图等: 二、前台编辑器可以选择图片 自带的Markdown编辑器中有图片上传的组件,但是却只能上传新的图片文件。本次更新,州的先生重写了一个新的前台图片上传模块,支持上传新的文件和选择已有的图片文件: 三、优化文档阅读页面目录样式 在之前的版本中,文档阅读页面使用的是Editormd自带的目录样式,只出现在文档开始。对很多朋友来说,这样有些许鸡肋。本次...
- 下一篇
Java并发编程学习前期知识下篇
Java并发编程学习前期知识下篇 通过上一篇《Java并发编程学习前期知识上篇》我们知道了在Java并发中的可见性是什么?volatile的定义以及JMM的定义。我们先来看看几个大厂真实的面试题: 编辑 编辑 编辑 从上面几个真实的面试问题来看,我们可以看到大厂的面试都会问到并发相关的问题。所以 Java并发,这个无论是面试还是在工作中,并发都是会遇到的。Java并发包JUC(java.util.concurrent)有了解过哪些?并发包实现最重要的是什么?其原理是什么知道吗?何为JMM的可见性?volatiile关键字是怎么实现变量可见性的?如果想要学好并发,弄懂理解透彻的话,凯哥觉得以下计算机的知识还是要了解了解。本次《Java并发编程-前期准备知识》凯哥准备用两篇来介绍,主要包括以下内容:简单介绍内存之间可见性是什么?volatile关键字在Java语言规范中是怎么定义的?知道JVM但是你知道JMM是什么吗?计算机中CPU是怎么处理数据的?通过CPU处理数据来深刻理解线程之间可见性。还有就是volatile是怎么保证可见性的呢?其实现的两条原理是什么? CPU相关知识 先来看看凯...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- CentOS8编译安装MySQL8.0.19
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- SpringBoot2初体验,简单认识spring boot2并且搭建基础工程
- CentOS8安装Docker,最新的服务器搭配容器使用
- CentOS7,CentOS8安装Elasticsearch6.8.6
- Red5直播服务器,属于Java语言的直播服务器
- CentOS8安装MyCat,轻松搞定数据库的读写分离、垂直分库、水平分库
- Hadoop3单机部署,实现最简伪集群
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
- CentOS7编译安装Cmake3.16.3,解决mysql等软件编译问题