Flutter---Container

概念一个多功能容器可以设置背景、边距、大小、装饰等核心属性child Widget? 容器内的子组件 width double? 容器宽度 height double? 容器高度 color Color? 背景色 padding EdgeInsetsGeometry? 内边距内容到边框 margin EdgeInsetsGeometry? 外边距容器到外部 decoration BoxDecoration? 装饰圆角、阴影、渐变等 alignment AlignmentGeometry? 子组件对齐方式 constraints BoxConstraints? 额外约束限制 transform Matrix4? 变换旋转、缩放 clipBehavior Clip? 裁剪行为基本用法Container( width:100, //宽 height: 100,//高 //外边距有三个参数all(全部)only(单边)symmetric(水平或垂直) margin: EdgeInsets.symmetric(horizontal: 8), padding: EdgeInsets.all(8),//内边距的用法和外边距一样 alignment: Alignment(0, 0),//对齐方式 decoration: BoxDecoration( //颜色withOpacity是用来设置透明度的值的范围0.0~1.0 color: Color(0xFF5091C9).withOpacity(0.3), //圆角效果 borderRadius: BorderRadius.circular(20), //边框 border: Border.all(color: Colors.black,width: 5) boxShadow: [ // 阴影 BoxShadow( color: Colors.black26, //颜色 blurRadius: 8, //模糊程度 offset: Offset(2, 2),//偏移 spreadRadius:2,//扩散范围 ), ], //设置形状 // shape: BoxShape.circle //形状和圆角不能同时设置 ), child: Text( 内容 ), )不同方式的圆角// 不同角的圆角 Container( decoration: BoxDecoration( color: Colors.blue, borderRadius: BorderRadius.only( topLeft: Radius.circular(20), topRight: Radius.circular(10), bottomLeft: Radius.circular(5), bottomRight: Radius.circular(15), ), ), child: Text(四个角不同圆角), )线性渐变LinearGradient// 线性渐变 Container( width: 200, height: 100, decoration: BoxDecoration( gradient: LinearGradient( begin: Alignment.topLeft, end: Alignment.bottomRight, colors: [ Colors.blue, Colors.purple, ], ), borderRadius: BorderRadius.circular(12), ), child: Center(child: Text(渐变色, style: TextStyle(color: Colors.white))), )径向渐变从中心向外RadialGradient// 径向渐变从中心向外 Container( decoration: BoxDecoration( gradient: RadialGradient( center: Alignment.center, radius: 0.8, colors: [ Colors.yellow, Colors.orange, Colors.red, ], ), ), child: Text(径向渐变), )设置图片背景Container( width: 200, height: 150, decoration: BoxDecoration( image: DecorationImage( image: AssetImage(assets/images/background.png), fit: BoxFit.cover, // 覆盖 ), borderRadius: BorderRadius.circular(12), ), child: Center( child: Text( 背景图, style: TextStyle(color: Colors.white, fontSize: 20), ), ), )对齐方式Container( width: 200, height: 200, color: Colors.grey[200], alignment: Alignment.center, // 居中 child: Container( width: 50, height: 50, color: Colors.blue, ), ) // 常用的对齐常量 alignment: Alignment.topLeft // 左上 alignment: Alignment.topCenter // 上中 alignment: Alignment.topRight // 右上 alignment: Alignment.centerLeft // 左中 alignment: Alignment.center // 正中心默认 alignment: Alignment.centerRight // 右中 alignment: Alignment.bottomLeft // 左下 alignment: Alignment.bottomCenter // 下中 alignment: Alignment.bottomRight // 右下自定义偏移// 坐标范围-1.0 ~ 1.0 Container( alignment: Alignment(-0.5, 0.3), // 左偏50%下偏30% child: Container(width: 50, height: 50, color: Colors.blue), )约束控制Container( constraints: BoxConstraints( minWidth: 100, maxWidth: 300, minHeight: 50, maxHeight: 150, ), color: Colors.blue, child: Text(尺寸限制), )