Flutter入门教程(一)Flutter简介
这是Flutter系列第一篇文章,后续会持续更新Flutter相关知识,本篇就主要对于Flutter技术做一个简单的入门介绍
一、Flutter简介
Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的,可以用一套代码同时构建Android和iOS应用,性能可以达到原生应用一样的性能。
一句话总结就是:Flutter是一个跨平台、高性能的移动UI框架
跨平台
Flutter使用自己的高性能渲染引擎来绘制 Widget([ˈwɪdʒɪt]),这样可以保证在 Android 和iOS 上 UI 的一致性,目前 Flutter 已经支持 iOS、Android、Web、Windows、macOS、Linux、Fuchsia(Google新的自研操作系统)等众多平台。
高性能
Flutter的高性能主要靠两点来保证:
- 采用 Dart 语言开发
- 使用自己的渲染引擎来绘制 UI
Dart语言在JIT模式下,执行速度与 JavaScript 基本持平。但是它支持AOT,以 AOT模式运行时,JavaScript 便远远追不上了,执行效率也就大大提升。并且Flutter使用自己的渲染引擎绘制UI,布局数据都由Dart语言直接控制,性能开销比较可观
下面看看Flutter与其他跨平台的移动开发技术比较:
技术类型 | UI渲染方式 | 性能 | 开发效率 | 动态化 | 框架代表 |
---|---|---|---|---|---|
H5 + 原生 | WebView渲染 | 一般 | 高 | 支持 | Cordova、Ionic |
JavaScript + 原生渲染 | 原生控件渲染 | 好 | 中 | 支持 | RN、Weex |
自绘UI + 原生 | 调用系统API渲染 | 好 | Flutter高, Qt低 | 默认不支持 | Qt、Flutter |
二、采用Dart语言开发
采用Dart语言开发,顾名思义文件扩展名以 .dart 结尾。
Flutter为什么会选择 Dart 语言而不选择我们前端鲜为人知的 JavaScript 呢?
开发效率高
- Flutter 在开发阶段采用,采用 JIT 模式,这样就避免了每次改动都要进行编译,极大的节省了开发时间
- Flutter 在发布时可以通过 AOT 生成高效的机器码以保证应用性能。而 JavaScript 则不具有这个能力
高性能
- Flutter 中能够在每个动画帧中运行大量的代码。这意味着需要一种既能提供高性能的语言,而不会出现会丢帧的周期性暂停,而 Dart 支持 AOT,在这一点上可以做的比 JavaScript 更好
快速分配内存
类型安全和空安全
- Dart 是类型安全的语言,支持静态类型检测,可以在编译前发现一些类型的错误,并排除潜在问题
- JavaScript 是一个弱类型语言,需要给JavaScriptdiamagnetic添加静态类型检测的扩展语言和工具
三、Flutter框架结构
这里对Flutter的框架做一个整体介绍,可以有个整体印象
简单来讲,Flutter 从上到下可以分为三层:框架层、引擎层和嵌入层
框架层
- 底下两层被合并为一个dart UI层,对应的是Flutter中的
dart:ui
包,它是 Flutter Engine 暴露的底层UI库,提供动画、手势及绘制能力。 - Rendering 渲染层,依赖于 Dart UI 层,渲染层会构建一棵由可渲染对象的组成的渲染树,当动态更新这些对象时,渲染树会找出变化的部分,然后更新渲染。渲染层可以说是Flutter 框架层中最核心的部分,它除了确定每个渲染对象的位置、大小之外还要进行坐标变换、绘制(调用底层 dart:ui )。
- Widgets 层是 Flutter 提供的的一套基础组件库,在基础组件库之上,Flutter 还提供了 Material 和 Cupertino 两种视觉风格的组件库,它们分别实现了 Material 和 iOS 设计规范。
引擎层
引擎层是Flutter的核心,由C++实现,其中包括了 Skia 引擎、Dart 运行时、文字排版引擎等。在代码调用 dart:ui
库时,调用最终会走到引擎层,然后实现真正的绘制和显示
嵌入层
嵌入层主要是将 Flutter 引擎 ”安装“ 到特定平台上,Flutter 代码可以通过嵌入层,以模块方式集成到现有的应用中,也可以作为应用的主体
Flutter基础介绍就到这里,下一篇讲解Flutter开发环境搭建~~
*****注意:本系列均参照Flutter官网进行整理*****
Flutter入门教程(一)Flutter简介的更多相关文章
- Flutter入门教程(四)第一个flutter项目解析
一.创建一个Flutter工程 1.1 命令行创建 首先我们找一个空目录用来专门存放flutter项目,然后在路径中直接输入cmd: 使用 flutter create <projectname ...
- RabbitMQ入门教程(二):简介和基本概念
原文:RabbitMQ入门教程(二):简介和基本概念 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn ...
- Flutter入门教程(二)开发环境搭建
学习Flutter,首先需要搭建好Flutter的开发环境,下面我将一步步带领大家搭建开发环境并且成功运行flutter项目. Flutter环境配置主要有这几点: 系统配置要求 Java环境 Flu ...
- 【Flutter 3-5】Flutter进阶教程——在Flutter中使用Lottie动画
作者 | 弗拉德 来源 | 弗拉德(公众号:fulade_me) Lottie动画 在移动开发中总是需要展示一些动画特效,作为程序员的我们并不是很擅长用代码做动画,即便是有些动画可以实现,在跨平台的过 ...
- 转载:TypeScript 简介与《TypeScript 中文入门教程》
简介 TypeScript是一种由微软开发的自由和开源的编程语言.它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程.安德斯·海尔斯伯格,C#的首席架构 ...
- WCF入门教程(一)简介
WCF入门教程(一)简介 1.WCF是什么? WCF( Windows Communication Foundation), 是Microsoft为构建面向服务的应用提供的分布式通信编程框架,是.NE ...
- GBDT(MART) 迭代决策树入门教程 | 简介
GBDT(MART) 迭代决策树入门教程 | 简介 http://blog.csdn.net/w28971023/article/details/8240756
- Caliburn.Micro 杰的入门教程6, Screens 和 Conductors 简介
Caliburn.Micro 杰的入门教程1(翻译)Caliburn.Micro 杰的入门教程2 ,了解Data Binding 和 Events(翻译)Caliburn.Micro 杰的入门教程3, ...
- Flutter入门之有状态组件
StatefulComponent使用方法入门 在上一篇Flutter入门之无状态组件中我们讲到了无状态组件,所谓的无状态组件指的就是其内部的状态是来自其父组件并使用final类型的变量来存储,当组件 ...
随机推荐
- MySQL数据库初识、下载使用(针对库、表、记录的增删改查)
今日内容概要 数据演变史 数据库软件的本质 MySQL简介 下载与安装 基本配置 基本SQL语句 内容详细 1.数据演变史 # 1.单独的文本文件 没有固定的存放位置和格式 文件名:user.txt ...
- Solution Set - 《赏竹而格之》
1.「GXOI / GZOI 2019」「洛谷 P5304」旅行者 Link & Submission. 经典二进制分组,没啥好说的. 2. 「SDOI 2019」「洛谷 P5361」 ...
- Solution -「多校联训」染色
\(\mathcal{Description}\) Link. 给定 \(n\) 和 \(q\) 次询问,每次询问给出 \(x,k\),求第 \(x\) 位为 0 且任意两个 1 的下标之差不 ...
- verification 验证环境配置传递
验证环境配置传递 tc配置env 继承关系: tc_base->tc_base_bt->tc_xx base_env->xx_env base_env_cfg->xx_env_ ...
- MLHPC 2016 | Communication Quantization for Data-parallel Training of Deep Neural Networks
本文主要研究HPC上进行数据并行训练的可行性.作者首先在HPC上实现了两种通信量化算法(1 Bit SGD以及阈值量化),然后提出了自适应量化算法以解决它们的缺点.此外,发挥出量化算法的性能,作者还自 ...
- dbeaver安装配置
安装出现库依赖没有,可以添加maven仓库 修改字体:小四
- Scala学习笔记(详细)
第2章 变量 val,var,声明变量必须初始化:变量类型确定后不可更改 数据类型:与java有相同的数据类型,在scala中数据类型都是对象 特殊类型:Unit:表示无值,只有一个实例值写出(),相 ...
- 哈工大 计算机网络 实验三 IPv4 分组收发实验&IPv4 分组转发实验
计算机网络实验代码与文件可见github:计算机网络实验整理 实验名称 IPv4 分组收发实验&IPv4 分组转发实验 实验目的: (注:实验报告模板中的各项内容仅供参考,可依照实际实验情况进 ...
- 关于UI自动化IOS元素定位方法说明
1. 元素属性介绍 下图是通过weditor定位的微博的"我的钱包",各属性如下图: className:元素类型,如:XCUIElementTypeButton isEnable ...
- 微信小程序书简易支付
这里结合了上一篇的手机号登录接下来的实现功能 https://www.cnblogs.com/xiaoyantongxue/p/15472915.html 登录后进入课程选择页面 1:数据库填入数据 ...