一、 flutter简介
1. flutter是什么?
flutter是一款接近原生安卓的移动应用程序开发框架,采用dart语言(强类型)开发,提高了丰富的UI和组件库,支持响应式编程、热加载程序(无需重启就能加载)。底层dart语言和java语言类似,具备面向对象编程开发的特性。flutter可以包含不同平台之间的差异,共同复用同一套代码,交付出具有原生体验的高性能不同平台应用。
2. 为什么要学习flutter?
使用基于webview的移动开发框架(如uniapp等),包含动画或者折叠面板打开时,渲染的时候会卡顿,对于原生体验感不好,对一些需求也不易拓展,灵活性差。flutter是基于Skia图形引擎,通过将Widget树转化为RenderObject树进行绘制。并且能支持与原生进行管道通信,实现一些特定设备所需的要求,这点是基于webView实现不了的。
3. flutter相比其他移动库UI有什么优势和难点?
优点
: 快速开发、高性能、灵活性 、可拓展性、响应式编程、跨平台支持、支持热加载。
缺点
: 学习成本高、构建大型应用程序开发复杂
4.flutter架构讲解
flutter总体分为三部分: 1、框架层 2、引擎层 3、内嵌层;框架层提供丰富UI和组件库用于开发flutter应用,引擎层是flutter的核心,主要用C++语言编写,提供flutter底层API接口,对于需要合成的场景负责进行栅格化。内嵌层是大多数平台都有的,负责提供一个函数的入口。
框架最底层的Foundation提供基础服务,Animation、Painting、Getstures提供一些互动服务,是对底层进行的抽象,提供给上层使用。Rendering为渲染层,负责提供操作布局的抽象,当某些对象动态变更后,渲染树会根据变更情况来更新布局。Widget层是组合的抽象(页面+组件),每一个渲染层的渲染对象,会对应Widget层中的一个类(响应式编程模型就在该层级中被引入)。 Material和Cupertino库是提供的界面风格组件,分别对应安卓和苹果平台。
5. flutter渲染原理
说到渲染的话,就必须清楚渲染时的数据结构是啥样的,如下所示:
分别是组件树、元素树、渲染树。在flutter中,Material的一个组件就是一个Widget,一个界面中会有多个组件,对应多个Widget,构建成Widget树,而每一个widget会调用createElement()方法来创建一个element对象,从而构建出Elemnt树,而每个element节点又可以通过createRenderObject来创建渲染对象,多个渲染对象构建出渲染树的过程。Element的作用是连接组件和渲染对象,确保组件渲染的布局位置。
element的出现,是为了进行复用和保持平衡的作用,减少频繁的创建和销毁渲染对象,以免降低性能。当widget树改变时,flutter会通过element树进行进行比较。如果某一个位置的widget不一样了,此时就会重新创建element。如果某个位置的widget和之前的widget一样时(两个widget相等或runtimeType与key相等),此时只需根据widget的数据内容进行修改渲染树的配置,不需要在进行创建和销毁,节省了开销。
Widget是轻量级的,实例化消耗的性能很少;而RenderObject是重量级的,会改动布局,消耗比较大,尽量进行复用
遵循原则:
- 判断新的widget是否和老的widget是否同一组件类型
- 如果不是同一个类型,那就把Widget、Element、RenderObject分别从它们的树(包括它们的子树)上移除,然后创建新的对象
- 如果是一个类型,那就仅仅修改RenderObject中的配置,然后继续向下遍历
二、 flutter环境安装
直接参考官网即可,官网安装配置环境变量很全:flutter中文网安装