本文主要介绍Flutter的一些特点，以及Mac的开发环境配置过程
flutter特点 ： 美观、快速、高效、开放
跨平台、包含热重载，渲染速度优于RN
图像展示流程
- 原始流程：
- GPU负责图像绘制，图像生成频率即帧率，存放到buffer，屏幕从buffer中取出图像，根据刷新率刷新后显示
- 如果帧率大于刷新率，可能出现buffer中图片覆盖从而导致“撕裂”
- 双重缓存 （双buffer，Back buffer与Frame buffer）
- GPU将数据写入到Back buffer，屏幕从Frame buffer中读取数据
- Vsync垂直脉冲信号负责信息调度，一个屏幕刷新周期完成时，会收到该信号。此时将图像从Back buffer复制到Frame buffer中，并通知CPU/GPU进行下一帧图像的绘制
- 当CPU/GPU绘制图像时间过长，会出现画面卡顿、空白问题
- 三重缓存 （三buffer，双Back buffer与Frame buffer）
- 收到Vsync信号，立即开始下一帧的绘制
- 将绘制完成的图像存储到buffer，依次展示，如果Vsync信号发出时当前绘制还未完成，取缓存中多余的图像进行展示
本质即每次Vsync信号发出后，多缓存一个Buffer作为备用
- Flutter绘制原理
- GPU将信号同步到UI线程，开启图像绘制
- UI线程使用Dart来构建图层树
- 图层树在GPU线程进行合成
- 合成后的视图数据提供给skia引擎（c++编写的开源图形库）
- skia引擎通过OpenGL或者Vulkan将显示内容提供给GPU完成绘制
- 收到垂直信号时进行显示，并通知GPU/CPU下一帧图像进行绘制
Flutter如何学习
- Dart语言学习
- Flutter实战技术
- 底层技术、源码阅读
环境搭建
- 下载flutter sdk，解压
- 配置环境变量，打开文件 vim ~/.bash_profile
添加环境变量：
export FLUTTER_HOME={flutter安装包路径}
export PATH=$PATH:$FLUTTER_HOME/bin
export PATH=${PATH}:flutterSDK地址/bin/cache/dart-sdk/bin
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
更换环境变量
source ~/.bash_profile
安装
flutter -h
查看是否安装完成
flutter --version
dart --version
- 新建项目
flutter create {项目名}
- 开发工具
VSCode或者Android Studio
安装好开发工具后，需要安装两个插件，Flutter和Dart, 可选插件code runner
遇到问题及解决方法：
- Flutter 命令每次都不生效，都需要重新配置环境变量的解决方法
这是因为终端使用zsh环境，加载的是 ~/.zshrc文件，而.zshrc文件中并没有定义任务环境变量。
解决办法是在.zshrc里面加入一行source ~/.bash_profile命令
1）终端内打开.zshrc 方法：输入open -e .zshrc 命令
如果用户目录没有找到 .zshrc 文件 就创建一个 路径跟.bash_profile 在一个路径下 创建方式终端内输入touch .zshrc 就ok了
2）打开后里面添加source ~/.bash_profile 保存就可以了
网友评论