Container是一个单一子元素容器，能够设置背景，边框，宽高，内外边距等的容器。因此，Container是一个非常基础的组件，同时也是用途广泛的组件
构造函数
Container(
{Key key,
AlignmentGeometry alignment,
EdgeInsetsGeometry padding,
Color color,
Decoration decoration,
Decoration foregroundDecoration,
double width,
double height,
BoxConstraints constraints,
EdgeInsetsGeometry margin,
Matrix4 transform,
Widget child}
)
属性
- alignment
child对齐的属性，可以设置居中、居左、居右、居上、居下等等。之前的Stack已经介绍过了。 - padding： 内边界
- color：背景色
- decoration
设置装饰，比如边框、圆角、背景图片等。不能给Container同时设置decoration和color属性，如果要同时设置，给decoration设置color就可以。 - foregroundDecoration：设置前景装饰
- width：宽度。
- height：高度。
- constraints：大小范围约束，constraints有四个属性minWidth、minHeight、maxWidth、maxHeight。
- margin: 外边距。
- transform：变换效果，比如翻转、旋转、变形等。
- child：子组件，可以不设置。
示例代码如下：
Stack(
fit: StackFit.expand,
children: [
Container(
alignment: AlignmentDirectional.center,
color: Colors.blue,
margin: const EdgeInsets.all(15.0),
child: Container(
alignment: AlignmentDirectional.topStart,
width: 100,
height: 100,
padding: const EdgeInsets.all(20.0),
constraints: const BoxConstraints.expand(width: 200.0, height: 200.0),
decoration: BoxDecoration(
border: Border.all(color: Colors.amber, width: 2.0),
borderRadius:
const BorderRadiusDirectional.all(Radius.circular(10.0))),
transform: Matrix4.rotationZ(0.1),
child: const Text('hello world'),
),
),
],
);
运行效果：
关于width，height，constraints对Container大小的影响关系
- 不设置宽高和约束，有child，size会尽可能小。
- 不设置宽高和约束，没有child，size会尽可能大。
- 宽高不在约束范围内会无效。
