Flutter 从容器Container说起,引申更多知识结构

类Container的构造函数12个参数

Container构造函数的12个参数

Contrainer({                         //参数可选,不是命名参数
Key key,                             //
AlignmentGeometry alignment,         //设置子组件的对齐方式
EdgeInsetsGeometry padding,         //设置容器的内边距
Color color,                        //容器的颜色
Decoration decoration,              //容器的修饰属性也可设背景颜色,但不能与color同用!
Decoration foregroundDecoration,    //容器前景修饰, 同上面的一样来赋值
double width,                   	//容器的宽度    
double height,                     	//容器的高度度
BoxConstraints constraints,        	//设置子组件的约束
EdgeInsetsGeometry margin,      	//设置容器的外边距, 同padding的赋值用EdgeInsets
Matrix4 transform,                 	//容器的形状变化属性,旋转和缩放等
Widget child	                    //可放单个子组件widget
})

以上参数中key , width , height , child 容易明白,其他几个参数将作详细的说明.

一 Container的参数AlignmentGeometry alignment

参数AlignmentGeometry继承自Object, 而Alignment继承自AlignmentGeometry ,因此该参数可用类Alignment来赋值.

1) 类Alignment定义常量有

bottomCenter → const Alignment  //底部居中
bottomLeft → const Alignment    //底部靠左
bottomRight → const Alignment
center → const Alignment
centerLeft → const Alignment
centerRight → const Alignment
topCenter → const Alignment
topLeft → const Alignment
topRight → const Alignment

二 Container的参数EdgeInsetsGeometry padding

继承关系:Object >> EdgeInsetsGeometry >> EdgeInsets
padding的值可用EdgeInsets,而使用构造函数即可
EdgeInsets.all(double value)
EdgeInsets.fromLTRB(double left double top double right double bottom)

三 Container的参数Color color

1) 使用类Color

Color(0xFF42A5F5);
Color.fromARGB(0xFF, 0x42, 0xA5, 0xF5);      //构造函数
Color.fromARGB(255, 66, 165, 245);           //构造函数
Color.fromRGBO(66, 165, 245, 1.0);           //构造函数

2) 使用material库的类Colors常量

Colors.pink
Colors.pink[400]
Colors.pink[700]
Colors.pinkAccent
Colors.red
Colors.redAccent
Colors.deepOrange
Colors.deepOrangeAccent
Colors.orange等等还有很多各种颜色的常量

四 Container的参数Decoration decoration

这个参数修饰容器的背景
具体BoxDecoration来修饰赋值

BoxDecoration构造函数的参数

Color color, 				                    	  	    //容器背景色
DecorationImage image,                     	//设置背景图片
BoxBorder border,                                  	//容器的边框
BorderRadiusGeometry borderRadius,     //设置圆角
List boxShadow, 	             //设置容器阴影
Gradient gradient, 	                                 //渐变背景
BlendMode backgroundBlendMode,       //背景渲染时的 混合模式
BoxShape shape: BoxShape.rectangle   //设置背景形状

1) BoxDecoration的参数DecorationImage

DecorationImage使用构造函数即可,其参数如下

@required ImageProvider image,    //必须传递的参数
ColorFilter colorFilter, 
BoxFit fit, 
AlignmentGeometry alignment: Alignment.center, 
Rect centerSlice, 
ImageRepeat repeat: ImageRepeat.noRepeat, 
bool matchTextDirection: false

a) ImageProvider image

这个参数可以通过类Image构造函数来赋值

Image.network(
	String src, 
	{ Key key, 
	double scale: 1.0, 
	ImageFrameBuilder frameBuilder, 
	ImageLoadingBuilder loadingBuilder, 
	String semanticLabel, 
	bool excludeFromSemantics: false, 
	double width, 
	double height, 
	Color color, 
	BlendMode colorBlendMode, 
	BoxFit fit, 
	AlignmentGeometry alignment: Alignment.center, 
	ImageRepeat repeat: ImageRepeat.noRepeat, 
	Rect centerSlice, 
	bool matchTextDirection: false, 
	bool gaplessPlayback: false, 
	FilterQuality filterQuality: FilterQuality.low, 
	Map headers, 
	int cacheWidth 
	int cacheHeight })

另外Image还有其他的构造函数
Image(…) , Image.asset(…) ,Image.file(…) , Image.memory(…) //…为省略

b) ColorFilter colorFilter

构造函数

ColorFilter.mode(Color color, BlendMode blendMode)
ColorFilter.linearToSrgbGamma()
ColorFilter.srgbToLinearGamma()

c) BoxFit fit

BoxFit是枚举类型值如下
contain相当于BoxFit(1), cover相当于BoxFit(2), fill相当于BoxFit(0),
fillHeight相当于BoxFit(4), fillWidth相当于BoxFit(3), none相当于BoxFit(5),
scale Down相当于BoxFit(6), value .

d) Rect centerSlice

构造函数

Rect.fromLTRB(double left double top double right double bottom)
Rect.fromLTWH(double left double top double width double height)
Rect.fromPoints(Offset a Offset b)

e) Offset

构造函数

Offset(double dx double dy)

f) ImageRepeat repeat

枚举的值为noRepeat ,repeat , repeatX ,repeatY

2) BoxDecoration的参数BoxBorder border

BoxBorder继承于Border,修饰时可用Border的构造函数即可

Border的构造函数

Border.all({                                                   //构造函数
Color color: const Color(0xFF000000),       //颜色
double width: 1.0,        //宽度
BorderStyle style: BorderStyle.solid })

BorderStyle枚举类型

none 等同BorderStyle(0) , solid等同BorderStyle(1), values

3) BoxDecoration的参数BorderRadiusGeometry borderRadius

BorderRadius继承自BorderRadiusGeometry,可修饰赋值给borderRadius

BorderRadius构造函数

BorderRadius.all(Radius radius)       //用Radius.circular(double)构造函数即可
BorderRadius.circular(double radius)  //可直接用

Radius构造函数

Radius.circular(double )                //构造函数

4)BoxDecoration的参数BoxShadow

构造函数赋值给boxShadow

BoxShadow({
Color color: const Color(0xFF000000),    //阴影的颜色
Offset offset: Offset.zero,              //阴影移位的距离
double blurRadius: 0.0 	//模糊的半径
double spreadRadius: 0.0 })	//阴影扩展的距离

5) BoxDecoration的参数Gradient gradient,

抽象类Gradien派生类:LinearGradient,RadialGradient,SweepGradient

a) LinearGradient构造函数

LinearGradient({
	AlignmentGeometry begin: Alignment.centerLeft,        //用Alignment就可以, 这个是默认值
	AlignmentGeometry end: Alignment.centerRight,         //用Alignment就可以, 这个是默认值
	@required List colors,                         //必须填写
	List stops,                                   //
	TileMode tileMode: TileMode.clamp,                    //枚举类型
	GradientTransform transform             //用构造函数GradientTransform()即可,一般不传这个参数
	})	

b) RadialGradient构造函数

RadialGradient({
	AlignmentGeometry center: Alignment.center, 
	double radius: 0.5, 
	@required List colors, List stops, 
	TileMode tileMode: TileMode.clamp, 
	AlignmentGeometry focal, 
	double focalRadius: 0.0, 
	GradientTransform transform
	})

c) SweepGradient构造函数

SweepGradient({
	AlignmentGeometry center: Alignment.center, 
	double startAngle: 0.0, 
	double endAngle: math.pi * 2, 
	@required List colors, 
	List stops, 
	TileMode tileMode: TileMode.clamp,   //有默认值
	GradientTransform transform 
})

6) BoxDecoration的参数BlendMode backgroundBlendMode

混合模式,就像ps的图片的混合,BlendMode是枚举类型
Clear, color, colorBurn, colorDodge,Darken, difference, dst, dstATop, dstIn, dstOut,
dstOver, exclusion, hardLight, hue, lighten, luminosity, modulate, multiply, overlay, ,
plus, saturation, screen, softLight, src, srcATop, srcIn, srcOut, srcOver, values, xor,

7) BoxDecoration的参数BoxShape shape

枚举类型:Circle ,rectangle,values

五 Container的参数BoxConstraints constraints

利用构造函数,限制子组件的大小
BoxConstraints(minWidth:0,maxWidth:100,minHeight:0,maxHeight:100)

六 Container的参数Matrix4 transform

利用构造函数来赋值给transform

Matrix4.rotationX(double radians)
Matrix4.rotationY(double radians)
Matrix4.rotationZ(double radians)
Matrix4.skew(double alpha double beta)
Matrix4.skewX(double alpha)
Matrix4.skewY(double alpha)
Matrix4.skew(double alpha double beta)
Matrix4.translationValues(double x double y double z)
Matrix4.zero()
Matrix4.identity()