【Flutter实战】布局类组件简介

浩浩 等级 387 0 0

4.1 布局类组件简介

布局类组件都会包含一个或多个子组件,不同的布局类组件对子组件排版(layout)方式不同。我们在前面说过Element树才是最终的绘制树,Element树是通过Widget树来创建的(通过Widget.createElement()),Widget其实就是Element的配置数据。在Flutter中,根据Widget是否需要包含子节点将Widget分为了三类,分别对应三种Element,如下表:

Widget 对应的Element 用途
LeafRenderObjectWidget LeafRenderObjectElement Widget树的叶子节点,用于没有子节点的widget,通常基础组件都属于这一类,如Image。
SingleChildRenderObjectWidget SingleChildRenderObjectElement 包含一个子Widget,如:ConstrainedBox、DecoratedBox等
MultiChildRenderObjectWidget MultiChildRenderObjectElement 包含多个子Widget,一般都有一个children参数,接受一个Widget数组。如Row、Column、Stack等

注意,Flutter中的很多Widget是直接继承自StatelessWidget或StatefulWidget,然后在build()方法中构建真正的RenderObjectWidget,如Text,它其实是继承自StatelessWidget,然后在build()方法中通过RichText来构建其子树,而RichText才是继承自MultiChildRenderObjectWidget。所以为了方便叙述,我们也可以直接说Text属于MultiChildRenderObjectWidget(其它widget也可以这么描述),这才是本质。读到这里我们也会发现,其实StatelessWidget和StatefulWidget就是两个用于组合Widget的基类,它们本身并不关联最终的渲染对象(RenderObjectWidget)

布局类组件就是指直接或间接继承(包含)MultiChildRenderObjectWidget的Widget,它们一般都会有一个children属性用于接收子Widget。我们看一下继承关系 Widget > RenderObjectWidget > (Leaf/SingleChild/MultiChild)RenderObjectWidget 。

RenderObjectWidget类中定义了创建、更新RenderObject的方法,子类必须实现他们,关于RenderObject我们现在只需要知道它是最终布局、渲染UI界面的对象即可,也就是说,对于布局类组件来说,其布局算法都是通过对应的RenderObject对象来实现的,所以读者如果对接下来介绍的某个布局类组件的原理感兴趣,可以查看其对应的RenderObject的实现,比如Stack(层叠布局)对应的RenderObject对象就是RenderStack,而层叠布局的实现就在RenderStack中。

在本章中,为了让读者对布局类Widget有个快速的认识,所以我们并不会深入到RenderObject的细节中去。在学习本章时,读者的重点是掌握不同布局组件的布局特点,具体原理和细节等我们对Flutter整体入门后,感兴趣的话再去研究。

收藏
评论区

相关推荐

带你全面了解 Flutter,它好在哪里?它的坑在哪里? 应该怎么学?
回顾了这段时间解答关于 Flutter 的各种问题后,我突然发现很多刚刚接触 Flutter 的萌新,对于 Flutter 都有着不同程度的误解,而每次重复的解释又十分浪费时间,最终我还是决定写篇文章来做个总结。 内容有点长,但是相信能帮你更好地去认识 Flutter 。 Flutter 的起源 Flutter 的诞生其实比较有意思,Flutter
可以用Flutter愉快的开发web 了
简单的试了一下,完全用flutter现有的widget进行开发。github上面有说现在是preview版本,有些widget还不能用。但是最终是会支持整个的flutter现有的UI的。 跟用flutter开发原生app一样。flutter_web还有很长的一段路要走。希望年底能出个像样的版本。 不支持第三方库说明 目前pub.da
Flutter 移动应用开发指南
Flutter 移动应用开发指南 Flutter 作为新一代的跨平台 UI 框架,已经在 Android 和 iOS 移动平台被广泛使用,未来还会进一步扩展到 Web、桌面和嵌入式等平台。只要编写一次代码,就可处处运行,真正做到了全屏制霸。本文将通过从零开发一个类似抖音的短视频应用来展示 Flutter 应用的完整开发过程,以及它的强大性和易用性。
Flutter 2.0 下混合开发浅析
多余的前言 Flutter 2.0 发布时,其中最受大家关注之一的内容就是 AddtoApp 相关的更新,因为除了热更新之外,Flutter 最受大家诟病的就是混合开发体验不好。 为什么不好呢?因为 Flutter 的控件渲染直接脱离了原生平台,也就是无论页面堆栈和渲染树都独立于平台运行,这固然给 Flutter 带来了较好的跨平台体验
【Flutter实战】初识Flutter
1.2 初识Flutter 1.2.1 Flutter简介Flutter 是 Google推出并开源的移动应用开发框架,主打跨平台、高保真、高性能。开发者可以通过 Dart语言开发 App,一套代码同时运行在 iOS 和 Android平台。 Flutter提供了丰富的组件、接口,开发者可以很快地为 Flutter添加 native扩展。同时 Flu
【Flutter 实战】安装Flutter
1.3 搭建Flutter开发环境工欲善其事必先利其器,本节首先会分别介绍一下在Windows和macOS下Flutter SDK的安装,然后再介绍一下配IDE和模拟器的使用。 1.3.1 安装Flutter由于Flutter会同时构建Android和IOS两个平台的发布包,所以Flutter同时依赖Android SDK和iOS SDK,在安装Fl
【Flutter实战】调试Flutter应用
2.5 调试Flutter应用有各种各样的工具和功能来帮助调试Flutter应用程序。 Dart 分析器在运行应用程序前,请运行flutter analyze测试你的代码。这个工具是一个静态代码检查工具,它是dartanalyzer工具的一个包装,主要用于分析代码并帮助开发者发现可能的错误,比如,Dart分析器大量使用了代码中的类型注释来帮
【Flutter实战】资源管理
2.4 资源管理Flutter APP安装包中会包含代码和 assets(资源)两部分。Assets是会打包到程序安装包中的,可在运行时访问。常见类型的assets包括静态数据(例如JSON文件)、配置文件、图标和图片(JPEG,WebP,GIF,动画WebP / GIF,PNG,BMP和WBMP)等。 指定 assets和包管理一样,Flutter
【Flutter实战】调试Flutter应用
2.5 调试Flutter应用有各种各样的工具和功能来帮助调试Flutter应用程序。 Dart 分析器在运行应用程序前,请运行flutter analyze测试你的代码。这个工具是一个静态代码检查工具,它是dartanalyzer工具的一个包装,主要用于分析代码并帮助开发者发现可能的错误,比如,Dart分析器大量使用了代码中的类型注释来帮
解读 Flutter 全平台开发的误解与偏见
Flutter 2.0 发布之后,Web 版本进入了 stable 分支,Desktop 版本也可以在 stable 分支通过 snapshot beta 镜像开始预览使用,导致最近关于 “Flutter 制霸全平台” 之类的话题又被炒作起来,所以本篇主要对这个话题做一次解答。1、Flutter 制霸全平台谷歌官方在 F
Flutter - 深入理解setState更新机制
基于Flutter 1.5的源码剖析, 分析flutter的StatefulWidget的UI更新机制,相关源码:widgets/framework.dartwidgets/binding.dartscheduler/binding.dartlib/ui/window.dartflutter/runtime/runtime_controller.c
Flutter - 深入理解Flutter动画原理
基于Flutter 1.5,从源码视角来深入剖析flutter动画原理,相关源码目录见文末附录一、概述动画效果对于系统的用户体验非常重要,好的动画能让用户感觉界面更加顺畅,提升用户体验。 1.1 动画类型Flutter动画大的分类来说主要分为两大类: 补间动画:给定初值与终值,系统自动补齐中间帧的动画 物理动画:遵循物理学定律
Flutter - 深入理解Flutter应用启动
基于Flutter 1.5,从源码视角来深入剖析flutter应用的启动流程,相关源码目录见文末附录一、概述上一篇文章 已经介绍了FlutterApplication和FlutterActivity的onCreate()方法执行过程, 并触发Flutter引擎的启动,并最终执行到runApp(Widget app)方法,这才刚刚开始执行dart的
Flutter - 深入理解Flutter引擎启动
基于Flutter 1.5,从源码视角来深入剖析flutter引擎的启动流程,相关源码目录见文末附录一、Flutter引擎启动工作 1.1 Flutter启动概览Flutter作为一款跨平台的框架,可以运行在Android、iOS等平台,Android为例讲解如何从Android应用启动流程中衔接到Flutter框架,
字节跳动为什么选用Flutter:并非跨平台终极之选,但它可能是不一样的未来
2018 年 12 月 ,Google 宣布 Flutter 1.0 版本正式发布。截至目前, Flutter 在 Github 上已获得 88000+ 的关注和 11000+ 的 Fork ,其发展速度相当惊人,是今年移动端最火热的开发框架之一。Flutter 大火背后的原因是什么?为什么越来越多的企业和开发者会选择使用 Flutter?Flutter 会