Flutter核心技术与实战
陈航
美团点评高级技术专家
立即订阅
6150 人已学习
课程目录
已完结 47 讲
0/4登录后,你可以任选4讲全文学习。
课前必读 (3讲)
开篇词 | 为什么每一位大前端从业者都应该学习Flutter?
免费
01 | 预习篇 · 从0开始搭建Flutter工程环境
02 | 预习篇 · Dart语言概览
Flutter开发起步 (3讲)
03 | 深入理解跨平台方案的历史发展逻辑
04 | Flutter区别于其他方案的关键技术是什么?
05 | 从标准模板入手,体会Flutter代码是如何运行在原生系统上的
Dart语言基础 (3讲)
06 | 基础语法与类型变量:Dart是如何表示信息的?
07 | 函数、类与运算符:Dart是如何处理信息的?
08 | 综合案例:掌握Dart核心特性
Flutter基础 (13讲)
09 | Widget,构建Flutter界面的基石
10 | Widget中的State到底是什么?
11 | 提到生命周期,我们是在说什么?
12 | 经典控件(一):文本、图片和按钮在Flutter中怎么用?
13 | 经典控件(二):UITableView/ListView在Flutter中是什么?
14 | 经典布局:如何定义子控件在父容器中排版的位置?
15 | 组合与自绘,我该选用何种方式自定义Widget?
16 | 从夜间模式说起,如何定制不同风格的App主题?
17 | 依赖管理(一):图片、配置和字体在Flutter中怎么用?
18 | 依赖管理(二):第三方组件库在Flutter中要如何管理?
19 | 用户交互事件该如何响应?
20 | 关于跨组件传递数据,你只需要记住这三招
21 | 路由与导航,Flutter是这样实现页面切换的
Flutter进阶 (17讲)
22 | 如何构造炫酷的动画效果?
23 | 单线程模型怎么保证UI运行流畅?
24 | HTTP网络编程与JSON解析
25 | 本地存储与数据库的使用和优化
26 | 如何在Dart层兼容Android/iOS平台特定实现?(一)
27 | 如何在Dart层兼容Android/iOS平台特定实现?(二)
28 | 如何在原生应用中混编Flutter工程?
29 | 混合开发,该用何种方案管理导航栈?
30 | 为什么需要做状态管理,怎么做?
31 | 如何实现原生推送能力?
32 | 适配国际化,除了多语言我们还需要注意什么?
33 | 如何适配不同分辨率的手机屏幕?
34 | 如何理解Flutter的编译模式?
35 | Hot Reload是怎么做到的?
36 | 如何通过工具链优化开发调试效率?
37 | 如何检测并优化Flutter App的整体性能表现?
38 | 如何通过自动化测试提高交付质量?
Flutter综合应用 (6讲)
39 | 线上出现问题,该如何做好异常捕获与信息采集?
40 | 衡量Flutter App线上质量,我们需要关注这三个指标
41 | 组件化和平台化,该如何组织合理稳定的Flutter工程结构?
42 | 如何构建高效的Flutter App打包发布环境?
43 | 如何构建自己的Flutter混合开发框架(一)?
44 | 如何构建自己的Flutter混合开发框架(二)?
结束语 (1讲)
结束语 | 勿畏难,勿轻略
特别放送 (1讲)
特别放送 | 温故而知新,与你说说专栏的那些思考题
Flutter核心技术与实战
登录|注册

09 | Widget,构建Flutter界面的基石

陈航 2019-07-18
你好,我是陈航。
在前面的 Flutter 开发起步和 Dart 基础模块中,我和你一起学习了 Flutter 框架的整体架构与基本原理,分析了 Flutter 的项目结构和运行机制,并从 Flutter 开发角度介绍了 Dart 语言的基本设计思路,也通过和其他高级语言的类比深入认识了 Dart 的语法特性。
这些内容,是我们接下来系统学习构建 Flutter 应用的基础,可以帮助我们更好地掌握 Flutter 的核心概念和技术。
在第 4 篇文章“Flutter 区别于其他方案的关键技术是什么?”中,我和你分享了一张来自 Flutter 官方的架构图,不难看出 Widget 是整个视图描述的基础。这张架构图很重要,所以我在这里又放了一次。
图 1 Flutter 架构图
备注:此图引自Flutter System Overview
那么,Widget 到底是什么呢?
Widget 是 Flutter 功能的抽象描述,是视图的配置信息,同样也是数据的映射,是 Flutter 开发框架中最基本的概念。前端框架中常见的名词,比如视图(View)、视图控制器(View Controller)、活动(Activity)、应用(Application)、布局(Layout)等,在 Flutter 中都是 Widget。
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《Flutter核心技术与实战》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(26)

  • 竹之同学
    如果用 Vue 来比喻的话,Widget 就是 Vue 的 template;Element 就是 virtual DOM;RenderObject 就是DOM,不知道这种想法对不?

    作者回复: 赞

    2019-07-18
    18
  • 大土豆
    React:JSX->虚拟DOM->浏览器DOM
    React Native:JSX->虚拟DOM->Android/iOS原生控件
    flutter:Widget->Element(类似虚拟DOM,只是一种数据结构)-> RenderObject 交给底层渲染

    作者回复: 赞

    2019-07-19
    1
    8
  • KrystalJake
    您好:
    我看有的文档(flutter in action)会说一个Widget会对应多个Element,因为Element是根据Widget创建的,您的分享里说一个渲染点对应可能对应多个Widget,还是不太理解Widget,Element,RenderObject之间的关系,什么情况下一对一,一对多或多对一,希望能详细讲解一下,谢谢

    作者回复: Element是可复用的,只要Widget前后类型一样。比如Widget是蓝色的,重建后变红色了,Element是会复用的。所以是多个Widget(销毁前后)会对应一个Element

    2019-07-18
    1
    6
  • puppy_love
    flutter渲染原理相关文章看了太多了,但是大部分都是根据图一的flutter架构图重复描述(就好像Android的架构图反复叙述没有意义),刚开始看到这张图的时候以为又是一篇雷同文章,没想到后面的阐述这么清晰生动,让我对flutter的渲染原理有了一个立体的理解,也对flutter更有信心了
    2019-07-19
    5
  • 加温后的啤酒
    在iOS中,UIView相当于Element,CALayer相当于renderObject。 老师 我的理解对吗?

    作者回复: 可以这么理解

    2019-07-22
    4
  • 丁某某
    flutter 将Widget设计成不可变,怎么理解?

    作者回复: 变了就销毁重建

    2019-07-18
    2
  • Keep-Moving
    文中提到的绘制和渲染的区别是什么呢?

    作者回复: 绘制侧重绘图命令(GPU前),渲染侧重最终呈现(GPU后)

    2019-07-18
    2
  • Tony
    Element 则是 Widget 的一个实例化对象是什么含义

    作者回复: 两层意思:1.表示Widget是一个配置,Element才是最终的对象;2.Element是通过遍历Widget树时,调用Widget的方法创建的

    2019-09-14
    1
  • davidzhou
    在iOS里面UIKit的UIView,对应widget,core animation的CALayer对应element,core graphics的context对应renderobject,不知道有没有理解到位

    作者回复: UIKit其实没有widget这一层

    2019-07-22
    1
  • Longwei243
    listview想要通过代码滑动到某个item有什么办法吗?item的高度都是不固定的

    作者回复: ScrollController确实还不支持,可以关注下这个issue:https://github.com/flutter/flutter/issues/12319

    2019-07-18
    1
  • 满大大
    RenderObjectWidget 本身并不负责这些对象的创建与更新,拿它有啥用啊

    作者回复: RenderObjectWidget是渲染的起点,也是这些对象的载体啊。它自己不负责他们的创建和更新,但是提供了创建和更新的方法让框架在合适的时机调用

    2019-11-20
  • outman
    请教个问题。RenderObjectWidget是通过RenderObject来进行布局绘制。那么继承StatefulWidget/StatelessWidget的,是怎么进行布局绘制的呢,他们会创建ComponentElement,而不是RenderObjectElement,好像不会创建RenderObject。

    作者回复: 交给build中返回的那个Widget去做布局/绘制

    2019-10-30
  • xuelian
    举个例子,我准备写自定义的navagationBar,开始用的bottomBar,他的children需要是Widget.Flutter中的Button是不带文字+图片的,所以想到用navagationBarItem.但是报错了,说type不是Widget.这在iOS中他们都是UIView,这说明Widget不是单纯对应View.总的来说他是一个狭义上的“对象”,如老师上面说一切皆Widget,和React的一切皆组件一样,都是被特殊定义的“对象”.
    2019-10-17
  • GeekRyeagler
    iOS中,大部分情况没有Widhet。但是NavigationBar对应Element,NavigationBarItem对应Widget。可以这样理解吗?老师

    作者回复: 按照这个标准他俩对应Element更合适

    2019-10-13
  • 雷声大
    Flutter UI的理念更偏向前端框架, 终端从来没这么搞过
    2019-10-04
  • 夜色下云淡风轻
    有界面的Widget会生成Element,Element生成对应的RenderObject进行实际的布局绘制工作;而如果没有界面就不会生成Element自然也就没有RenderObject,Element和RenderObject必定是对应的这样理解对吗?

    作者回复: 大部分对;Element主要是做复用判断的,所以每个Widget都有Element,RenderObject只有可视的控件才有

    2019-09-02
  • 这得从我捡到一个鼠标垫开始说起
    你是如何理解 Widget、Element 和 Render?
    答:Widget描述了整个布局,从而构建出一棵树。flutter遍历这棵树的每一个widget,从而构造出对应的Element对象,Element对象再构造出对应的RenderObject对象。由于Widget是不可变的,而Element可变。每当Widget变化的时候,这个Widget会被重新创建,Element发现Widget重新创建后,就改变自身对应的部分同时也改变RenderObject对应的部分。通过阅读这篇文章,我的理解是,他们确实是一一对应的。

    作者回复: Widget和Element是一一对应的,RenderObject不是,只有实际需要布局和绘制的控件才会有RenderObject,参考文中对RenderObjectWidget的源码分析

    2019-08-23
  • 张简
    widget是数据的映射,数据来源于state(可变widget)和初始化数据(不可变widget)。可以这么理解吗?

    作者回复: 可以这么理解

    2019-08-22
  • 🌙
    widget是保存的控件的属性值吗?element是该控件对应的对象?能不能举个例子来说明一下,不是很懂

    作者回复: element是一个介于widget与renderobject的中间类,用来进行渲染资源复用的

    2019-08-14
  • mαnajay
    我想问下 flutter 关于GPU 离屏渲染 这块有和iOS之类的不一样的地方吗?
    比如圆角 ,阴影, mask ,不透明多层合并 等 处理

    作者回复: 这块RenderObject帮你自动做了,一般情况下不需要管这么底层的渲染机制。

    2019-07-24
收起评论
26
返回
顶部