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












网友评论