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上，可以下载.
网友评论