关于flutter:flutter系列之flutter中常用的container-layout详解

在上一篇文章中，咱们列举了 flutter 中的所有 layout 类，并且具体介绍了两个十分罕用的 layout:Row 和 Column。

把握了下面两个根本的 layout 还是不够的，如果须要应酬日常的 layout 应用，咱们还须要把握多一些 layout 组件。明天咱们会介绍一个功能强大的 layout:Container layout。

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 是一个失常布局的 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 中设置 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/

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

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

关于flutter:flutter系列之flutter中常用的container-layout详解

简介

Container 的应用

旋转 Container

Container 中的 BoxConstraints

总结