同时维护iOS和Android项目,将一个功能使用不同语言重复实现一遍。!_! 经历过了1年的痛苦后,决定用flutter来拯救我着所剩无几的青春。
Widget继承关系
将常用的组件,梳理了下继承关系。
看到Widget作为一个超父类,提供5个子类来构成常用组件。
(1)ProxyWidget
(2)MultiChildRenderObjectWidget
(3)SingleChildRenderObjectWidget
(4)StatefulWidget
(5)StatelessWidget
Render继承关系
Widget组件常用的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上,可以下载.