前言
浏览技术网站的时候,看到很多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颜色的. 试了一下热加载功能保存一下就可以了.
