Flutter 核心技术与实战
陈航
前美团点评高级技术专家
42432 人已学习
新⼈⾸单¥59
登录后,你可以任选4讲全文学习
课程目录
已完结/共 48 讲
Flutter 核心技术与实战
15
15
1.0x
00:00/00:00
登录|注册

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

RenderObject的创建与更新在RenderObjectElement类中完成
Element的创建由Flutter在遍历Widget树时完成
不负责Element和RenderObject的创建与更新
构建成RenderObject树,完成最终的渲染
创建相应的RenderObject并关联到Element.renderObject属性上
Widget树生成对应的Element树
完成布局和绘制
实现视图渲染的对象
连接结构化的配置信息到完成最终渲染的桥梁
承载视图构建的上下文数据
Widget的实例化对象
不可变性,数据更新时选择重建Widget树
存储视图渲染的配置信息
视图的结构化描述
在Android/iOS/Web中找到对应的概念
它们之间的对应关系
理解Widget、Element和RenderObject的概念
RenderObjectWidget
Widget、Element和RenderObject的关系
RenderObject
Element
Widget
思考题
陈航介绍了Flutter中的Widget、Element和RenderObject的关系
标题:Widget是什么?它的设计思路和基本原理是怎样的?
参考文章

该思维导图由 AI 生成,仅供参考

你好,我是陈航。
在前面的 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/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

Flutter中的Widget是整个视图描述的基础,是Flutter功能的抽象描述,也是数据的映射。文章介绍了Widget在Flutter中的设计思路和基本原理,以及Widget渲染过程中的关键概念。在Flutter中,Widget、Element和RenderObject构成了视图构建的关键部分。Widget是视图的结构化描述,Element是Widget的实例化对象,负责连接配置信息到最终渲染,而RenderObject则是负责实际视图渲染的对象。文章还介绍了RenderObjectWidget的源码,展示了如何使用Element和RenderObject完成图形渲染工作。通过对这些概念的深入理解,读者可以更好地掌握Flutter的核心概念和技术,从而更高效地构建Flutter应用。 在Flutter中,Widget是整个视图描述的基础,是功能的抽象描述,也是数据的映射。本文介绍了Widget在Flutter中的设计思路和基本原理,以及Widget渲染过程中的关键概念。在Flutter中,Widget、Element和RenderObject构成了视图构建的关键部分。Widget是视图的结构化描述,Element是Widget的实例化对象,负责连接配置信息到最终渲染,而RenderObject则是负责实际视图渲染的对象。通过对这些概念的深入理解,读者可以更好地掌握Flutter的核心概念和技术,从而更高效地构建Flutter应用。

仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《Flutter 核心技术与实战》
新⼈⾸单¥59
立即购买
登录 后留言

全部留言(47)

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

    作者回复: 赞

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

    作者回复: 赞

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

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

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

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

    2019-07-18
    10
  • 加温后的啤酒
    在iOS中,UIView相当于Element,CALayer相当于renderObject。 老师 我的理解对吗?

    作者回复: 可以这么理解

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

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

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

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

    2019-09-14
    4
  • Paradise
    一个Widget可以对应多个Element,因为Widget是不可变的配置信息,而一个Element对应一个RenderObject

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

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

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

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

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

    2019-07-24
    2
收起评论
显示
设置
留言
47
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部