前言
Flutter 作为 Google 出品的一个新兴的跨平台移动客户端 UI 开发框架, 正在被越来越多的开发者和组织使用, 包括阿里的咸鱼, 腾讯的微信等.
今天, 我将献上一份 《全面 & 详细的 Flutter 学习指南》, 希望你们会喜欢.
目录
1. 简介
定义: 一款 Google 出品 & 开源的移动客户端 UI 开发框架 (SDK)
作用: 用一套代码同时在 Android,iOS 上快速构建高质量, 高性能的原生用户界面
开发语言: Dart 语言 (高开发效率, 高性能等)
2. 特点
Flutter 的主要特点包括: 使用自身的高性能渲染引擎进行渲染 & Dart 编程语言语言
具体介绍如下:
2.1 高性能渲染引擎
Flutter 进行 UI 绘制时, 使用的是自带的高性能渲染引擎进行绘制渲染 (不使用 webView & 原生控件)
好处: 保证在 Android 和 iOS 上 UI 的一致性 & 避免对原生控件依赖而带来的限制和维护成本.
组成: C,C ++,Dart,Skia(2D 渲染引擎), 具体描述如下:
特别注意:
Flutter 依靠 Flutter Engine 虚拟机在 iOS 和 Android 上运行
Flutter Engine 使用 C/C++ 编写 = 低延迟输入 + 高帧速率
开发人员可通过 Flutter 框架和 API 在内部进行交互
下面, 简单介绍一下 Flutter 的 2D 渲染引擎: Skia
2.2 Dart 语言
介绍 Dart 语言前先介绍两个概念: JIT 和 AOT. 程序主要有两种运行方式: 静态编译 & 动态编译, 具体如下:
特别注意:
JIT 和 AOT 指的是程序运行方式, 和编程语言并非强关联的.
有些语言可以以 JIT 方式 & AOT 方式一起运行, 如 Java, 它可在第一次执行时编译成中间字节码, 然后在之后执行时可以直接执行字节码
通常区分是否为 AOT 的标准就是看代码在执行之前是否需要编译, 只要需要编译, 无论其编译产物是字节码还是机器码, 都属于 AOT
Dart 语言的特点
Dart 语言具备开发效率高, 高性能 & 类型安全的特点
具体如下:
3. 原理解析
3.1 框架结构
Flutter 框架主要分为两层: FrameWork 层, Engine 层, 如下图所示:
说明: 开发时, 主要基于 Framework 层; 运行时, 则是运行在 Engine 上. 每层的具体介绍如下:
3.2 原理概述
开发时, 主要基于 Framework 层; 运行时, 则是运行在 Engine 上
Engine 是 Flutter 的独立虚拟机, 由它适配 & 提供跨平台支持; 因为其存在, Flutter 不使用移动端系统的原生控件, 而是使用自己 Engine 来绘制 Widget (Flutter 的显示单元); Dart 代码是通过 AOT 编译为平台的原生代码, 所以 Flutter 可直接与平台通信, 不需要 JS 引擎的桥接.
同时 Flutter 唯一要求系统提供的是 canvas, 以实现 UI 的绘制.
编译时, 具体如下:
3.3 关于 widget
Flutter 理念:"一切皆为 Widget",Widget 是 Flutter 应用程序用户界面的基本构建块, 具备以下特点:
属于具有一致性的统一对象模型, 与其他将视图, 控制器, 布局和其他属性分离的框架不同. 更新 widget 时更加高效
不可变的, 仅支持一帧, 且每一帧上不会直接更新, 要更新而必须使用 Widget 的状态. 无状态和有状态 Widget 的核心特性相同, 每一帧都会重新构建;
有一个 State 对象, 用于跨帧存储状态数据 & 恢复
4. 特点
Flutter 具备跨平台, 开发效率高 & 高性能的特点
具体说明如下:
4.1 跨平台 & 开发效率高
Flutter 通过使用上述所述的自身渲染引擎, 原理框架 & Widget 运行, 使用一套代码即可同时构建 iOS 和 Android 应用, 从而实现跨平台的特性, 最终提高开发的效率
4.2 高性能
原因 1: 通过其自带的高性能渲染引擎进行渲染
原因 2:Dart 语言本身的语言特性
原因 3: 编译过程特点, 具体如下:
5. 对比
跨平台开发的本质是为了: 增加代码复用, 减少不同平台差异适配的工作量 & 提高开发效率.
目前主流的跨平台开发框架有: React-Native,Weex 和本文提及的 Flutter. 下面, 我先简单介绍 React-Native 和 Weex, 再进行三者的对比.
5.1 React-Native
简介
由 Facebook 出品, 采用了 JavaScript 语言, JSCore 引擎和通过原生渲染的跨平台框架
实现原理
通过编写 JavaScript 语言代码, 通过 React Native 的中间层来调用 Native 端的组件, 最终实现相应的功能. JS 端中所写控件的作用类似 Map 中的 key 值, 对应着 Native 端的对应控件 (如 Android 中 标签对应 ViewGroup 控件).JS 端会通过多个 key 组合成 Dom, 最后交由 Native 端进行解析, 最终渲染出 Native 端的控件.
实现框架
React Native 的架构主要由三层实现. 其中最重要的是由 C++ 实现的中间适配层, 此处最主要封装了 JavaScriptCore 用于执行 JS 的解析, 最终实现了 JS 端与原生端的双向通信交互. 而 React Native 运行在 JavaScriptCore 中.(在 iOS 上直接使用内置的 javascriptcore, 在 Android 则使用 webkit.org 官方开源的 jsc.so)
5.2 Weex
简介
由 Alibaba 出品, 采用了 JavaScript 语言, JS V8 引擎和通过原生渲染的跨平台框架
实现原理
与 React-Native 类似, JS 端会通过多个 key 组合成 Dom, 最后交由 Native 端进行解析, 最终渲染出 Native 端的控件, 但区别在于: Weex 是可以跨三端的 = Android,iOS,Web, 其原因在于在开发过程中, 代码模式, 编译过程, 模板组件, 数据绑定, 生命周期等上层语法是一致, 不同的是 Web 端和 Native 端对 Virtual DOM 执行的解析方法有所区别.
实现框架
weex 的架构主要分为三部分, 具体如下:
5.3 三者对比
注: 对于性能的对比, 从理论上来说 Flutter 应该是最接近原生性能 & 最好的, 但就目前实际应用 & 体验中并没具备很明显的差异化, 后续需进行进一步的验证.
6. 学习方式 & 资料
官网
快速入门 & 学习最好的方式是: 阅读 Flutter 官网的资源, 同时官网也是了解最新 Flutter 发展动态的地方
Flutter 中文网社区
目前 Flutter 最大的中文资源社区, 提供了: Flutter 官网文档翻译, 开源项目 & 案例等学习资源
Stack Overflow
活跃度最高的 Flutter 问答社区, Flutter 开发团队的成员也经常会在上面回答问题
源码
Flutter SDK 的源码具备以下特点: 开源, 示例 & 详细注释, Gallery 是 Flutter 官方示例 App, 其源码在 Flutter 源码 "examples" 目录下
7. 总结
本文全面介绍了 Flutter 入门学习知识, 接下来推出的文章, 我将继续讲解 Flutter 的相关知识, 包括使用语法, 实战等, 感兴趣的朋友可以继续关注我~
好啦, 文章写到这里就结束了, 如果你觉得文章写得不错就给个赞呗? 如果你觉得那里值得改进的, 请给我留言. 一定会认真查询, 修正不足. 谢谢.
希望读到这的您能转发分享和关注一下我, 以后还会更新技术干货, 谢谢您的支持!
转发 + 点赞 + 关注, 第一时间获取最新知识点
Android 架构师之路很漫长, 一起共勉吧!
来源: http://www.jianshu.com/p/eea3e5e9961f