-
Container是最常用的但容器控件，只包含一个子控件
-
Container可以装饰和定位子控件，例如设置背景颜色、形状等
2.2 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,
})
2.3 常用属性
| 属性名 | 说明 | 取值 |
| :-: | :-: | :-: |
| 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对象 |
3.1 文字
只有子控件，没有任何参数
Container(child: Text('文字',style:TextStyle(fontSize: 26),),)
设置背景色
Container(
color: Colors.blue,
child: Text('文字',style:TextStyle(fontSize: 26) ,),),
padding和margin
Container(
color: Colors.blue,
child: Text('文字',style:TextStyle(fontSize: 26) ,),
padding: EdgeInsets.all(20),
margin: EdgeInsets.all(30),
)
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
),
),
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,
),
),
),
transform 变换
Container(
child: Text('文字',style:TextStyle(fontSize: 26) ,),
transform: Matrix4.skewX(10),
),
3.2 图片
圆角图片
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),
),
),
圆形图片
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,
),
),
