特别说明

当前博客平台账号已废弃，如果有使用细节问题请前往我新博客平台进行讨论交流。

个人博客平台 HuRuWo的技术小站

文章首发于个人博客HuRuWo的技术小站,如果本文非vip用户无法完全浏览或者图片无法打开，可前往个人博客文章地址查看文章并留言讨论。

个人博客文章地址跨平台UI框架Flutter的入门和使用

更多技术文章访问本人博客HuRuWo的技术小站，包括 Electron从零开发 Android 逆向 app 微信数据抓取 抖音数据抓取 闲鱼数据抓取 小红书数据抓取 其他软件爬虫 等技术文章

前言

现如今,跨平台已是大势所趋。层出不穷的跨平台方案也在不停地迭代。下面看一下谷歌发布的跨平台方案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

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绝对是值得尝试的。