关于flutter:Flutter深入浅出组件篇MaterialApp

Flutter 整体结构图

Flutter Framework

• Foundation、Animation、Painting、Gestures 被合成了一个 Dart UI 层，对应的是 Flutter 中 dart:ui 包，是 Flutter 引擎裸露的底层 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，将引擎始终到平台中间层代码的渲染设置、原生插件、打包、线程治理、工夫循环、交互操作等。

• UI Runner 负责绑定渲染相干操作
• GPU Runner 用户执行 GPU 指令
• iOS Runner 解决图片数据、为 GPU 做筹备的

• Platform Runner 所有接口调用都应用该接口

  示例代码

本文中很多成果都没有截图，可下载源代码运行我的项目 源代码地址，或者通过视频教程查看 视频教程地址

Material 介绍

Material 组件（MDC）帮忙开发者实现 Material Design。MDC 由谷歌团队的工程师和 UX 设计师发明，为 Android、iOS、Web 和 Flutter 提供很多好看实用的 UI 组件。

MaterialApp 介绍

MaterialApp 蕴含了许多的 Widget，这些 Widget 通常是实现 Material Design 的应用程序所必须要的，蕴含的 Widget 能够在 Material Components widgets 中查看所有。
理解根本的概念，接下来咱们具体看一下 MaterialApp 具体怎么应用。

Material 属性和阐明

总共 33 个属性

构造函数

创立一个 MaterialApp

MaterialApp(…)

创立一个应用 Router 而不是 Navigator 的 MaterialApp

MaterialApp.router(…)

属性详解

1、navigatorKey

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

应用办法

GlobalKey<NavigatorState> _navigatorKey = GlobalKey();

MaterialApp(navigatorKey: _navigatorKey,);

2、scaffoldMessengerKey

scaffoldMessengerKey 次要是治理后辈的 Scaffolds，能够实现无 context 调用 snack bars

应用办法

GlobalKey<ScaffoldMessengerState> _scaffoldKey = GlobalKey();

MaterialApp(scaffoldMessengerKey: _scaffoldKey,);

_scaffoldKey.currentState.showSnackBar(SnackBar(content: Text("show SnackBar")));

3、home

程序进入后的第一个界面，传入一个 Widget

应用办法

...
MaterialApp(home: Scaffold(...),
);
...

4、routes

生成路由表，以键值对模式传入 key 为路由名字，value 为对应的Widget

应用办法

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

5、initialRoute

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

应用办法

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

6、onGenerateRoute

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

应用办法

 MaterialApp(
   routes: {"/home": (_) => Home(),
     "/my": (_) => My()},
   initialRoute: "/home",
   onGenerateRoute: (setting) {
     // 这里能够做进一步的逻辑解决
     return MaterialPageRoute(builder: (_) => Home());
   },
)

7、onGenerateInitialRoutes

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

应用办法

MaterialApp(
  initialRoute: "/home",
  onGenerateInitialRoutes: (initialRoute) {
    return [MaterialPageRoute(builder: (_) => Home()),
      MaterialPageRoute(builder: (_) => My()),
    ];
  }
 )

8、onUnknownRoute

成果和 onGenerateRoute 一样，只是先走 onGenerateRoute，如果无奈生成路由时则在调用 onUnknownRoute。

应用办法

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

9、navigatorObservers

路由监听器，次要是就是监听页面路由堆栈的变动，当页面进行 push pop remove replace 等操作时会进行监听。

应用办法

MaterialApp(
     navigatorObservers: [MyObserver()
  ],
)
  
 class MyObserver extends NavigatorObserver {
  @override
  void didPush(Route route, Route previousRoute) {print(route);
    print(previousRoute);
    super.didPush(route, previousRoute);
  }
}

10、builder

当构建 Widget 前调用，次要用于字体大小、主题色彩等配置

应用办法

MaterialApp(
   routes: {"/home": (_) => Home(),
     "/my": (_) => My()},
   initialRoute: "/home",
   onGenerateRoute: (setting) {return null;},
   onUnknownRoute: (setting) {return MaterialPageRoute(builder: (_) => Home());
   },
      builder: (_, child) {return Scaffold(appBar: AppBar(title: Text("build")), body: child,);
   },
)

11、title

Android：工作管理器的程序快照之上
IOS: 程序切换管理器中

应用办法

 MaterialApp(title: 'Flutter 利用',);

12、onGenerateTitle

如果非空，则调用此回调函数以生成应用程序的题目字符串，否则会应用 title。每次重建页面是该办法就会回调执行。

应用办法

MaterialApp(
   title: 'Flutter 利用',
   onGenerateTitle: (_) {return "我的天";},
 );

13、color

设置该值的在程序切换时利用图标的背景色彩，当利用图标为通明时。

应用办法

MaterialApp(color: Colors.blue,)

14、theme

如果指定了 darkTheme，那么用于提供用户界面的深色版本。如果提供了 darkTheme，themeMode 将管制将应用哪个主题。默认值是 ThemeData.light()
应用程序的主题色彩

应用办法

MaterialApp(
  theme: ThemeData(
    // 次要色彩
    primaryColor: Colors.red
  ),
)

15、darkTheme

应用程序深色主题色彩

应用办法

MaterialApp(
  theme: ThemeData(
    // 次要色彩
    primaryColor: Colors.red
  ),
)

16、highContrastTheme

当零碎申请“高对比度”时应用的 ThemeData，当该值为空时会用 theme 利用该主题

应用办法

MaterialApp(
  highContrastTheme: ThemeData(primaryColor: Colors.pink),
)

17、highContrastDarkTheme

当零碎再暗黑模式下申请“高对比度”时应用的 ThemeData，当该值为空时会用 darkTheme 利用该主题。

应用办法

MaterialApp(
  highContrastDarkTheme: ThemeData(primaryColor: Colors.green),
)

18、themeMode

白天模式和暗黑模式模式切换，默认值为 ThemeMode.system

应用办法

MaterialApp(themeMode: ThemeMode.dark)

19、locale

次要用于语言切换时，如果为 null 时应用零碎区域

应用办法

MaterialApp(locale: Locale('zh', 'CN') // 中文简体
)

20、localizationsDelegates

本地化委托

应用办法

MaterialApp(locale: Locale('zh', 'CN') // 中文简体
  localizationsDelegates: [
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
  ],
)

21、supportedLocales

以后利用反对的 Locale 列表

应用办法

MaterialApp(locale: Locale('zh', 'CN'), // 中文简体
  supportedLocales: [Locale('en', 'US'), // 美国英语
    Locale("zh", 'CN'), // 中文简体
  ]
)

22、localeListResolutionCallback

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

应用办法

MaterialApp(locale: Locale('zh', 'CN'), // 中文简体
  supportedLocales: [Locale('en', 'US'), // 美国英语
    Locale("zh", 'CN'), // 中文简体
  ],
  localeListResolutionCallback: (List<Locale> locales, Iterable<Locale> supportedLocales) {
    // 零碎切换语言时调用
    return Locale("zh", 'CN');
  },
)

23、localeResolutionCallback

监听系统语言切换事件

应用办法

MaterialApp(locale: Locale('zh', 'CN'), // 中文简体
  supportedLocales: [Locale('en', 'US'), // 美国英语
    Locale("zh", 'CN'), // 中文简体
  ],
  localeResolutionCallback: (Locale locale, Iterable<Locale> supportedLocales) {return Locale("zh", 'CN');
  },
)

24、debugShowMaterialGrid

在 debug 模式下展现基线网格

应用办法

MaterialApp(debugShowMaterialGrid: true)

25、showPerformanceOverlay

显示性能叠加，开启此模式次要用于性能测试

应用办法

MaterialApp(showPerformanceOverlay: true)

26、checkerboardRasterCacheImages

关上栅格缓存图像的棋盘格

应用办法

MaterialApp(checkerboardRasterCacheImages: true)

27、checkerboardOffscreenLayers

关上渲染到屏幕外位图的层的棋盘格

应用办法

MaterialApp(checkerboardOffscreenLayers: true)

28、showSemanticsDebugger

关上显示可拜访性信息的叠加层，展现组件之间的关系、占位大小

应用办法

MaterialApp(showSemanticsDebugger: true)

29、debugShowCheckedModeBanner

调试显示查看模式横幅

应用办法

MaterialApp(debugShowCheckedModeBanner: false)

30、shortcuts 以及 actions

shortcuts 和 actions 是将物理键盘事件绑定到用户界面中的操作。比方，要在您的应用程序中定义键盘快捷键，这里不做过多的形容，前面我会专门拿一个专题来解说。

31、restorationScopeId

定义一个应用程序状态复原的标识符，提供标识符会将 RootRestorationScope 插入 widget 层次结构，从而为后辈 widget 启用状态复原。还能够通过标识符使 WidgetsApp 构建的导航器复原其状态（即复原流动路由的历史堆栈），因为这里波及的内容较多，前面会专门拿一个专题来解说。

32、scrollBehavior

对立滚动行为设置，设置后子组件将返回对应的滚动行为

应用办法

MaterialApp(scrollBehavior: ScrollBehaviorModified()
)
  
class ScrollBehaviorModified extends ScrollBehavior {const ScrollBehaviorModified();
  @override
  ScrollPhysics getScrollPhysics(BuildContext context) {switch (getPlatform(context)) {
      case TargetPlatform.iOS:
      case TargetPlatform.macOS:
      case TargetPlatform.android:
        return const BouncingScrollPhysics();
      case TargetPlatform.fuchsia:
      case TargetPlatform.linux:
      case TargetPlatform.windows:
        return const ClampingScrollPhysics();}
    return null;
  }
}