Flutter上手篇

Flutter 的起源

Flutter 的诞生其实比较有意思,Flutter 诞生于 Chrome 团队的一场内部实验, 谷歌的前端团队在把前端一些"乱七八糟"的规范去掉后,发现在基准测试里性能居然提高了 20 倍,机缘巧合下 Flutter 就这么被立项。

Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。

Flutter特性:

1.快速开发

Flutter的热重载可帮助您快速地进行测试、构建UI、添加功能并更快地修复错误。通过将更新的源代码文件注入正在运行的Dart VM(虚拟机)中工作。这不仅包括添加新类,还包括向现有类添加方法和字段,以及更改现有函数。在iOS和Android模拟器或真机上可以在亚秒内重载,并且不会丢失状态。

2.富有表现力,漂亮的用户界面

使用Flutter内置美丽的Material Design和Cupertino(iOS风格)widget、丰富的motion API、平滑而自然的滑动效果和平台感知,为您的用户带来全新体验。

3.访问本地功能和SDK

通过平台相关的API、第三方SDK和原生代码让您的应用变得强大易用。 Flutter允许您复用现有的Java、Swift或ObjC代码,访问iOS和Android上的原生系统功能和系统SDK。可以使用Flutter作为视图(View)层, 并可以使用已经用Java / ObjC / Swift完成的部分(Flutter支持混合开发)。

Flutter为什么能跨平台且高效

首先,Flutter 自建了一个绘制引擎,底层是由 C++ 编写的引擎,负责渲染,文本处理,Dart VM 等;上层的 Dart Framework 直接调用引擎。避免了以往 JS 解决方案的 JS Bridge、线程跳跃等问题。第二,引擎基于 Skia 绘制,操作 OpenGL、GPU,不需要依赖原生的组件渲染框架。第三,Dart 的引入,是 Flutter 团队做了很多思考后的决定,Dart 有 AOT 和 JIT 两种模式,线上使用时以 AOT 的方式编译成机器代码,保证了线上运行时的效率;而在开发期,Dart 代码以 JIT 的方式运行,支持代码的即时生效(HotReload),提高开发效率。第四,Flutter 的页面和布局是基于 Widget 树的方式,看似不习惯,但这种树状结构解析简单,布局、绘制都可以单次遍历完成计算,而原生布局往往要往复多次计算,"simple is fast"的设计效果。

Flutter架构

Flutter具有三个主要组成部分:

  • 框架层:Flutter框架建立在Dart语言的基础上,在Flutter中一切UI皆Widget,Flutter有两大不同风格的Widget库,一个是基于Material Design(材料设计)风格的组件库;一个是基于cupertino的iOS设计风格的组件库;
  • 引擎层:Flutter引擎使用的是基于C++的2D图形库(称为Skia)。 在这一层中,提供了Dart VM,以提供一个执行环境,用于将Dart代码转换为本地平台可执行代码。 Flutter引擎在Android,iOS中运行,以为widget呈现对应的外观,并根据特定平台通过Channel进行通信;
  • 平台层:Flutter根据不同平台提供了其特定的shell(即Android Shell和iOS Shell),这些shell用来托管Dart VM,以提供对特定的平台API的访问;
Mac环境配置

1.到官网下载Flutter SDK: docs.flutter.dev/get-started... 下载完成解压放到项目常用目录就好。

2.手动在项目中配置Flutter sdk路径和Dart sdk路径:

3.在Android studio中安装Flutter和dart插件。

4.创建Flutter项目:

👀关注公众号:Android老皮!!!欢迎大家来找我探讨交流👀

相关推荐
kymjs张涛2 小时前
OpenClaw 学习小组:初识
android·linux·人工智能
范特西林5 小时前
实战演练——从零实现一个高性能 Binder 服务
android
TT_Close6 小时前
🐟 发布中心进度同步:8 个商店的上传功能开发完毕,正抓紧测试
flutter·npm·visual studio code
范特西林6 小时前
代码的生成:AIDL 编译器与 Parcel 的序列化艺术
android
范特西林6 小时前
深入内核:Binder 驱动的内存管理与事务调度
android
RaidenLiu7 小时前
Flutter Platform Channel 底层架构解析 —— 从 BinaryMessenger 到跨平台消息通信机制
前端·flutter·前端框架
范特西林7 小时前
解剖麻雀:Binder 通信的整体架构全景图
android
范特西林7 小时前
破冰之旅:为什么 Android 选择了 Binder?
android
奔跑中的蜗牛6668 小时前
一次播放器架构升级:Android 直播间 ANR 下降 60%
android
测试工坊10 小时前
Android 视频播放卡顿检测——帧率之外的第二战场
android