Flutter 常用布局之Container

生活中离不开杯子、碗、盆等容器

喝水需要杯子,装饭装肉用的碗,洗脸洗脚用的盆.

杯子、碗、洗脸盆都有自己的颜色、宽度、高度;这一切属性根据我们的需求到商店进行了购买.

在Flutter开发中接触到的Container(容器),它也有相关的属性供我们使用.

Container可以根据属性的设置来展现不同的布局大小和样式,还可以容纳其他Widget.

Container只所以可以是容器,因为它可以容纳其它的widget.

常用属性 width、height、color、alignment、padding

........

固定宽高

Center(child: Container(width: 100.0,height: 100.0,color: Colors.blue,),),

Center(child: Container(width: 200.0,height: 100.0,color: Colors.red,),)

宽度和高度无穷大

Center(child: Container(width: double.infinity,height: double.infinity,//color: Colors.red,decoration: BoxDecoration(color: Colors.blue,),),)

宽高>=-0.0 (宽高为正数和-0.0)

Center(child: Container(width: -100.0,height: -100.0,//color: Colors.red,decoration: BoxDecoration(color: Colors.blue,),),),

运行异常

Container宽高约束条件

子widget对其方式

常见的对齐方式

topLeft、topCenter、topRight、centerLeft、center、centerRight、bottomLeft、bottomCenter、bottomRight.

对齐方式是以容器的中心点为基准

Alignment center = Alignment(0.0, 0.0)

Container(width: 200.0,height: 200.0,color: Colors.red,alignment: Alignment.center,child: Text("xmiaoshen"),),)

对齐方式以容器的最左边顶部为基准

Alignment topLeft = Alignment(-1.0, -1.0)

Container(width: 200.0,height: 200.0,color: Colors.blue,alignment: Alignment.topLeft,child: Text("xmiaoshen",style: TextStyle(fontWeight: FontWeight.bold,fontSize: 18.0),),)

自定义对齐方式

Container(width: 200.0,height: 200.0,color: Colors.blue,alignment: Alignment(0.5,0.5),child: Text("xmiaoshen",style: TextStyle(fontWeight: FontWeight.bold,fontSize: 18.0),),),

内边距

内边距 (padding): Container 内部widget分别到四边距离.

Container(width: 200.0,height: 200.0,color: Colors.blue,padding: EdgeInsets.only(top: 10.0,left: 10.0),alignment: Alignment.topLeft,child: Text("xmiaoshen",style: TextStyle(fontWeight: FontWeight.bold,fontSize: 18.0),),)

子widget宽高超过或者等于父容器时,内边距属性padding依然有效

Container(width: 200.0,height: 200.0,color: Colors.blue,padding: EdgeInsets.all(18.0),alignment: Alignment.topLeft,child: Container(width: 200.0,height: 200.0,color: Colors.black45,),)

Container(width: 200.0,height: 200.0,color: Colors.blue,padding: EdgeInsets.all(18.0),alignment: Alignment.topLeft,child: Container(width: 300.0,height: 300.0,color: Colors.black45,),)

外边距

外边距 (margin): Container 分别到父容器Container四边距离.

Container(width: 200.0,height: 200.0,color: Colors.blue,alignment: Alignment.topLeft,child: Container(width: 200.0,height: 200.0,color: Colors.black45,margin: EdgeInsets.all(20.0),),)

container宽高超过或者等于父容器时,外边距属性margin依然有效

Container(width: 200.0,height: 200.0,color: Colors.blue,alignment: Alignment.topLeft,child: Container(width: 300.0,height: 300.0,color: Colors.black45,margin: EdgeInsets.all(20.0),),)

添加约束

容器约束

当我们设置容器的 width 必须在 minWith 和 maxWith 之间.

当我们设置容器的 height 必须在 minHeight 和 maxHeight 之间.

美化Container

通过设置 Container 的属性

decoration (装饰、装饰品)

Box (盒子)

设置边框

Container(width: 200.0,height: 200.0,//color: Colors.black45,decoration: BoxDecoration(color: Colors.blue,border: Border.all(color: Colors.purple,width: 6.0),),)

边框变圆角

Container(width: 200.0,height: 200.0,//color: Colors.black45,decoration: BoxDecoration(color: Colors.blue,border: Border.all(color: Colors.purple,width: 6.0),borderRadius: BorderRadius.all(Radius.circular(20.0))),)

Container(width: 200.0,height: 200.0,//color: Colors.black45,decoration: BoxDecoration(color: Colors.blue,border: Border.all(color: Colors.purple,width: 6.0),borderRadius: BorderRadius.only(
topLeft: Radius.circular(20.0),
bottomRight: Radius.circular(20.0))),)

矩形变圆形

Container(width: 200.0,height: 200.0,//color: Colors.black45,decoration: BoxDecoration(color: Colors.blue,border: Border.all(color: Colors.purple,width: 6.0),shape: BoxShape.circle),)

设置阴影

offset 阴影开始坐标(相对于手机屏幕原点偏移量) ,blurRadius 阴影模糊半径 ,spreadRadius 阴影扩散半径.

Container(width: 200.0,height: 200.0,//color: Colors.black45,decoration: BoxDecoration(color: Colors.blue,boxShadow: [BoxShadow(color: Colors.purple,offset: Offset(-6.0, 6.0),blurRadius: 6.0,spreadRadius: 3.0)],shape: BoxShape.rectangle),)

Container(width: 200.0,height: 200.0,//color: Colors.black45,decoration: BoxDecoration(color: Colors.blue,boxShadow: [BoxShadow(color: Colors.purple,offset: Offset(-6.0, 6.0),blurRadius: 6.0,spreadRadius: 3.0)],shape: BoxShape.circle),)

渐变背景

Container(width: 200.0,height: 200.0,//color: Colors.black45,decoration: BoxDecoration(color: Colors.blue,gradient: LinearGradient(colors: [Colors.blue.withOpacity(1.0),Colors.blue.withOpacity(0.9),Colors.blue.withOpacity(0.8),Colors.blue.withOpacity(0.7),Colors.blue.withOpacity(0.6),Colors.blue.withOpacity(0.5),Colors.blue.withOpacity(0.4),Colors.blue.withOpacity(0.3),Colors.blue.withOpacity(0.2),Colors.blue.withOpacity(0.1),], begin: Alignment.topCenter,
end: Alignment.bottomCenter)),)

小太阳

Container(width: 200.0,height: 200.0,//color: Colors.black45,decoration: BoxDecoration(color: Colors.blue,gradient: RadialGradient(center: const Alignment(0.0, 0.0), // near the top rightradius: 0.2,colors: [const Color(0xFFFFFF00), // yellow sunconst Color(0xFF0099FF), // blue sky],stops: [0.3, 1.0],)),)

参考

虚线容器插件

matrix4_transform