Flutter 组件

  • Align
    对齐布局,指定child的对齐方式
  • AspectRatio
    调整宽高比,根据设置的宽高比调整child组件。适用于需要固定组件宽高比的情形。aspectRatio属性不能为null,必须大于0且有限
  • BaseLine
    基准线布局,所有的child底部所在的同意水平线
baseline:double  baseline数值必须要有,从顶部算
baselineType:TextBaseline baseline类型,必须要有。目前两种类型:alphabetic对齐字符底部的,ideographic对齐表意字符的水平线
  • Center
    居中布局,child处于水平和垂直方向的中间位置
  • Row
    水平布局,对child在水平方向进行排列
  • Column
    垂直布局,对child在垂直方向进行排列
  • Container
    容器布局,是一个组合的Widget,包含定位和尺寸
  • ConstrainedBox
    限定宽高,限定child的最大、最小值。如果child为null,会尽量缩小尺寸
constraints: BoxConstraints   (child的限制条件,限制最大最小宽高)
child:  Widget    (子元素组件)
  • FittedBox
    缩放布局,在自己的尺寸范围内缩放并调整child的位置
fit: 缩放方式,默认值是BoxFix.contain,即child在FittedBox范围内,尽可能大。
contain:在保证child宽高比的前提下,尽可能填满
Alignment:对齐方式,默认值Alignment.center
  • FractionallySizeBox
    百分比布局,根据现有空间按照百分比调整child的尺寸。适用于一个区域里取百分比尺寸时。如果宽高因子为null,则child的宽高会尽可能充满整个区域。
alignment:AlignmentGeometry   对齐方式,不能为null
widthFactor:  double  宽度因子,宽度乘以该值,就是最后宽度
heightFactor: double 
  • GridView
    网格布局,对多行多列同时进行操作。最常用的网格布局是GridView.count,它创建了一个在横轴上具有固定数量 网格快 的平铺布局,和GridView.extent,它使用具有最大横轴范围的 网格快 创建布局。自定义SliverGridDelegate 可生成任意2D排列的子代,包括未对齐或重叠的排列
scrollDirection:enum 滚动方向
reverse:bool 决定滚动方向是否与阅读方向一致
controller:ScrollController 控制滚动的位置
primary:bool 当内容不足以滚动时,是否支持滚动;iOS中,当用户点击状态栏时是否滚动到顶部
physics:ScrollPhysics 控制用户滚动视图的交互
shrinkWrap:bool scrollView在滑动方向上的高度是否由内容高度决定,false:高度为滑动方向上最大允许高度;如果在滑动方向上没有设置约束,则这个字段必须设置为true,否则报错
padding:EdgeInsetsGeometry 用来设置BoxScrollView中子控件与父控件的间距
gridDelegate:SliverGridDelegate 一个控制GridView中子控件与父控件的间距
cacheExtent:double 可见区域的前后会有一定高度的空间去缓存子控件,当滑动就可以迅速呈现
semanticChildCount:Int  将提供语义信息的子代数量

-IndexedStack
栈索引布局,继承自Stack,显示第index个child,其他child是不可见的
-LimitedBox
限定宽高布局,对最大宽高进行限制,不限制最小

maxWidth: double    默认double.infini (最大宽度)
maxheight: double  默认double.infinity  
  • OverflowBox
    溢出父容器显示,允许child超出父容器的范围显示
  • SizeBox
    设置具体尺寸,用特定大小的盒子来限定child宽度和高度。如果宽高为null,该组件会调整自身大小来匹配child尺寸
  • ListView
    列表布局,是一个线性布局的widgets列表。是最常用滑动组件,在滚动方向上一个一个地显示child,在交叉轴中,需要child填充ListView
itemExtent:double  指定Item在滑动方向上的高度,用来提高滑动性能
padding:EdgeInsetsGeometry   用来设置BoxScrollView中子控件与父控件的间距
ScrollDirection: enum 滚动方向
reverse: bool 决定滚动方向是否与阅读方向一致
controller: ScrollController 控制滚动的位置
primary:bool  当内容不足以滚动时,是否支持滚动;对于iOS系统还有一个效果:当用户点击状态栏是是否互动到顶部
physics:ScrollPhysics 控制用户滚动视图的交互
shrinkWrap:bool scrollView在滑动方向上的高度是否由内容高度决定,false:高度为滑动方向上最大允许高度;如果在滑动方向上没有设置约束,则这个字段必须设置为true,否则报错
cacheExtent:double 可见区域的前后会有一定高度的控件去缓存子控件,当滑动时就可以迅速呈现
  • Offstage
    开关布局,控制是否显示组件,默认为true 不显示,

  • Padding
    填充布局,处理容器和child直接的间距

  • Stack/Alignment
    Alignment栈布局,根据Alignment组件的属性将child定位在Stack组件上

  • Stack/Positioned
    Positioned栈布局,根据Positioned组件的属性将child定位在Stack组件上

  • Table
    表格布局,使用表格的行和列进行布局,每一行的高度由内容决定,每一列的宽度由列数决定

columnWidths:Map<int,TableColumnWidth> 设置一列的宽度
defaultColumWidth: TableColumnWidth 默认每一列宽度,默认情况下均分
textDeirection:TextDirection 文字方向
border:TableBorder 表格边框
defaultVerticalAlignment TableCellVerticalAlignment 对齐方向,默认垂直
textBaseLine:TextBaseLine defaultVerticalAlignment 为baseline时,会用到该属性
  • Transform
    矩阵转换,做矩阵变换,对child做平移、旋转、、缩放等操作
transform:Matrix4 一个4x4矩阵
origin:Offset  旋转点,相对于左上角的偏移,默认为左上角顶点
alignment:AlignmentGeometry 对齐方式
transformHitTests:bool 点击区域是否也做相应的改变
  • Wrap
    按宽高自动换行,让child自动换行布局。单行的Wrap 跟Row一样,单列的Wrap跟Column一样。适用于需要按宽度或高度让child自动换行的场景
direction:Axis   默认值Axis.horizontal 主轴方向默认水平
alignment:WrapAlignment 默认WrapAlignment.star 主轴方向对齐方式,默认start
spacing:double  默认0 主轴方向间距
runAlignment:WrapAlignment 默认WrapAlignment.star run的对齐方式,可以理解为新的行或列
runSpacing:double 默认0  run的间距
crossAxisAlignment:WrapAlignment 默认WrapAlignment.star 交叉轴方向对齐方式
textDirection:TextDirection   文字方向
verticalDirection: VerticalDirection  默认  down    child 的摆放顺序
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,491评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,856评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,745评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,196评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,073评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,112评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,531评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,215评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,485评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,578评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,356评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,215评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,583评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,898评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,497评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,697评论 2 335

推荐阅读更多精彩内容