Flutter
Flutter的特点
- 美观:使用Flutter内置美丽的Material Design和Cupertino widget,丰富的motion API,平滑而自然的滑动效果和平台感知,为您的用户体验带来全新体验;
- 快速:Flutter的UI渲染性能很好,在生产环境下,Flutter将代码编译成机器码执行,并充分利用GPU的图形加速能力,因此使用Flutter开发的移动应用即使在低配手机上也能实现每秒60桢的UI渲染速度;
- 高效:Hot Reload(热重载);
- 开放:Flutter是开放的,它是一个完全开源的项目;
跨平台解决方案
- WebView:性能比较差,坑多;
- React Native:简称RN,是Facebook在2015年4月开源的跨平台移动应用开发框架,支持iOS与Android两大平台;
- Flutter:跨平台的终极解决方案,Flutter利用
Skia
绘图引擎,直接通过CPU,GPU进行绘制,不需要依赖任何原生控件,而RN必须通过某些桥接的方式先转成原生进行调用,之后再进行渲染;
Flutter绘制原理
渲染引擎Skia
- Skia是Flutter向GPU提供数据的途径;
- Skia全称为Skia Graphics Library,是一个由C++编写的开源图形库;
- 其能再低端设备上呈现高质量的2D图形,最初由Skia公司开发,后被Google收购;
- 应用于Android,Google Chrome,Chrome OS中;
- 目前,Skia是Android官方的图像渲染引擎,因此Flutter Android SDK 无需内嵌Skia引擎就可以获得天然的Skia支持;
- 而对于iOS平台来说,由于Skia是跨平台的,因此它作为Flutter iOS渲染引擎被嵌入到Flutter的 iOS SDK 中,替代了iOS闭源的
Core Graphics/Core Animation/Core Text
,这也正是Flutter iOS SDK打包的App体积比Android要大一些的原因;
- 底层渲染能力统一了,上层开发接口和功能体验也就随即统一了,开发者再也不用操心平台相关的渲染特性了,也就是说,Skia保证了同一套代码调用在iOS与Android平台上的渲染效果是完全一致的;
MacOS Flutter的环境搭建
[[ -s "$HOME/.profile" ]] && source "$HOME/.profile" # Load the default .profile
[[ -s "$HOME/.rvm/scripts/rvm" ]] && source "$HOME/.rvm/scripts/rvm" # Load RVM into a shell session *as a function*
#配置Flutter环境变量
export Flutter_Home=/Users/liyanyan33/flutter
export PATH=$PATH:$Flutter_Home/bin
export PATH=$PATH:$Flutter_Home/bin/cache/dart-sdk/bin
- 保存退出,然后终端执行
source .bash_profile
让环境变量生效,最后终端执行flutter --version
与dart --version
,可查看flutter与dart的信息,如下所示:
- 第三步:终端执行
flutter doctor
会检测相关的依赖库,会出现以下报错:
- 针对
Android licenses not accepted
,根据提示终端直接执行flutter doctor --android-licenses
- 针对
Flutter plugin not installed
,原因是Android Studio4.1没有安装Flutter插件,安装如下所示:
- 重新执行
flutter doctor
,依然会报错Flutter plugin not installed
,主要原因是android studio 4.1升级过程中,改变了plugin folder的路径
,终端执行命令ln -s ~/Library/Application\ Support/Google/AndroidStudio4.1/plugins ~/Library/Application\ Support/AndroidStudio4.1
,最后再执行flutter doctor
,结果成功,如下所示:
- 第四步:创建Flutter项目,终端执行
flutter create Flutter_01
即可,然后使用Android Studio
打开项目Flutter_01
,然后选择iOS模拟器执行,如下所示:
开发工具的选择
- 官方推荐两个工具:Android Studio和VSCode