app 跨端架构 跨平台移动端框架_UI

移动互联网



随着移动互联网的兴起,移动端跨平台编程框架层出不穷,如:react native、weex、ionic、cordova等。但是这些框架都个有缺点,一个很大的弊端就是性能不如原生应用的性能好。这时google的跨平台UI框架Flutter出场了,Flutter可以快速在iOS和Android上构建高质量的原生用户界面。我们来看一下flutter框架的架构图:




app 跨端架构 跨平台移动端框架_Dart_02

Flutter架构



Flutter是一个UI框架,Framework层使用Dart语言作为编程语言,提了底层UI库、动画、手势、绘制、渲染、组件库等。

Engine层是使用C/C++实现的SDK,主要包括Skia、Dart和Text,Skia是一个开源的二维图形库,提供了适用于多种软硬件平台的通用API。

Embedder层是一个嵌入层,即把Flutter嵌入到各个平台中去。

我们一般编写程序主要在Framework层,使用Dart语言编写。下一篇文章中会介绍Dart开发环境的搭建和Dart语言编译成机器码运行。




app 跨端架构 跨平台移动端框架_app 跨端架构_03

Dart Native



我们接着介绍Flutter开发环境的搭建。

以mac os为例,首先要安装好下面的工具:

bash、curl、git、mkdir、rm、unzip、which、zip

在安装flutter中会用到这些命令。

由于在国内google的flutter依赖库可能用不了,所以google提供了官方镜像地址。

执行命令如下:

export PUB_HOSTED_URL=https://pub.flutter-io.cn

export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

接着我们执行以下命令安装获取flutter

git clone https://github.com/flutter/flutter.git -b stable

之后执行如下命令把flutter添加到环境变量:

export PATH="$PATH:`pwd`/flutter/bin"

接着执行如下命令安装ios和android开发中用到一些二进制工具

flutter precache

在执行如下命令

flutter doctor




app 跨端架构 跨平台移动端框架_Dart_04

flutter doctor



判断你的环境是否可以正确运行flutter,ios和android开发工具中要至少安装好一个才可以正常运行flutter。




app 跨端架构 跨平台移动端框架_app 跨端架构_05

Dart



我们可以看到主文件是.dart,整个Framework层都是用Dart语言来实现的。

接着我们来看下运行之后的效果。




app 跨端架构 跨平台移动端框架_Dart_06


这样我们的第一个Flutter程序就完成了。