Widget和Render的常用组件继承关系

Flutter

同时维护iOS和Android项目,将一个功能使用不同语言重复实现一遍。!_! 经历过了1年的痛苦后,决定用flutter来拯救我着所剩无几的青春。

Widget继承关系

将常用的组件,梳理了下继承关系。


Widget

看到Widget作为一个超父类,提供5个子类来构成常用组件。
(1)ProxyWidget
(2)MultiChildRenderObjectWidget
(3)SingleChildRenderObjectWidget
(4)StatefulWidget
(5)StatelessWidget

Render继承关系

Widget组件常用的Render。


Render

RenderBox作为一个超父类。

常用组件

写终端代码从学界面组件开始,整理下项目中用到的组件。

组件 描述
Container 只有一个子Widget。默认充满,包含了padding、margin、color、宽高、decoration等。
Padding 只有一个子Widget。只用于设置Padding,常用于嵌套child,给child设置padding。
Center 只有一个子Widget。只用于居中显示,常用于嵌套child,给child设置居中。
Stack 可以有多个子Widget。子Widget堆叠在一起。(Positioned设置定位布局)
alignment 设置对齐的位置
IndexedStack 显示index的子Widget,其他的Widget隐藏。
Column 可以有多个子Widget。垂直布局。
Row 可以有多个子Widget。水平布局。
Expanded 只有一个子Widget。在Column和Row中充满。(不会超出父视图)
Flexible的tight模式
ListView 可以有多个子Widget。
Align 只有一个子Widget。 绝对布局,可以设置位置。
SizedBox 强制设置它的孩子宽度或者高度为指定值。传width、height、child。
FittedBox 缩放布局,缩放和位置调整。
OverflowBox 溢出父容器显示。
SizedOverflowBox 允许子组件溢出。OverflowBox 会指定新约束传递给孩子,而 SizedOverflowBox 则将原始约束传递给孩子。通过alignment来添加约束。
ConstrainedBox 限定最大最小宽高布局。
LimitedBox 设置最大宽高布局。
AspectRatio 调整宽高比
FractionallySizedBox 百分比布局。子Widget可能超出父Widget。
Table 表格组件,像Excel。
Transform 矩阵转换,可对child做平移、旋转及缩放等操作。
Offstage 控制是否显示组件。
Wrap 按宽高自动换行布局。像邮箱收件人气泡排列。
AnimatedContainer 隐式动画,修改属性会动画更新界面。
Visibility 显示和隐藏组件。最高效的组件。
MaterailApp 作为APP顶层的主要入口,可配置主题,多语言,路由等。
Scaffold 用户页面承载Widget,包含appbar、snackbar、drawer等material design设定。
AppBar 用于Scaffold的appbar,内有标题、二级页面返回按键等。
Text 显示文本,可通过style设置TextStyle来设置字体样式等。
RichText 福文本。设置TextSpan,可以拼接出富文本场景。
TextField 文本输入框。
Image 图片加载。
FadeInImage 图片加载。(可设置默认图片)
FlatButton 按键点击。
PopupMenuButton 弹出菜单组件
AlertDialog 提示对话框组件
SimpleDialog 简单对话框组件
SnackBar 底部的提示框
Card 卡片组件
Divider 分割线
Clip 剪裁处理. 圆形剪裁,圆角矩形剪裁,矩形剪裁,路径剪裁。
Canvas 画布。配合Paint画笔,绘制直线、圆、椭圆、矩形、点和圆弧。
Switch 开关 (通过Transform.scale改变大小)
Dismissible 滑动删除。可和ListView使用。(左滑右滑删除)
Opacity 透明度处理。(整个view设置透明度时使用,不然使用alpha)
DecoratedBox 装饰盒子。可装饰颜色、形状、阴影、渐变及背景图片等。
RotatedBox 旋转盒子
Flexible 使子组件可以灵活地填充主轴的可用空间。Flexible组件只能用于Row、Column或Flex。flex属性,可以设置占空间的百分比。
Spacer 延展采用空白填充,没有子组件。
BoxConstraints 对区域范围的抽象,维护minWidth,maxWidth,minHeight,maxHeight。父渲染对象将约束自上而下传递给子节点,子渲染对象将尺寸自下而上赋予父节点。

其他

将继承关系的UML源文件放到了Widget-Render的Github上,可以下载.

推荐阅读更多精彩内容