共计 3656 个字符，预计需要花费 10 分钟才能阅读完成。
简介
在上一篇文章中，咱们列举了 flutter 中的所有 layout 类，并且具体介绍了两个十分罕用的 layout:Row 和 Column。
把握了下面两个根本的 layout 还是不够的，如果须要应酬日常的 layout 应用，咱们还须要把握多一些 layout 组件。明天咱们会介绍一个功能强大的 layout:Container layout。
Container 的应用
Container 是一个空白的容器，通常能够用 Container 来封装其余的 widget。那么为什么还须要把 widget 封装在 Container 中呢？这是因为 Container 中蕴含了一些非凡的性能。
比方 Container 中能够设置背景色彩或者背景图片，并且能够设置 padding, margins 和 borders。这就为组件的自定义提供了诸多空间。
首先看一下 Container 的定义和构造函数：
class Container extends StatelessWidget {
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,
})能够看到 Container 是一个 StatelessWidget，它的构造函数能够传入多个十分有用的属性，用来管制 Container 的体现。
Container 中有 padding,decoration,constraints 和 margin 这些和地位相干的一些属性，他们有什么关系呢？
container 首先将 child 用 padding 包裹起来，padding 能够用 decoration 进行填充。
填充后的 padding 又能够利用 constraints 来进行限度 (比方 width 和 height)，而后这个组件又能够应用 margin 空白包裹起来。
接下来咱们看一个简略的 Container 中蕴含 Column 和 Row 的例子。
首先结构一个 container widget，它蕴含一个 Column：
Widget build(BuildContext context) {
return Container(
decoration: const BoxDecoration(color: Colors.white,),
child: Column(
children: [buildBoxRow(),
buildBoxRow(),],
),
);
}这里给 Container 设置了一个 BoxDecoration，用于指定 Container 的背景色彩。
在 Child 中给定了一个 Column widget，它的 child 是一个 Row 对象。
Widget buildBoxRow() => Row(
textDirection: TextDirection.ltr,
children: [
Container(
width: 100,
child: Image.asset("images/head.jpg")
)
],
);这里的 Row 中又是一个蕴含了 Image 的 Container 对象。
最初运行，咱们能够失去上面的界面：
Container 中蕴含两行，每行蕴含一个 Image 对象。
旋转 Container
默认状况下 Container 是一个失常布局的 widget，然而有时候咱们可能须要实现一些特殊效果，比如说组件的旋转，Container 提供的 transform 属性能够很不便的做到这一点。
对于 Container 来说，transform 是在组件绘制中最先被利用的，transform 之后会进行 decoration 的绘制，而后进行 child 的绘制，最初进行 foregroundDecoration 的绘制。
还是下面的例子，咱们试一下 transform 属性是如何工作的，咱们在蕴含 image 的 container 中退出 transform 属性：
Widget buildBoxRow() => Row(
textDirection: TextDirection.ltr,
children: [
Container(transform: Matrix4.rotationZ(0.2),
width: 100,
child: Image.asset("images/head.jpg")
)
],
);最初生成的 APP 如下：
能够看到图片曾经沿 Z 轴进行了旋转。
这里的旋转应用的是 Matrix4.rotationZ, 也就是沿 Z 轴抉择，当然你能够能够应用 rotationX 或者 rotationY，别离沿 X 轴或者 Y 轴旋转。
如果抉择 rotationX, 那么看起来的图像应该是这样的：
事实上，Matrix4 不仅仅能够沿独自的轴进行旋转，还能够抉择特定的向量方向进行抉择。
比方上面的两个办法：
/// Translation matrix.
factory Matrix4.translation(Vector3 translation) => Matrix4.zero()
..setIdentity()
..setTranslation(translation);
/// Translation matrix.
factory Matrix4.translationValues(double x, double y, double z) =>
Matrix4.zero()
..setIdentity()
..setTranslationRaw(x, y, z);Matrix4 还能够沿三个方向进行进行放大缩写，如上面的办法：
/// Scale matrix.
factory Matrix4.diagonal3Values(double x, double y, double z) =>
Matrix4.zero()
.._m4storage[15] = 1.0
.._m4storage[10] = z
.._m4storage[5] = y
.._m4storage[0] = x;感兴趣的敌人能够自行尝试。
Container 中的 BoxConstraints
在 Container 中设置 Constraints 的时候，咱们应用的是 BoxConstraints。BoxConstraints 有四个蕴含数字的属性，别离是 minWidth,maxWidth,minHeight 和 maxHeight。
所以 BoxConstraints 提供了这四个值的构造函数：
const BoxConstraints({
this.minWidth = 0.0,
this.maxWidth = double.infinity,
this.minHeight = 0.0,
this.maxHeight = double.infinity,
}) : assert(minWidth != null),
assert(maxWidth != null),
assert(minHeight != null),
assert(maxHeight != null);BoxConstraints 还有两个构造函数别离是 loose 和 tight：
BoxConstraints.loose(Size size)
BoxConstraints.tight(Size size) 这两个有什么区别呢？如果一个 axis 的最小值是 0 的话，那么这个 BoxConstraints 就是 loose。
如果一个 axis 的最大值和最小值是相等的状况，那么这个 BoxConstraints 就是 tight。
BoxConstraints 中还有一个十分罕用的办法如下：
BoxConstraints.expand({double? width, double? height}) expand 的意思就是最大值和最小值都是 infinity 的，具体的定义能够从办法的实现中看出：
const BoxConstraints.expand({
double? width,
double? height,
}) : minWidth = width ?? double.infinity,
maxWidth = width ?? double.infinity,
minHeight = height ?? double.infinity,
maxHeight = height ?? double.infinity;总结
Container 是一个十分罕用的 layout 组件，大家能够纯熟的应用起来。
本文的例子：https://github.com/ddean2009/learn-flutter.git
更多内容请参考 http://www.flydean.com/08-flutter-ui-layout-container/
最艰深的解读，最粗浅的干货，最简洁的教程，泛滥你不晓得的小技巧等你来发现！
欢送关注我的公众号:「程序那些事」, 懂技术，更懂你！
