Flutter 中的Container是一个非常常用且功能强大的布局 widget，它可以组合多个布局、绘制和定位功能。下面详细介绍一下Container的主要特性和用法：
基本结构
Container(// 各种属性...child:Widget,// 子组件)主要属性
1.布局相关属性
child: 子组件alignment: 对齐方式（如Alignment.center）width/height: 固定宽高constraints: 约束条件（使用BoxConstraints）
Container(width:100,height:100,alignment:Alignment.center,child:Text('Hello'),)2.装饰相关属性
color: 背景颜色decoration: 装饰效果（使用BoxDecoration）foregroundDecoration: 前景装饰
Container(decoration:BoxDecoration(color:Colors.blue,borderRadius:BorderRadius.circular(10),border:Border.all(color:Colors.black,width:2,),),)3.边距相关属性
margin: 外边距padding: 内边距
Container(margin:EdgeInsets.all(20),padding:EdgeInsets.symmetric(horizontal:10,vertical:5),child:Text('Content'),)4.变换属性
transform: 变换矩阵（旋转、缩放等）
Container(transform:Matrix4.rotationZ(0.1),child:Text('Rotated'),)常见用法示例
1.带圆角和阴影的卡片
Container(margin:EdgeInsets.all(10),padding:EdgeInsets.all(20),decoration:BoxDecoration(color:Colors.white,borderRadius:BorderRadius.circular(15),boxShadow:[BoxShadow(color:Colors.grey.withOpacity(0.3),spreadRadius:2,blurRadius:5,offset:Offset(0,3),),],),child:Text('Card Content'),)2.渐变色背景
Container(decoration:BoxDecoration(gradient:LinearGradient(begin:Alignment.topLeft,end:Alignment.bottomRight,colors:[Colors.blue,Colors.green],),),child:Text('Gradient Background'),)3.圆形头像容器
Container(width:100,height:100,decoration:BoxDecoration(shape:BoxShape.circle,image:DecorationImage(image:NetworkImage('https://example.com/avatar.jpg'),fit:BoxFit.cover,),border:Border.all(color:Colors.white,width:3,),),)4.带边框的按钮
Container(decoration:BoxDecoration(borderRadius:BorderRadius.circular(25),border:Border.all(color:Colors.blue),),padding:EdgeInsets.symmetric(horizontal:30,vertical:10),child:Text('Outlined Button'),)注意事项
- color vs decoration:
// ❌ 错误：不能同时设置Container(color:Colors.red,decoration:BoxDecoration(color:Colors.blue),)// ✅ 正确：只设置一个Container(decoration:BoxDecoration(color:Colors.blue),)- 尺寸行为:
- 无子组件且无约束：尽可能大
- 有子组件：大小与子组件相同
- 有约束：受约束限制
- 性能考虑：
Container会创建新的渲染对象，大量使用时要注意性能。
实际应用场景
// 头像占位符Container(width:50,height:50,decoration:BoxDecoration(shape:BoxShape.circle,color:Colors.grey[300],),child:Icon(Icons.person,color:Colors.grey),)// 分隔线Container(height:1,color:Colors.grey[300],margin:EdgeInsets.symmetric(vertical:10),)// 自定义进度指示器背景Container(height:10,decoration:BoxDecoration(borderRadius:BorderRadius.circular(5),color:Colors.grey[200],),child:Container(width:100,// 进度值decoration:BoxDecoration(borderRadius:BorderRadius.circular(5),gradient:LinearGradient(colors:[Colors.blue,Colors.lightBlue],),),),)Container是 Flutter 中最基础也最实用的组件之一，通过组合不同的属性可以实现各种各样的 UI 效果。掌握好Container的用法，对 Flutter UI 开发非常有帮助。
