简介

在上一篇文章中，咱们列举了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/

最艰深的解读，最粗浅的干货，最简洁的教程，泛滥你不晓得的小技巧等你来发现！

欢送关注我的公众号:「程序那些事」,懂技术，更懂你！