react移动端ui框架_移动端跨平台UI框架flutter开发环境搭建指南

大家好！我是黑客之家小编，黑客之家头条号

分享黑客技术，物联网、GO、Python、Kotlin、Android、Java编程知识，科技资讯等

喜欢的朋友可以关注我的头条号！

移动互联网

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

Flutter架构

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

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

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

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

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

flutter doctor

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

Dart

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

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

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

喜欢的朋友可以关注、点赞、转发、评论！期待大家的反馈意见！