1.flutter基础概念

1.flutter是什么？

2018年2月27日，在2018世界移动大会上，Google发布了Flutter的第一个Beta版本。Flutter是Google用以帮助开发者在Ios和Android两个平台开发高质量原生应用的全新移动UI框架，点击查看Flutter介绍视频。

flutter特点和特性

• 热重载（Hot Reload），flutter使用了dart作为底层开发语言，其中一个很重要的原因是可以支持热加载。
• 一切皆为Widget的理念，对于Flutter来说，应用里的所有东西都是Widget，通过可组合的空间集合、丰富的动画库以及分层课扩展的架构实现了富有感染力的灵活界面设计。
• 借鉴了React的设计理念，引入了虚拟DOM的概念支持跨平台开发，但是又更进一步：在Flutter中，UI组件和渲染器已经从平台中集成到用户的应用程序中，没有系统UI组件可以操作，所以原来虚拟控件树的地方现在是真实的控件树。Flutter渲染UI控件树并将其绘制到平台画布上。这很好，既简单又快。 此外，动画发生在用户空间中，因此应用程序（因此开发人员）可以对其进行更多的控制。同时，从React中借鉴了组件绘制优化，可以提供更好的绘制性能。
• 借助可移植的GPU加速的渲染引擎以及高性能本地代码运行时以达到跨平台设备的高质量用户体验。flutter使用Skia 2D渲染引擎直接在GDI层面绘制页面和控件，对系统的依赖降低到最低，提供更好的跨平台兼容性和更高的性能。

2.框架结构

下面的图片是Flutter框架结构图，对大部分开发者而言，最常用的是Widgets层，屏幕上可见与不可见的元素都由Widgets层实现，这些元素被称为Widget。在Widgets层在上层，有两个现成的Widget库，Material库即Material Design的Widget库，Material Design是Google I/O 2014发布的设计语言，目前成为统一Android Mobile、Android Table、Desktop Chrome等平台的设计语言规范。Cupertino库则是一个模仿iOS设计风格的Widget库。

这里写图片描述

Flutter框架结构图的底层是Flutter Engine虚拟机，在这一层次中需要了解一下的是Skia，Skia是Google研发的包括图形、文本、图像、动画等多方面的图形引擎，不仅用于Google Chrome浏览器，Android系统也采用Skia作为绘图处理引擎。

这里写图片描述

上面的图片展示了Flutter的绘图原理，Flutter框架直接使用Skia引擎来渲染，因此能够控制渲染帧数，从而实现高帧速率。

3.flutter中基本概念

state 状态

和React中状态概念一致: React 的核心思想是组件化的思想，应用由组件搭建而成，而组件中最重要的概念是State（状态），State是一个组件的UI数据模型，是组件渲染时的数据依据。flutter程序的运行可以认为是一个巨大的状态机，用户的操作，请求API和系统事件的触发都是推动状态机运行的Trigger Point，Trigger Point通过调用setState方法推动状态机进行响应。

• 状态生命周期

这里写图片描述

widget 控件

在flutter中，一切皆控件！一切皆控件！一切皆控件！牢牢记住这个概念。Text是控件，Image是控件，Icon是控件，布局脚手架也是控件，变换特性也是控件，页面也是控件，甚至整个APP也是控件。

用户自定义控件分为有状态控件和无状态控件两种类型。

flutter的内置控件分为两种：

• 可视控件(visible widget)。即我们直接看到的控件，如text、Icon、Button，名称理解和html标签相同。

• 布局控件(layout widget)。可以理解为架子，如Row、Column、Container。布局控件不会直接呈现内容，可看作承载可视控件的容器。所有的布局控件都有承载子控件的属性：child或children。child可承载单个子控件，children可承载多个子控件。每个布局控件有默认的布局方式，使其子控件按照自己的样式安放到位子上。布局控件提供了各种样式的参数，可实现子控件的对齐(align)、缩放(size)、包装(pack)和嵌套(Nest)。简单总结为：布局控件是为了实现可视控件的各种视觉效果而做的包装。

• 控件生命周期

这里写图片描述