跨平台UI框架Flutter的入门和使用

特别说明

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

个人博客平台 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插件即可

以VsCode为例: 点击
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类上面,根据状态是否有变化。又分为 StatelessWidgetStatefulWidget

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.yamlasset节点中.下面以图片文件为例。
介绍整个加载过程

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

推荐阅读更多精彩内容