Flutter 基础控件属性介绍

Container 容器组件

height width child:常用属性
alignment:topCenter:顶部居中对齐 topLeft:顶部左对齐 topRight:顶部右对齐 center: 水平垂直居中对齐 centerLeft:垂直居中水平居左对齐 centerRight:垂直居中水 平居右对齐 bottomCenter底部居中对齐 bottomLeft:底部居左对齐 bottomRight:底部居右对齐
decoration:decoration: BoxDecoration( color: Colors.blue, border: Border.all( color: Colors.red, width: 2.0), borderRadius:BorderRadius.circular((8)),// 圆角 , boxShadow: [ BoxShadow( color: Colors.blue, offset: Offset(2.0, 2.0), blurRadius: 10.0, ) ], ) //LinearGradient 背景线性渐变 RadialGradient径向渐变 gradient: LinearGradient( colors: [Colors.red, Colors.orange], ))
margin:margin属性是表示Container与外部其他组件的距离。 EdgeInsets.all(20.0)
padding:padding就是Container的内边距,指Container边缘与Child之间的距离 padding:EdgeInsets.all(10.0)
transform:让Container容易进行一些旋转之类的transform: Matrix4.rotationZ(0.2)

Text 文本组件

textAlign:文本对齐方式(center居中,left左对齐,right右对齐,justfy两端对齐)
textDirection:文本方向(ltr从左至右,rtl从右至左)
overflow:文字超出屏幕之后的处理方式(clip裁剪,fade渐隐,ellipsis省略号)
textScaleFactor:字体显示倍率
maxLines:文字显示最大行数
style:字体的样式设置-TextStyle
TextStyle->decoration:文字装饰线(none没有线,lineThrough删除线,overline上划线, underline下划线)
TextStyle->decorationColor:文字装饰线颜色
TextStyle->decorationStyle:文字装饰线风格([dashed,dotted]虚线,double两根线,solid一根实线, wavy波浪线)
TextStyle->wordSpacing:单词间隙(如果是负值,会让单词变得更紧凑
TextStyle->letterSpacing:字母间隙(如果是负值,会让字母变得更紧凑)
TextStyle->fontStyle:文字样式(italic斜体,normal正常体)
TextStyle->fontSize:文字大小
TextStyle->color:文字颜色
TextStyle->fontWeight:字体粗细(bold粗体,normal正常体)

Image 图片组件

color和 colorBlendMode:设置图片的背景颜色,通常和colorBlendMode配合一起使
fit:BoxFit-fit属性用来控制图片的拉伸和挤压,这都是根据父容器来 的。 BoxFit.fill:全图显示,图片会被拉伸,并充满父容器。 BoxFit.contain:全图显示,显示原比例,可能会有空隙。 BoxFit.cover:显示可能拉伸,可能裁切,充满(图片要充 满整个容器,还不变形)。 BoxFit.fitWidth:宽度充满(横 向充满),显示可能拉伸,可能裁切。 BoxFit.fitHeight : 高度充满(竖向充满),显示可能拉伸,可能裁切。 BoxFit.scaleDown:效果和contain差不多,但是此属性不 允许显示超过源图片大小,可小不可大。
repeat:ImageRepeat.repeat : 横向和纵向都进行重复,直到铺满整 个画布。ImageRepeat.repeatX: 横向重复,纵向不重复。 ImageRepeat.repeatY:纵向重复,横向不重复。
width height:一般结合ClipOval才能看到效果

ListView 列表组件

scrollDirection:Axis.horizontal水平列表Axis.vertical垂直列表
padding:EdgeInsetsGeometry内边距
resolve:组件反向排序

GridView 网格组件

scrollDirection:Axis滚动方法
padding:EdgeInsetsGeometry内边距
resolve:组件反向排序
crossAxisSpacing``:水平子Widget之间间距mainAxisSpacing:垂直子Widget之间间距crossAxisCount:用在GridView.count,一行的Widget数量maxCrossAxisExtent:用在GridView.extent,横轴子元素的最大长

childAspectRatio:子Widget宽高比例
gridDelegate:SliverGridDelegateWithFixedCrossAxisCount SliverGridDelegateWithMaxCrossAxisExtent,控制布局主要用在 GridView.builder里面

Card 卡片组件

elevation:阴影值的深度
shadowColor:阴影颜色
clipBehavior:clipBehavior 内容溢出的剪切方式 Clip.none不剪切 Clip.hardEdge裁剪但不应 用抗锯齿 Clip.antiAlias裁剪而且抗锯齿 Clip.antiAliasWithSaveLayer带有抗锯 齿的剪辑,并在剪辑之后立即保存saveLayer
Shape:Card的阴影效果,默认的阴影效果为圆角的长方形边。 shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10))),

Button 按钮组件

onPressed:按下按钮时触发的回调,接收一个方法,传null表示按钮禁用,会显示 禁用相关样式
style:通过ButtonStyle装饰
ButtonStyle->foregroundColor:文本颜色
ButtonStyle->backgroundColor:按钮的颜色
ButtonStyle->shadowColor:阴影颜色
ButtonStyle->elevation:阴影的范围,值越大阴影范围越大
ButtonStyle->shape:设置按钮的形状 shape: MaterialStateProperty.all( RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)))
ButtonStyle->side:设置边框 MaterialStateProperty.all(BorderSide(width:1,color: Colors.red))

Row和Column 线性布局组件

mainAxisAlignment:主轴的排序方式
crossAxisAlignment:次轴的排序方式

AspectRatio 适配组件

aspectRatio:宽高比,最终可能不会根据这个值去布局,具体则要看综合因素,外层是否允许
按照这种比率进行布局,这只是一个参考值

Wrap 流布局组件

direction:主轴的方向,默认水平
alignment:主轴的对其方式
spacing:主轴方向上的间距
textDirection:文本方向
verticalDirection:定义了children摆放顺序,默认是down,见Flex相关属性介绍
runAlignment:run的对齐方式。run可以理解为新的行或者列,如果是水平方向布局的话, run可以理解为新的一行
runSpacing:run的间距

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念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

推荐阅读更多精彩内容