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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,772评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,458评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,610评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,640评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,657评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,590评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,962评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,631评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,870评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,611评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,704评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,386评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,969评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,944评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,179评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,742评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,440评论 2 342

推荐阅读更多精彩内容