Flutter核心概念与学习路线

Flutter的核心Skia与Dart

Flutter官网:https://flutterchina.club/
Dart官网:https://dart.cn/

Skia: 图像渲染引擎

向GPU提供视图数据。

Skia是C++开发,性能强悍的2D图像回执引擎。05年被Google收购。Skia在图形转换、文字渲染、位图渲染表象卓越,提供了友好的API。

SKia目前是Android官方的图像渲染引擎,安卓SDK无需内嵌Skia引擎就可以获得Skia支持。

对于iOS来说,flutter的SDK已经内嵌了Skia渲染引擎,代替了iOS的渲染引擎。因此构建出来的iOS包要比安卓的包大。

由于底层渲染都是通过Skia渲染的,所以Skia保证了同一套代码在安卓和iOS有一致的渲染效果。

Dart语言

语言特性:同时支持JIT和AOT。

界面布局:通过 Dart 编码来定义,声明式编程布局。不需要可视化界面构建器,使用热重载看效果。

线程模型:单线程模型,不存在资源竞争和状态同步。所以Dart中没有线程的概念,只有隔离区的概念Isolate避免了抢占式调度和共享内存。

包管理:有完善的包管理机制。


Flutter架构

image.png

从下到上分为3层:

Embedder:操作系统适配层,实现了渲染Surface 设置,线程设置,以及平台插件等平台相关特性的适配

Engine:主要包含 Skia、Dart 和 Text,实现了 Flutter 的渲染引擎、文字排版、事件处理和 Dart 运行时等功能。Skia 和 Text 为上层接口提供了调用底层渲染和排版的能力,Dart 则为 Flutter 提供了运行时调用 Dart 和渲染引擎的能力。而 Engine 层的作用,则是将它们组合起来,从它们生成的数据中实现视图渲染。

Framework:是一个用 Dart 实现的 UI SDK包含了动画、图形绘制和手势识别等功能。为了在绘制控件等固定样式的图形时提供更直观、更方便的接口,Flutter 还基于这些基础能力,根据 Material 和 Cupertino 两种视觉设计风格封装了一套 UI 组件库。我们在开发 Flutter 的时候,可以直接使用这些组件库。

控件树(Widgets)--->渲染树(渲染对象)[布局-绘制-合成-渲染]

布局:深度优先遍历--->决定各渲染对象在屏幕上的尺寸和位置

渲染对象接受父对象的布局约束参数,决定自己的大小。然后父对象按照控件逻辑决定各个子对象的位置。

布局边界:防止子节点变化导致整个控件树重新布局。可以在某些节点自动或手动设置布局边界,边界内对象的布局变动不会影响边界外的对象。

绘制:深度优先,把所有渲染对象绘制到不同图层。总是先绘制自身再绘制子节点。

重绘边界:在重绘边界内,Flutter 会强制切换新的图层,这样就可以避免边界内外的互相影响,避免无关内容置于同一图层引起不必要的重绘。重绘边界的一个典型场景是 Scrollview。ScrollView 滚动的时候需要刷新视图内容,从而触发内容重绘。而当滚动内容重绘时,一般情况下其他内容是不需要重绘的,这时候重绘边界就派上用场了。

合成:终端设备的页面越来越复杂,因此 Flutter 的渲染树层级通常很多,直接交付给渲染引擎进行多图层渲染,可能会出现大量渲染内容的重复绘制,所以还需要先进行一次图层合成,即将所有的图层根据大小、层级、透明度等规则计算出最终的显示效果,将相同的图层归类合并,简化渲染树,提高渲染效率。

渲染:合并完成后,Flutter 会将几何图层数据交由 Skia 引擎加工成二维图像数据,最终交由 GPU 进行渲染,完成界面的展示


学习路线


image-20211023161421854.png

Flutter工程:

image-20211023162318281.png

Flutter 工程实际上就是一个同时内嵌了 Android 和 iOS 原生子工程的父工程:我们在 lib 目录下进行 Flutter 代码的开发,而某些特殊场景下的原生功能,则在对应的 Android 和 iOS 工程中提供相应的代码实现,供对应的 Flutter 代码引用。Flutter 会将相关的依赖和构建产物注入这两个子工程,最终集成到各自的项目中。而我们开发的 Flutter 代码,最终则会以原生工程的形式运行。

一切皆组件:在 Flutter 中,Widget 是整个视图描述的基础,是 Flutter 功能的抽象描述,是视图的配置信息,同样也是数据的映射,是 Flutter 开发框架中最基本的概念。在 Flutter 的世界里,包括应用(Application)、视图(View)、视图控制器(View Controller)、活动(Activity)、应用(Application)、布局(Layout)等在内的概念,都建立在 Widget 之上,Flutter 的核心设计思想便是一切皆 Widget

Widget 是组件视觉效果的封装,是 UI 界面的载体,使用build方法来构建UI。

常用组件:

StatelessWidget 无状态组件,提供了build接口构建UI

StatefulWidget:有状态组件,提供createState创建状态,State当中提供了build构建UI

有状态和无状态提供不同接口的原因是:组件需要依赖数据完成构建。而有状态的组件数据可能频繁发生变化,由状态去创建组件,用数据来驱动更新,而不是直接操作UI更新视觉。

setState 方法是 Flutter 以数据驱动视图更新的关键函数,它会通知 Flutter 框架刷新页面(执行build方法,根据状态重新构建页面),状态的更改一定要配合使用 setState。Widget 只是视图的“配置信息”,是数据的映射,是“只读”的。对于 StatefulWidget 而言,当数据改变的时候,我们需要重新创建 Widget 去更新界面,这也就意味着 Widget 的创建销毁会非常频繁。为此,Flutter 对这个机制做了优化,其框架内部会通过一个中间层去收敛上层 UI 配置对底层真实渲染的改动,从而最大程度降低对真实渲染视图的修改,提高渲染效率,而不是上层 UI 配置变了就需要销毁整个渲染视图树重建。

MaterialApp 类是对构建 material 设计风格应用的组件封装框架,里面还有很多可配置的属性,比如应用主题、应用名称、语言标识符、组件路由等。

Scaffold:Material 库中提供的页面(脚手架)布局结构,它包含 AppBar、Body,以及 FloatingActionButton等。

命令式的 UI 编程风格:手动创建 UI 组件,在需要更改 UI 时调用其方法修改视觉属性。而 Flutter 采用声明式 UI 设计,我们只需要描述当前的 UI 状态(即 State)即可,不同 UI 状态的视觉变更由 Flutter 在底层完成。

虽然命令式的 UI 编程风格更直观,但声明式 UI 编程方式的好处是,可以让我们把复杂的视图操作细节交给框架去完成,这样一来不仅可以提高我们的效率,也可以让我们专注于整个应用和页面的结构和功能。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,015评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,262评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,727评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,986评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,363评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,610评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,871评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,582评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,297评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,551评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,053评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,385评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,035评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,079评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,841评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,648评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,550评论 2 270

推荐阅读更多精彩内容