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老皮!!!欢迎大家来找我探讨交流👀

相关推荐
蒸鱼Yuzheng8 小时前
设备端性能工件可靠导出:断点续传、哈希、manifest 与失败恢复
android·自动化测试·python·adb·数据完整性
美狐美颜sdk10 小时前
直播APP接入美颜SDK后出现卡顿怎么办?从性能瓶颈寻找解决方案
android·人工智能·音视频·美颜sdk·直播美颜sdk
美狐美颜SDK开放平台10 小时前
直播APP开发实战:从摄像头调用到视频美颜sdk集成
android·人工智能·计算机视觉·音视频·直播美颜sdk
alexhilton11 小时前
生命周期感知的多模块启动模式
android·kotlin·android jetpack
三少爷的鞋12 小时前
Android 架构指南:suspend 如何响应取消?别再给 Repository 加 `cancel()`
android
迪飞特科技13 小时前
【无标题】
android·人工智能·本地化大模型
FlightYe13 小时前
视界原理之2D视频(二):视频文件里有什么
android·linux·网络·c++·ffmpeg·音视频·aac
传奇开心果编程13 小时前
【Flutter入门练中学】第8课:动画与过渡
android·学习·flutter·ui·ios
传奇开心果编程15 小时前
【Flutter入门练中学】第11课:状态管理进阶与声明式路由
android·学习·flutter·ui·ios
JasonSJX16 小时前
四端自建播放器怎么落地:Android、iOS、tvOS、Tizen 的 DRM 播放 SDK 技术盘点
android·ios·音视频·视频防录屏·加密保护课程·直播安全