跨平台UI框架Flutter的入门和使用
前言
现如今,跨平台已是大势所趋。层出不穷的跨平台方案也在不停地迭代。下面看一下谷歌发布的跨平台方案UI框架Flutter。
Flutter的简介
Flutter是Google用以帮助开发者在Ios和Android两个平台快速开发高质量原生应用的全新移动UI框架。
Flutter的时间线
2018年2月27日，在2018世界移动大会上，Google发布了Flutter的第一个Beta版本。
image.png
同时Flutter也作为谷歌下一代移动操作系统Fuchsia的UI库
在最近的谷歌开发者大会上，FLutter已经发布了Release Preview2版本了，预计年底能出正式版。
相对于其他跨平台方案的优势
其他跨平台方案
image.png
Flutter的特点和优势
继承RN的优点
- 1.快速开发
- 2.质量有保证,性能足够
- 3.一次编写，多平台共享。
- 4.提升开发体验,支持热重载.(基于Dart语言特性，更迅速)
- 5.方便的与原生桥接
- 6.与web端共享代码(Dart语言可以在web端运行，也可将Dart转换成js)
改善RN的不足的点:
- 1.使用Dart语言，解决js带来的各种问题。包括兼容性和运行速度问题。
- 2.虽然Flutter初始包和RN初始包大小差不多(7m左右),但由于语言特性，当业务代码足够多时。Flutter会远小于RN。
- 3.不使用原生的控件，而是单独实现gui库渲染。刷新速度保证在60fps。
- 4.以帧为单位刷新页面，不会发生过度绘制等性能问题。
- 5.提供大量的双平台控件，保证一套代码做出两种风格的UI。
Flutter的架构
框架整体架构
如图所示
image.png
从该架构图可知，Flutter框架可分为Framework层(API层)Engine层(引擎层)
Flutter Framework: 整个框架层都是用Dart语言实现，该层提供一套基础库， 用于处理动画、绘图和手势等。并且基于绘图封装了一套 UI组件库，并且细分为两种风格的组件
Flutter Engine: 这是一个纯 C++实现的框架层，包含了 Skia引擎（高性能渲染引擎Dart运行环境、文字排版引擎等。
框架架构原理(与RN对比)
RN架构
image.png
Flutter架构
image.png
说明:
1.UI绘制上:RN使用JSBridge 绘制原生组件来显示图形.而Flutter使用自带的widget引擎渲
染图形。
2.与原生通信上:RN使用JSBridge桥接，而Flutter使用平台通道。
Dart语言简介
在学习使用Flutter之前,必须先了解Dart的使用。总体来说像java和js的结合，更像kotlin、swift。
Dart语言介绍
Dart是一种强类型、跨平台的客户端开发语言。具有专门为客户端优化、高生产力、快速高效、可移植（兼容ARM/x86）、易学的OO编程风格和原生支持响应式编程（Stream & Future）等优秀特性。
Dart语言基本概念
-
所有变量的值都是对象，也就是类的实例。甚至数字、函数和null也都是对象，都继承自Object类。(更多对象，而且不需要new关键字)
-
虽然Dart是强类型语言，但是显式变量类型声明是可选的，Dart支持类型推断。如果不想使用类型推断，可以用dynamic类型。
-
Dart支持泛型，List<int>表示包含int类型的列表，List<dynamic>则表示包含任意类型的列表。
-
Dart支持顶层（top-level）函数和类成员函数，也支持嵌套函数和本地函数。
-
Dart支持顶层变量和类成员变量。
-
Dart没有public、protected和private这些关键字，使用下划线“_”开头的变量或者函数，表示只在库内可见。
Dart语言特点(为什么谷歌选择Dart而不是其他语言)
-
Dart可以跨平台运行,因为他可以以不同的形式在浏览器/ios/android/DartVM上运行。
-
Dart是AOT（Ahead Of Time）编译的，编译成快速、可预测的本地代码，使Flutter几乎都可以使用Dart编写。Dart也可以JIT（Just In Time）编译，所以Flutter支持热重载，开发周期异常快。
因为Dart编写的Flutter应用程序被编译为本地代码，因此它们不需要在领域之间建立缓慢的桥梁（例如，JavaScript到本地代码）。它的启动速度也快得多。
-
Dart使Flutter不需要单独的声明式布局语言，如JSX或XML，或单独的可视化界面构建器，因为Dart的声明式编程布局易于阅读和可视化。(android 使用 java逻辑+xml布局是无奈之举，现在改过来了。)
-
Dart特别容易学习，因为它具有静态和动态语言用户都熟悉的特性。
搭建Flutter开发环境
因为ios开发必须使用macOS，所以我这里只介绍win系统下的环境搭建具体参考官方文档
1.设置镜像地址
可以更快的获取Flutter包和相关资源
在环境变量里面加入
PUB_HOSTED_URL=https://pub.flutter-io.cn
FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
image.png
2.获取Flutter SDK
网址https://flutter.io/sdk-archive/#windows 选择想要的版本下载或者直接从仓库拉取版本
git clone -b master https://github.com/flutter/flutter.git./flutter/bin/flutter --version
3.设置Flutter的环境变量
将下载的压缩包解压后，配置flutter/bin 目录到环境变量path里面
image.png
4.安装平台所需依赖
ios:macos 系统只需要更新xcode到7.2以上即可进行ios软件的开发
android:安装最新班的AndroidStudio 同时下载必须的AndroidSDK 即可配置完成
5.使用其他工具开发
Flutter可以在VSCode 、AndroidStudio(最方便)、JIDEA下进行开发。只需要安装flutter插件即可
image.png
-->搜索 Flutter--->安装
6.检查一切是否正常
命令行输入:flutter doctor
image.png
实战从0开发Flutter项目
创建一个新的项目
直接使用ide new flutter project 或者使用命令行 flutter create 项目名称
等待片刻(最好翻墙) 下载相关依赖后 项目创建完成
image.png
连接设备后 继续输入命令
cd new_app
flutter run
稍等片刻,运行结果
jieg
文件目录
image.png
整个文件目录分为android 部分 ios部分 和 dart代码部分
android和ios部分用于放置对应平台代码
下面是lib下的main.dart文件内容，是整个app的启动入口
image.png
Flutter的布局
Flutter的布局思想
Flutter基于widget(组件)的 即万物皆widget 从大类上来看 所有的控件都继承与widget这个类。
而在widget类上面,根据状态是否有变化。又分为 StatelessWidget 和 StatefulWidget
Stateless widgets是不可变的, 这意味着它们的属性不能改变 - 所有的值都是最终的.
Stateful widgets持有的状态可能在widget生命周期中发生变化. 实现一个 stateful widget 至少需要两个类:
常用的布局控件介绍
Flutter提供了大量的控件,包括大量类型原生风格 包括ios/Andoroid两个平台的。
根据功能分为 功能控件和布局控件
功能控件
负责显示 交互 的控件,包括Text Button CheckBox RadioButton EditText等控件。使用方法和在其他平台下
类似，这里不做详细介绍。具体参考 https://flutterchina.club/widgets/
布局控件
布局控件用于排列其他控件，都有一个child属性。根据child的数量又分为单子元素布局和多子
元素布局。介绍几个用的最多的布局控件。
Container 单子元素布局控件---:拥有绘制 定位 调整大小 的容器
Container 是最常用的容器控件,没有之一。他的功能太丰富了。只要套上，可以给
任意widget添加这些属性
属性:
padding 设置内边距 margin 设置外边距 color 背景颜色 width 宽度 child 子widget
height 高度 alignment 子布局位置 foregroundDecoration 前景描述 transform 旋转
Row/Column 水平/垂直方向的多widget排列容器,相当于Android中的LinearLayout 两种方向
Stack 绝对布局，可以将所有的子布局叠加起来。相当于Android中的AbsoluteLayout类比web中的absolute
加载资源文件
加载本地资源
Flutter加载任何本地文件都需要写入配置文件 pubspec.yaml 的 asset节点中.下面以图片文件为例。
介绍整个加载过程
-
1.创建工程中image文件夹(放在工程哪里没关系，叫什么也没关系 只要能访问得到)
-
2.配置文件加入资源相对路径。这个相对是相对于整个flutter工程的。 加入到flutter下的asset 节点下
image.png
- 3.代码中引用即可,就像这样
image.png
其他资源 像字体文件 文本 文件 都加入asset 下即可
引用第三方依赖
除了Flutter内置的控件和库，还有很多其他依赖可以加入。具体可以去 https://pub.dartlang.org/packages 获得。这里包括官方提供的额外依赖还有其他开发者提供的依赖。
引入第三方依赖步骤如下(以引入webview为例):
1.https://pub.dartlang.org/packages 上搜索webview 复制依赖代码
flutter_webview_plugin: ^0.2.1+2
2.将依赖加入到配置文件下,并启动包获取 flutter packages get
image.png
image.png
3.参考文档,代码中引用即可,就像这样
image.png
效果
image.png
页面跳转
当应用有多个页面时 需要从一个页面跳转到另一个页面。需要用到两个核心类Router。 route是一个屏幕或页面的抽象，Navigator是管理route的Widget。Navigator可以通过route入栈和出栈来实现页面之间的跳转。
image.png
1.在顶层声明路由 指向新的页面
2.在点击事件里面 添加跳转逻辑 传入注册的
路由值
Navigator可以携带参数和接收参数。方便页面间的值传递。同时可以配置跳转动画，元素共享等参数
页面返回 使用pop方法: Navigator.of(context).pop('data');
网络访问和数据解析
Flutter中的网络访问来自 dart:io ，提供基本的数据访问。由于Dart是单线程，需要配合异步(Future类)使用。
补充:Future(期货)对象用于执行异步操作，允许在将来获得一个值。一般使用async 和 await可以获得Future对象。
访问网络整个流程如下:
- 1创建 client.
- 2构造 Uri.
- 3发起请求, 等待请求，同时也可以配置请求headers、 body。
- 4关闭请求, 等待响应.
- 5解码响应的内容.
image.png
取得数据后使用使用dart:convert库可以解码json数据。
解析成map:
Map datas = JsonCodec().decode(data);
image.png
总结与提问
对于企业
Flutter的出现提供了另外一种跨平台的方案。直接上框架是比较冒进的，因为无论是框架本身还是市场从业人员的成熟程度都不够。但是作为技术选型的备用选项是非常不错的选择。
对于个人开发者
无论是原生开发还是前端人员 flutter都是易上手的框架。
如果你想成为大前端开发者，flutter绝对是值得尝试的。
