Flutter知识整理（一）

发酵的面粉团子
407 阅读7分钟

一、Flutter是什么?

1.1 Flutter 技术出现的背景

原生开发与跨平台开发

  • 原生应用程序：指某个移动平台（安卓或者iOS)所特有的应用，使用相应平台支持的开发工具及语言，直接可调用系统的SDK API

    • 优点：可访问系统平台全部功能 速度快、性能高、复杂动画绘制、整体用户体验好
    • 缺点：平台特定，开发成本高，内容固定，有新功能需要发版更新

  • 跨平台 ：

    • H5 + 原生：将 App 中需要动态变动的内容通过HTML5（简称 H5）来实现，通过原生的网页加载控件WebView （Android）或 WKWebView（iOS）来加载（优点：动态内容通过H5、web)实现，更新只用替换web内容；缺点：性能体验不好，H5代码是运行在 WebView 中，而 WebView 实质上就是一个浏览器内核，其 JavaScript 依然运行在一个权限受限的沙箱中，所以对于大多数系统能力都没有访问权限，需要桥接进行通信，复杂动画，界面 web不堪重负

    • JavaScript 开发 + 原生渲染 （React Native、Weex）

      React Native （简称 RN ）是 Facebook 于 2015 年 4 月开源的跨平台移动应用开发框架，是 Facebook 早先开源的 Web 框架 React 在原生移动应用平台的衍生产物，目前支持 iOS 和 Android 两个平台；

      React 是一个响应式的 Web 框架；响应式编程：状态改变则UI随之自动改变

      React Native 是 React 在原生移动应用平台的衍生产物

      React Native 和 React 的区别： 主要的区别在于虚拟 DOM 映射的对象是什么。React中虚拟 DOM 最终会映射为浏览器 DOM 树，而 RN 中虚拟 DOM会通过 JavaScriptCore 映射为原生控件。

      JavaScriptCore 是一个JavaScript解释器，它在React Native中主要有两个作用：

      1. 为 JavaScript 提供运行环境。
      2. 是 JavaScript 与原生应用之间通信的桥梁，作用和 JsBridge 一样，事实上，在 iOS 中，很多 JsBridge 的实现都是基于 JavaScriptCore 。

      而 RN 中将虚拟 DOM 映射为原生控件的过程主要分两步：

      1. 布局消息传递； 将虚拟 DOM 布局信息传递给原生；
      2. 原生根据布局信息通过对应的原生控件渲染；

      Weex 是阿里巴巴于 2016 年发布的跨平台移动端开发框架，思想及原理和 React Native 类似，底层都是通过原生渲染的，不同是应用层开发语法 （即 DSL，Domain Specific Language）：Weex 支持 Vue 语法和 Rax 语法，Rax 的 DSL(Domain Specific Language) 语法是基于 React JSX 语法而创造，而 RN 的 DSL 是基于 React 的，不支持 Vue

      JavaScript 开发 + 原生渲染 优缺点：

      • 优点：采用web开发技术栈，上手快，原生渲染，性能比h5高很多，动态化较好，支持热更新
      • 缺点： 渲染需要JS和原生通信，频繁通信会卡顿，渲染依赖原生控件

    • 自绘UI + 原生 (Qt for mobile、Flutter)：

      通过在不同平台实现一个统一接口的渲染引擎来绘制UI，而不依赖系统原生控件，所以可以做到不同平台UI的一致性

  • Flutter

    Flutter 是 Google 发布的一个用于创建跨平台、高性能移动应用的框架，自绘引擎，使用自身的布局、绘制系统

    Flutter 既不使用 WebView，也不使用操作系统的原生控件。 相反，Flutter 使用自己的高性能渲染引擎来绘制 Widget（组件）

    Flutter 底层使用 Skia 作为其 2D 渲染引擎，Skia 是 Google的一个 2D 图形处理函数库，包含字型、坐标转换，以及点阵图，它们都有高效能且简洁的表现。Skia 是跨平台的，并提供了非常友好的 API，目前 Google Chrome浏览器和 Android 均采用 Skia 作为其 2D 绘图引擎

    image.png

    Flutter 从上到下可以分为三层：框架层、引擎层和嵌入层

    • 框架层：

      • 底下两层在Flutter中dart:ui ,是Flutter Engine 暴露的底层UI库，提供了动画、手势及绘制能力
      • Rendering 渲染层，依赖dart ui 层 渲染层会构建一棵由渲染对象组成的渲染树；
      • Widgets 是flutter提供的一套基础组件库，在基础组件库上，还提供了material和Cupertino两种视觉风格组件库；

    • 引擎层 Engine ：该层主要是 C++ 实现，其中包括了 Skia 引擎、Dart 运行时、文字排版引擎等。在代码调用 dart:ui库时，调用最终会走到引擎层，然后实现真正的绘制和显示。

    • 嵌入层 Embedder：Flutter 最终渲染、交互是要依赖其所在平台的操作系统 API，嵌入层主要是将 Flutter 引擎 ”安装“ 到特定平台上。嵌入层采用了当前平台的语言编写，例如 Android 使用的是 Java 和 C++， iOS 和 macOS 使用的是 Objective-C 和 Objective-C++，Windows 和 Linux 使用的是 C++。 Flutter 代码可以通过嵌入层，以模块方式集成到现有的应用中，也可以作为应用的主体。

1.2 总结：什么是flutter

Flutter是一个UI SDK(Software Development Kit)

可以进行移动端(iOS、Android)，Web端(Beta)，桌面(technical preview)，跨平台解决方案;

移动端目前已经很多公司在用，Google、阿里、腾讯特别是阿里的咸鱼团队，为Flutter做了非常多的贡献;

1.3 Flutter 文档链接

Dart官方文档 ：dart.cn/guides Flutter官方文档 ：flutter.cn/docs Flutter英文 docs.flutter.dev/get-started Flutter中文学习网 ：flutterchina.club/get-started… 《Flutter实战.第二版》book.flutterchina.club/preface.htm…

1.4、Flutter的特点

  • 美观: 内置Material Design和Cupertino widget
  • 快速: Flutter 的 UI 渲染性能很好。在生产环境下，Flutter 将代码编译成机器码执行，并充分利用 GPU 的图形加速能力，因此使用Flutter 开发的移动应用即使在低配手机上也能实现每秒 60 帧的 UI 渲染速度Flutter 引擎使用 C++ 编写，包括高效的 Skia 2D 渲染引擎，Dart 运行时和文本渲染库
  • 高效 :Hot Reload (热重载) ，在前端已经不是什么新鲜的东西，但在移动端之前一直是没有的
  • Flutter 是开放的，它是一个完全开源的项目

1.5 Flutter 绘制原理

image.png

  • GPU将信号同步到 UI 线程
  • UI 线程用Dart来构建图层树
  • 图层树在GPU 线程进行合成
  • 合成后的视图数据提供给Skia 引擎
  • Skia 引擎通过OpenGL 或者 Vulkan将显示内容提供给GPU
注意：渲染引擎skia
Skia就是 Flutter向 GPU提供数据的途径。
Skia(全称Skia Graphics Library(SGL))是一个由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 保证了同一套代码调用在 Android 和 iOS 平台上的渲染效果是完全一致的。
​

1.6 flutter与React Native的本质区别

  • React Native 之类的框架，只是通过 JavaScript 虚拟机扩展调用系统组件，由 Android 和 iOS 系统进行组件的渲染;
  • Flutter 是自己完成了组件渲染的闭环

1.7 安装和配置

安装教程： docs.flutter.dev/get-started…

avatar
文章
阅读
粉丝