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

370 阅读3分钟

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上,可以下载.