Flutter 技术文档总结问题

Flutter

缘由

原生应用程序是指某一个移动平台（比如iOS或安卓）所特有的应用，使用相应平台支持的开发工具和语言。但纯原生开发主要面临动态化和开发成本两个问题，诞生了一些跨平台的动态化框架。

H5+原生（Cordova、Ionic、微信小程序）
JavaScript开发+原生渲染（React Native、Weex、快应用）
自绘UI+原生(QT for mobile、Flutter)

简介

Flutter 是 Google 推出并开源的移动应用开发框架，主打跨平台、高保真、高性能。开发者可以通过 Dart语言开发 App，一套代码同时运行在 iOS 和 Android平台。 Flutter提供了丰富的组件、接口，开发者可以很快地为 Flutter添加 native扩展。同时 Flutter还使用 Native引擎渲染视图，这无疑能为用户提供良好的体验。

Dart语言开发

开发效率高，采用JIT模式（“即时编译”），基于AOT的发布包（提前编译）
Flutter旨在提供流畅、高保真的的UI体验。
Dart是类型安全的语言，支持静态类型检测
Dart团队就在你身边

Flutter框架结构

底下两层（Foundation和Animation、Painting、Gestures）在Google的一些视频中被合并为一个dart UI层
Rendering层，这一层是一个抽象的布局层，它依赖于dart UI层，Rendering层会构建一个UI树，当UI树有变化时，会计算出有变化的部分，然后更新UI树，最终将UI树绘制到屏幕上。
Widgets层是Flutter提供的的一套基础组件库，在基础组件库之上，Flutter还提供了 Material 和Cupertino两种视觉风格的组件库。

ps:资料

官网：阅读Flutter官网的资源是快速入门
源码及注释：源码注释应作为学习Flutter的第一文档，Flutter SDK的源码是开源的
Github：可以去github flutter 项目下提issue。
StackOverflow
Flutter中文网社区
博客

搭建环境

略

Widget简介

在Flutter中几乎所有的对象都是一个Widget，Flutter中的Widget的概念更广泛，它不仅可以表示UI元素，也可以表示一些功能性的组件（如：用于手势检测的 GestureDetector widget、用于APP主题数据传递的Theme等等）

Widget与Element

Widget的功能是“描述一个UI元素的配置数据”，实际上，Flutter中真正代表屏幕上显示元素的类是Element，Widget只是UI元素的一个配置数据，并且一个Widget可以对应多个Element。Widget树实际上是一个配置树，而真正的UI渲染树是由Element构成。

Widget与Element

StatelessWidget

它继承自Widget类，重写了createElement()方法。
StatelessWidget用于不需要维护状态的场景，它通常在build方法中通过嵌套其它Widget来构建UI。

StatefulWidget

StatefulWidget也是继承自Widget类，并重写了createElement()方法，不同的是返回的Element 对象并不相同；另外StatefulWidget类中添加了一个新的接口createState()。
createState() 用于创建和Stateful widget相关的状态，它在Stateful widget的生命周期中可能会被多次调用。

State

在widget 构建时可以被同步读取。
在widget生命周期中可以被改变，当State被改变时，可以手动调用其setState()方法通知Flutter framework状态发生改变，Flutter framework在收到消息后，会重新调用其build方法重新构建widget树，从而达到更新UI的目的。

State的生命周期

initState：当Widget第一次插入到Widget树时会被调用，
didChangeDependencies()：当State对象的依赖发生变化时会被调用
build()：它主要是用于构建Widget子树
reassemble()：为了开发调试而提供的，在热重载(hot reload)时会被调用
didUpdateWidget()：在widget重新构建时调用
deactivate()：当State对象从树中被移除时，会调用此回调。
dispose()：当State对象从树中被永久移除时调用；通常在此回调中释放资源。

State的生命周期

基础组件

Text 用于显示简单样式文本

Text

TextStyle用于指定文本显示的样式如颜色、字体、粗细、背景等

image.png

TextSpan按照不同的样式显示

image.png

Material组件库中的按钮

RaisedButton 即"漂浮"按钮，它默认带有阴影和灰色背景

image.png

FlatButton即扁平按钮，默认背景透明并不带阴影

image.png

OutlineButton默认有一个边框，不带阴影且背景透明

image.png

IconButton是一个可点击的Icon，不包括文字，默认没有背景

image.png

自定义按钮外观

image.png

自定义按钮外观

Image组件来加载并显示图片

image.png

Image的数据源可以是asset、文件、内存以及网络。ImageProvider 是一个抽象类，主要定义了图片数据获取的接口load()，如AssetImage是实现了从Asset中加载图片的ImageProvider，而NetworkImage实现了从网络加载图片的ImageProvider。

image.png

单选开关和复选框

image.png

输入框及表单

image.png

进度指示器

Material 组件库中提供了两种进度指示器：LinearProgressIndicator和CircularProgressIndicator

image.png

布局类组件简介

线性布局（Row和Column）

Flutter中通过Row和Column来实现线性布局，类似于Android中的LinearLayout控件。
在线性布局中，有两个定义对齐方式的枚举类MainAxisAlignment和CrossAxisAlignment，分别代表主轴对齐和纵轴对齐。

MainAxisAlignment（主轴）和CrossAxisAlignment（交叉轴）

MainAxisAlignment（主轴）就是与当前控件方向一致的轴，而CrossAxisAlignment（交叉轴）就是与当前控件方向垂直的轴
MainAxisAlignment.spaceBetween：使中间的各个子控件间距相等MainAxisAlignment.start：子控件放在主轴开始位置（类似于android默认Linerlayout排列规则）MainAxisAlignment.end：将子控件放在主轴的结束位置MainAxisAlignment.center：将子控件放在主轴的中间位置MainAxisAlignment.spaceEvenly：将主轴空白区域均分，使各个子控件间距相等

image.png

弹性布局（Flex）

弹性布局允许子组件按照一定比例来分配父容器空间。Flutter中的弹性布局主要通过Flex和Expanded来配合实现。
Flex组件可以沿着水平或垂直方向排列子组件。
Expanded可以按比例“扩伸” Row、Column和Flex子组件所占用的空间。

image.png

弹性布局比较简单，唯一需要注意的就是Row、Column以及Flex的关系。

Wrap 流式布局

我们把超出屏幕显示范围会自动折行的布局称为流式布局。

image.png

层叠布局 Stack、Positioned

层叠布局和Web中的绝对定位、Android中的Frame布局是相似的，子组件可以根据距父容器四个角的位置来确定自身的位置。

Stack允许子组件堆叠，而Positioned用于根据Stack的四个角来确定子组件的位置。

image.png

对齐与相对定位（Align）

Align 组件可以调整子组件的位置，并且可以根据子组件的宽高来确定自身的的宽高

容器类Widget

容器类Widget和布局类Widget都作用于其子Widget，
不同的是：

布局类Widget一般都需要接收一个widget数组（children），而容器类Widget一般只需要接收一个子Widget（child）
布局类Widget是按照一定的排列方式来对其子Widget进行排列，而容器类Widget一般只是包装其子Widget，对其添加一些修饰（补白或背景色等）、变换(旋转或剪裁等)、或限制(大小等)。