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的间距