Flutter Container容器组件

Container是Flutter里很常用的一个组件，类似于html中的div。和div一样，container也可以设置宽度（width）、高度（heigth）、内边距（padding）、外边距（margin）、边框（border）。

Flutter Container容器组件详解

Flutter成长之路Container容器组件

Container构造方法：


Container({
    Key? key,
    this.alignment,
    this.padding,
    this.color,
    this.decoration,
    this.foregroundDecoration,
    double? width,
    double? height,
    BoxConstraints? constraints,
    this.margin,
    this.transform,
    this.transformAlignment,
    this.child,
    this.clipBehavior = Clip.none,
  })

Container常用属性

属性名	说明	取值
alignment	设置子控件的对齐方式	AlignmentGeometry对象
padding	设置容器的内边距	EdgeInsetsGeometry对象
color	容器的背景颜色	Color对象
decoration	容器的修饰属性(不能与Color通知设置)	Decoration对象
foregroundDecoration	前景修饰	Decoration对象
width	容器宽度	double对象
height	容器高度	double对象
constraints	子组件的约束	BoxConstraints对象
margin	容器的外边距	EdgeInsetsGeometry对象
transform	容器变换属性(旋转、缩放等)	Matrix4对象
transformAlignment	容器变换对齐方式	AlignmentGeometry对象
child	子组件	Widget对象

示例一：只有子控件，没有任何参数。


Container(child: Text('文字',style:TextStyle(fontSize: 26),),)

运行效果：

Flutter成长之路Container容器组件

示例二：给Container添加背景色


Container(
   color: Colors.blue,
   child: Text('文字',style:TextStyle(fontSize: 26) ,)
)

运行效果：

Flutter成长之路Container容器组件

示例三：给Container添加padding和margin


Container(
	color: Colors.blue,
	child: Text('文字',style:TextStyle(fontSize: 26) ,),
	padding: EdgeInsets.all(20),
	margin: EdgeInsets.all(30),
)

运行效果：

Flutter成长之路Container容器组件

示例四：给Container Decoration 装饰(背景)


Container(
	child: Text('文字',style:TextStyle(fontSize: 26) ,),
	padding: EdgeInsets.symmetric(horizontal: 10),
	decoration: BoxDecoration(
		shape: BoxShape.rectangle,
		borderRadius: BorderRadius.all(Radius.circular(20)),
		color: Colors.blue
	),
  ),

运行效果：

Flutter成长之路Container容器组件

示例五：给Container Decoration 装饰(边框)


Container(
	child: Text('文字',style:TextStyle(fontSize: 26) ,),
	padding: EdgeInsets.symmetric(horizontal: 10),
	decoration: BoxDecoration(
	  borderRadius: BorderRadius.circular(12),
	  border: Border.all(
		color: Colors.blue,
		width: 2,
	  ),
	),
  ),

运行效果：

Flutter成长之路Container容器组件

示例六：给Container transform 变换


Container(
	child: Text('文字',style:TextStyle(fontSize: 26) ,),
	transform: Matrix4.skewX(10),
  ),

运行效果：

Flutter成长之路Container容器组件

示例七：给Container添加圆角图片


Container(
	height: 200,
	width: 200,
	decoration: BoxDecoration(
	  image:  DecorationImage(
		image: AssetImage("images/flutter.png"),
		fit: BoxFit.cover,
	  ),
	  border: Border.all(
		color: Colors.blue,
		width: 2,
	  ),
	  borderRadius: BorderRadius.circular(12),
	),
  ),

运行效果：

Flutter成长之路Container容器组件

示例八：给Container添加圆形图片


Container(
	height: 200,
	width: 200,
	decoration: BoxDecoration(
	  image: DecorationImage(
		image: AssetImage("images/flutter.png"),
		fit: BoxFit.cover,
	  ),
	  border: Border.all(
		color: Colors.blue,
		width: 2,
	  ),
	  shape: BoxShape.circle,
	),
  ),

运行效果：

Flutter成长之路Container容器组件