初识 Flutter

news/2024/11/17 17:25:59/文章来源:https://www.cnblogs.com/linuxAndMcu/p/18375485

一、Flutter 简介

Flutter 是 Google 推出并开源的移动应用开发框架,主打跨平台、高保真、高性能。开发者可以通过 Dart 语言开发 App,一套代码同时运行在 iOS 和 Android平台。 Flutter 提供了丰富的组件、接口,开发者可以很快地为 Flutter 添加 Native(即原生开发,指基于平台原生语言来开发应用,flutter 可以和平台原生语言混合开发) 扩展。下面我们整体介绍一下 Flutter 技术的主要特点。


1.1 跨平台自绘引擎

Flutter 与用于构建移动应用程序的其他大多数框架不同,因为 Flutter 既不使用 WebView,也不使用操作系统的原生控件。 相反,Flutter 使用自己的高性能渲染引擎来绘制 Widget(组件)。这样不仅可以保证在 Android 和iOS 上 UI 的一致性,也可以避免对原生控件依赖而带来的限制及高昂的维护成本。

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


1.2 高性能

Flutter 高性能主要靠两点来保证:

  • Flutter App 采用 Dart 语言开发。Dart 在 JIT(即时编译)模式下,执行速度与 JavaScript 基本持平。但是 Dart 支持 AOT,当以 AOT模式运行时,JavaScript 便远远追不上了。执行速度的提升对高帧率下的视图数据计算很有帮助。

  • Flutter 使用自己的渲染引擎来绘制 UI ,布局数据等由 Dart 语言直接控制,所以在布局过程中不需要像 RN 那样要在 JavaScript 和 Native 之间通信,这在一些滑动和拖动的场景下具有明显优势,因为在滑动和拖动过程往往都会引起布局发生变化,所以 JavaScript 需要和 Native 之间不停地同步布局信息,这和在浏览器中JavaScript 频繁操作 DOM 所带来的问题是类似的,都会导致比较可观的性能开销。

1.3 采用Dart语言开发

这个是一个很有意思但也很有争议的问题,在了解 Flutter 为什么选择了 Dart 而不是 JavaScript 之前我们先来介绍一下之前提到过的两个概念:JIT 和 AOT。

程序主要有两种运行方式:静态编译与动态解释。静态编译的程序在执行前程序会被提前编译为机器码(或中间字节码),通常将这种类型称为 AOT (Ahead of time)即 “提前编译”。而解释执行则是在运行时将源码实时翻译为机器码来执行,通常将这种类型称为 JIT(Just-in-time)即“即时编译”。

AOT 程序的典型代表是用 C/C++ 开发的应用,它们必须在执行前编译成机器码;而 JIT 的代表则非常多,如JavaScript、python等,事实上,所有脚本语言都支持 JIT 模式。但需要注意的是 JIT 和 AOT 指的是程序运行方式,和编程语言并非强关联的,有些语言既可以以 JIT 方式运行也可以以 AOT 方式运行,如 Python,它可以在第一次执行时编译成中间字节码,然后在之后执行时再将字节码实时转为机器码执行。

现在我们看看 Flutter 为什么选择 Dart 语言?本人根据官方解释以及自己对 Flutter 的理解总结了以下几条(由于其他跨平台框架都将 JavaScript 作为其开发语言,所以主要将 Dart 和 JavaScript 做一个对比):

  1. 开发效率高

    Dart 运行时和编译器支持 Flutter 的两个关键特性的组合:

    • 基于 JIT 的快速开发周期:Flutter 在开发阶段采用 JIT 模式,这样就避免了每次改动都要进行编译,极大地节省了开发时间;
    • 基于 AOT 的发布包: Flutter 在发布时可以通过 AOT 生成高效的机器码以保证应用性能。而 JavaScript 则不具有这个能力。
  2. 高性能

    Flutter 旨在提供流畅、高保真的 UI 体验。为了实现这一点,Flutter 中需要能够在每个动画帧中运行大量的代码。这意味着需要一种既能保证高性能,也不会出现丢帧的编程语言,而 Dart 支持 AOT,在这一点上可以做得比 JavaScript 更好。

  3. 快速内存分配

    Flutter 框架使用函数式流,这使得它在很大程度上依赖于底层的内存分配器。因此,拥有一个能够有效地处理琐碎任务的内存分配器将显得十分重要,在缺乏此功能的语言中,Flutter 将无法有效地工作。当然 Chrome V8 的 JavaScript 引擎在内存分配上也已经做的很好,事实上 Dart 开发团队的很多成员都是来自Chrome 团队的,所以在内存分配上 Dart 并不能作为超越 JavaScript 的优势,而对于Flutter来说,它需要这样的特性,而 Dart 也正好满足而已。

  4. 类型安全和空安全

    由于 Dart 是类型安全的语言,且 2.12 版本后也支持了空安全特性,所以 Dart 支持静态类型检测,可以在编译前发现一些类型的错误,并排除潜在问题,这一点对于前端开发者来说可能会更具有吸引力。与之不同的,JavaScript 是一个弱类型语言,也因此前端社区出现了很多给 JavaScript 代码添加静态类型检测的扩展语言和工具,如:微软的 TypeScript 以及Facebook 的 Flow。相比之下,Dart 本身就支持静态类型,这是它的一个重要优势。

二、Flutter框架结构

我们看一下 Flutter 官方提供的 Flutter 框架图,如下图所示:

Flutter_know_A.png


简单来讲,Flutter 从上到下可以分为三层:框架层、引擎层和嵌入层,下面我们分别介绍:


2.1 框架层

Flutter Framework,即框架层。这是一个纯 Dart 实现的 SDK,它实现了一套基础库,自底向上,我们来简单介绍一下:

  • 底下两层(Foundation 和 Animation、Painting、Gestures)在 Google 的一些视频中被合并为一个dart UI层,对应的是Flutter中的dart:ui包,它是 Flutter Engine 暴露的底层UI库,提供动画、手势及绘制能力。
  • Rendering 层,即渲染层,这一层是一个抽象的布局层,它依赖于 Dart UI 层,渲染层会构建一棵由可渲染对象组成的渲染树,当动态更新这些对象时,渲染树会找出变化的部分,然后更新渲染。渲染层可以说是Flutter 框架层中最核心的部分,它除了确定每个渲染对象的位置、大小之外还要进行坐标变换、绘制(调用底层 dart:ui )。
  • Widgets 层是 Flutter 提供的一套基础组件库,在基础组件库之上,Flutter 还提供了 Material 和 Cupertino 两种视觉风格的组件库,它们分别实现了 Material 和 iOS 设计规范。

Flutter 框架相对较小,因为一些开发者可能会使用到的更高层级的功能已经被拆分到不同的软件包中,使用 Dart 和 Flutter 的核心库实现,其中包括平台插件,例如 camera (opens new window)和 webview (opens new window),以及和平台无关的功能,例如 animations (opens new window)。

我们进行Flutter 开发时,大多数时候都是和 Flutter Framework 打交道。


2.2 引擎层

Engine,即引擎层。毫无疑问是 Flutter 的核心, 该层主要是 C++ 实现,其中包括了 Skia 引擎、Dart 运行时(Dart runtime)、文字排版引擎等。在代码调用 dart:ui库时,调用最终会走到引擎层,然后实现真正的绘制和显示。


2.3 嵌入层

Embedder,即嵌入层。Flutter 最终渲染、交互是要依赖其所在平台的操作系统 API,嵌入层主要是将 Flutter 引擎 ”安装“ 到特定平台上。嵌入层采用了当前平台的语言编写,例如 Android 使用的是 Java 和 C++, iOS 和 macOS 使用的是 Objective-C 和 Objective-C++,Windows 和 Linux 使用的是 C++。 Flutter 代码可以通过嵌入层,以模块方式集成到现有的应用中,也可以作为应用的主体。Flutter 本身包含了各个常见平台的嵌入层,假如以后 Flutter 要支持新的平台,则需要针对该新的平台编写一个嵌入层。


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/785972.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Windows11下安装Docker

一、准备工作 先下载以下资源,暂时不要安装: Docker安装包 Wsl2安装包 二、开始安装 1.打开主板BIOS的虚拟化选项,可以在任务管理器中确实是否已经打开2.勾上虚拟机平台所有选项(建议完成这一步骤重启)3.用管理员身份打开PowerShell,执行下面命令启动wsl dism.exe /onlin…

振弦式应变计 可同步测量温度,监测混凝土结构的应力与应变

振弦式应变计 可同步测量温度,监测混凝土结构的应力与应变振弦式应变计广泛适用于长期埋设在水工建筑物或其他混凝土结构物内部,如梁、柱、桩基、挡土墙、衬砌、墩以及基岩等,用于测量埋设点的线性变形(应变)和应力,同时也可兼测埋设点的温度。GEO SFxxxx系列振弦式应变计…

iPhone 16 即将推出,,这将是苹果最大的升级, 这里有 7 个你不敢相信 的功能

iPhone 16 即将推出,,这将是苹果最大的升级, iphone16有哪些新功能呢?iPhone16值得买么?这里有 7 个你不敢相信 的功能,让我们先睹为快。iphone16有哪些新功能 1. 您现在可以链接两部 iPhone 以在 iOS 18 中发送现金 2.新的AI智能计算器 3.用眼睛控制你的iPhone 4. 阻止使…

苹果电脑如何远程控制?ToDesk三步操作就成功!

随着电子设备深入我们的日常生活,远程控制也成为了人们电脑手机中的常备软件,无论是为了工作、学习还是生活便利,远程控制软件能让我们跨越空间实现不同设备之间的远控连接。目前市面上有众多国内外远控软件,但小社长最常用的还属ToDesk远程控制。它的操作界面简单还易上手…

一个开源完全免费的无损视频或音频的剪切/裁剪/分割/截取和视频合并工具

大家好,今天给大家分享一款致力于成为顶尖跨平台FFmpeg图形用户界面应用的软件工具LosslessCut。LosslessCut是一款致力于成为顶尖跨平台FFmpeg图形用户界面应用的软件工具,专为实现对视频、音频、字幕以及其他相关媒体资产的超高速无损编辑而精心打造。 项目介绍 LosslessCu…

python socket编辑示例 tcp

服务端代码:from socket import socket, AF_INET, SOCK_STREAM# 1. 创建socket对象 AF_INET:用于internet之间的进程通信,SOCK_STREAM:表示TCP协议 server_socket = socket(AF_INET, SOCK_STREAM)# 2. 绑定ip和端口号 ip = 127.0.0.1 port = 8888 server_socket.bind((ip…

python socket编辑示例

服务端代码:from socket import socket, AF_INET, SOCK_STREAM# 1. 创建socket对象 AF_INET:用于internet之间的进程通信,SOCK_STREAM:表示TCP协议 server_socket = socket(AF_INET, SOCK_STREAM)# 2. 绑定ip和端口号 ip = 127.0.0.1 port = 8888 server_socket.bind((ip…

网络流模型

网络流模型 与2sat:2sat求不了最值,但网络流可以。 \(n\le 200 \implies\) 网络流 二分图、最大流模型二分图匹配模型——左右两侧匹配长脖子鹿模型——找到奇偶性,二分化LNDSP模型(P2766)——左右二分图来回跳最小割模型 (无穷大的边表示强限制)子集划分模型——要么属…

听劝❗用AI做职场思维导图仅仅需要几秒钟啊

本文由 ChatMoney团队出品嘿,各位职场朋友们 是不是常常对着密密麻麻的笔记感到焦虑呢? 想整理却无从下手? 别怕,ChatmoneyAI知识库来拯救你的整理困难症啦! 咱们都知道,思维导图是职场中必备的神器 它能帮我们理清思路,记忆知识 但传统做法嘛,不是画得乱七八糟就是费时…

Windows 10 美化 Mac OSX 实用教程

基于MydockFinder和免费主题的Windows 10美化我前几天给新电脑装上了Windows 10系统,想要美化一下,遇到了很多问题,就出了这篇博客,帮大家踩踩坑。 在开始之前,先提醒大家一句: 美化有风险,玩机需谨慎。为以防万一,请大家在进行任何操作前创建一个系统还原点。首先给大…

在MES系统的基础上,电子制造企业如何提高计划排产的准确度

在咨询我司APS计划排程解决方案的客户群体中,电子制造行业的客户的占比高达65%,究其原因是国内电子制造企业大多面临的是小批量、多品种、多非标订单生产模式,而电子产品本身还具有多SKU、替代料号多、工序复杂的情况。 为了保障订单准时交付率和质检合格率,越来越多的电子…

Infisical怎么在Jenkins内调用

参考 https://infisical.com/docs/integrations/cicd/jenkins#jenkins-plugin Jenkins参考 https://plugins.jenkins.io/infisical/ 前提条件安装配置infisical 设置了项目和密钥Infisical创建身份认证 创建身份 Access Control->Machine Identities -> Create identify生…