Flutter中深入了解MaterialApp,常用属性解析

一、Flutter中结构图

在这里插入图片描述

Flutter Framework
FoundationAnimationPaintingGestures合成了Dart UI层,对应的是Flutter中 dart:ui 包,对应的含义是动画、手势、绘制能力。
Rendering层是一个抽象布局层,依赖于Dart UI层,Rendering层会构建一个UI树、当UI树有变化时,会计算出有变化的部分,然后更新UI树,最终绘制在屏幕上
Widgets层是Flutter提供的一套基础组件库
Material、Cupertino是Flutter提供了两种视觉风格的组件库(Android、iOS)

Flutter Engine
这是一个纯C++实现的SDK,主要执行相关的渲染、线程管理、平台事件等操作。其中包括了Skia引擎、Dart运行时、文字排版引擎等。在调用dart:ui库是,其实最终会走到Engine层,实现真正的绘制逻辑

Flutter Embedder
提供四个Task Runner,将引擎一直到平台中间层代码的渲染设置、原生插件、打包、线程管理、时间循环、交互操作等。

二、Material介绍

MaterialApp 包含了许多的 Widget ,这些 Widget 通常是实现 Material Design
的应用程序所必须要的,包含的 Widget 可以在 Material Components widgets 中查看所有。

字段属性描述
navigatorKeyGlobalKey<NavigatorState>导航键
scaffoldMessengerKeyGlobalKey<ScaffoldMessengerState>脚手架键
homeWidget主页,应用打开时显示的页面
routesMap<String, WidgetBuilder>应用程序顶级路由表
initialRouteString如果构建了导航器,则会显示第一个路由的名称
onGenerateRouteRouteFactory路由管理拦截器
onGenerateInitialRoutesInitialRouteListFactory生成初始化路由
onUnknownRouteRouteFactory当onGenerateRoute无法生成路由时调用
navigatorObserversList<NavigatorObserver>创建导航器的观察者列表
builderTransitionBuilder在导航器上面插入小部件
titleString程序切换时显示的标题
onGenerateTitleGenerateAppTitle程序切换时生成标题字符串
colorColor程序切换时应用图标背景颜色(仅安卓有效)
themeThemeData主题颜色
darkThemeThemeData暗黑模式主题颜色
highContrastThemeThemeData系统请求“高对比度”使用的主题
highContrastDarkThemeThemeData系统请求“高对比度”暗黑模式下使用的主题颜色
themeModeThemeMode使用哪种模式的主题(默认跟随系统)
localeLocale初始区域设置
localizationsDelegatesIterable<LocalizationsDelegate<dynamic>>本地化代理
localeListResolutionCallbackLocaleListResolutionCallback失败或未提供设备的语言环境
localeResolutionCallbackLocaleResolutionCallback负责计算语言环境
supportedLocalesIterable<Locale>本地化地区列表
debugShowMaterialGridbool绘制基线网格叠加层(仅debug模式)
showPerformanceOverlaybool显示性能叠加
checkerboardRasterCacheImagesbool打开栅格缓存图像的棋盘格。
checkerboardOffscreenLayersbool打开渲染到屏幕外位图的层的棋盘格。
showSemanticsDebuggerbool打开显示可访问性信息的叠加层
debugShowCheckedModeBannerbool调试显示检查模式横幅
shortcutsMap<LogicalKeySet, Intent>应用程序意图的键盘快捷键的默认映射。
actionsMap<Type, Action<Intent>>包含和定义用户操作的映射
restorationScopeIdString应用程序状态恢复的标识符
scrollBehaviorScrollBehavior可滚动小部件的行为方式
三、属性解析
1.navigatorKey

navigatorKey 相当于 Navigator.of(context) ,如果应用程序想实现无 context 跳转,那么可以通过设置该key, 通过 navigatorKey.currentState.overlay.context 获取全局context

使用方式

GlobalKey<NavigatorState> navigatorKey = new GlobalKey();
navigatorKey: navigatorKey ,
2.home

传入Widget组件,显示第一个页面

3.debugShowCheckedModeBanner

调试显示检查模式横幅,一般设置为false

debugShowCheckedModeBanner: false,
4.onGenerateRoute

当跳转路由时,如果在 routes 找不到对应的 key ,会执行该回调,会调用会返回一个 RouteSettings ,该对象中有 name 路由名称、 arguments 路由参数。

//在之前的文章中讲过如何进行统一路由配置
onGenerateRoute: AppRouteManager.getInstance().onGenerateRoute,
5.initialRoute

初始路由,如果设置了该参数并且在 routes 找到了对应的key,将会展示对应的 Widget ,否则展示 home

 MaterialApp(
   routes: {
     "/home": (_) => Home(),
     "/my": (_) => My()
   },
   initialRoute: "/home",
 )
6.builder

在构建MaterialApp的Widget tree时,也就是加载child之前给child参数上再加一个父节点。所以一些toast库等需要全局context的三方库,会用builder将自己加到widget tree中。

builder: EasyLoading.init(),
7.theme

指定整个App主题颜色

MaterialApp(
  theme: ThemeData(
    // 主要颜色
    primaryColor: Colors.pink
  ),
)
8.scaffoldMessengerKey

scaffoldMessengerKey 主要是管理后代的 Scaffolds,可以实现无 context 调用 snack bars

GlobalKey<ScaffoldMessengerState> _Key = GlobalKey();
MaterialApp(
  scaffoldMessengerKey: _Key,
);
_scaffoldKey.currentState.showSnackBar(SnackBar(content: Text("show SnackBar")));
9.onGenerateInitialRoutes

如果提供了 initialRoute ,则用于生成初始路由的路由生成器回调,如果未设置此属性,则底层 Navigator.onGenerateInitialRoutes 将默认为 Navigator.defaultGenerateInitialRoutes

10.onUnknownRoute

效果和 onGenerateRoute 一样,只是先走 onGenerateRoute ,如果无法生成路由时则在调用 onUnknownRoute

MaterialApp(
   routes: {
     "/home": (_) => Home(),
     },
   initialRoute: "/home",
   onGenerateRoute: (setting) {
     return null;
   },
   onUnknownRoute: (setting) {
     return MaterialPageRoute(builder: (_) => Home());
   },
)
11.navigatorObservers

对路由堆栈变化进行监听

  static final RouteObserver<PageRoute> routeObserver =
      RouteObserver<PageRoute>();
      navigatorObservers: [MyApp.routeObserver],
12.title

Android:任务管理器的程序快照之上
IOS: 程序切换管理器中

 return MaterialApp(
      title: '油尚行',)
13.localizationsDelegates

用来存放自定义的多语言资源

  localizationsDelegates: [
        RefreshLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate
      ],
14.supportedLocales

当应用程序支持不同语言的时候,就需要对应用程序进行国际化

MaterialApp(
  title: 'Flutter IntlApp',
  supportedLocales: [
    const Locale('zh'),
    const Locale('en'),
  ],
)
15.localeResolutionCallback

监听系统语言切换事件,一些安卓系统特性,可设置多语言列表,默认以第一个列表为默认语言

      localeResolutionCallback:
          (Locale locale, Iterable<Locale> supportedLocales) {
        //print("change language");
        return locale;
      },

附录:
在src中com文件目录下
1.Flutter Engine使用
在这里插入图片描述
2.Flutter Embedder使用
在这里插入图片描述

  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

可可鸭~

想吃糖~我会甜

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值