前言

浏览技术网站的时候,看到很多Flutter的字眼,号称让移动app更加流畅.兴趣值满分,于是开始学习了一下.
Flutter 官网
Flutter中文文档

介绍

• Flutter 是由 Google 的工程师团队打造的，用于创建高性能、跨平台的移动应用的框架
• Flutter 专注于 Android and iOS 低延迟的输入和高帧率
• Flutter的设计跟react-native很像，比RN更直接一点
• Flutter的开发语言是Dart

历史演变

从我接触移动app开发开始, 从Hybrid开发依赖于WebView, 众所周知webView最大的问题就是性能问题,交互体验想当的不好.RN抛开了WebView，利用JavaScriptCore来做桥接，将js调用转为native调用。解决了性能问题,可以说是迈进了一大步.但是仔细想想还是需要中间量去做这件事情.这就相当与 厂家供货 -> 卖家出货 的联系变成 厂家供货 -> 供销员 -> 卖家 多个中间环节,多少也是会影响性能.flutter更加彻底,不用桥接,不用webview.直接通过生成一个UI库,给原生使用,这也是用Dart语言的原因吧.

与RN比较

• 都是跨平台开发
• 通过状态机控制局部变化
• 支持热更新

安装环境

首先

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

然后设置环境变量

vi ~/.bash_profile export PUB_HOSTED_URL=https://pub.flutter-io.cn //国内用户需要设置 export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //国内用户需要设置 export PATH= PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH 

PATH_TO_FLUTTER_GIT_DIRECTORY为自己克隆flutter的文件目录
之后运行source $HOME/.bash_profile 刷新一下

运行ide

我用的是vscode 打开之后vscode,安装一下插件

1
之后快捷键是command+shift+P(或者view->Command Palette)
2.jpeg
运行如下图表示安装成功:
3.jpeg

如遇到安装不成功可以去看看官方文档, 然而也会有错误提示,处理一下即可
最后vscode的调试即可

4.jpeg

创建一个应用

5.jpeg

最后

6.jpeg

可以看到图片是pink颜色的, 默认是blue颜色的. 试了一下热加载功能保存一下就可以了.

本页内容由塔灯网络科技有限公司通过网络收集编辑所得，所有资料仅供用户学习参考，本站不拥有所有权，如您认为本网页中由涉嫌抄袭的内容，请及时与我们联系，并提供相关证据，工作人员会在5工作日内联系您，一经查实，本站立刻删除侵权内容。本文链接:http://www.dengtar.com/17758.html