Flutter学习之八 Container

顺风而呼，声非加疾也，而闻者彰。

Flutter学习之七 Expanded

前言

前面的一些章节中，Container多多少少出现过，这到底是个啥呢？本章节我就个人理解来介绍一下这个常用的容器类组件。

正文

Container是一个组合类容器，它本身不对应具体的RenderObject，它是DecoratedBox、ConstrainedBox、Transform、Padding、Align等组件组合的一个多功能容器，所以我们只需通过一个Container组件可以实现同时需要装饰、变换、限制的场景。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,
  })

• padding: 内边距，容器内留白，限定容器内子组件到容器的边距。
• margin：外边距，容器外留白，限定容器外的其它组件到容器的边距。
• decoration：前景装饰，与color互斥。原因是当指定color时，Container内会自动创建一个decoration。
• constraints：容器大小的限制条件，约束。可以与width、height同时存在，但是后者优先级高。原因是Container内部会根据width、height来生成一个constraints。

Container特点

• 1、没有child的时候宽高默认为0
  下面是类初始化时候默认值：

  
  
  1.png
  
  
  2.png

从图1和图2可以看出，在不设置宽、高以及不设置子组件的时候，会生成一个最大宽高都为0的Box，这个Box作为子组件，也就是current，请记住这个current。整个demo：

3.png

body上放个Column，Column一个child为Container，然后给个红色的背景颜色，看下效果。

4.png

发现啥也没有，看来的确宽高默认0。给个高度试下：

5.png

看效果：

6.png

因为body默认宽度为屏宽，所以宽度是这样子的。

• 2、有child的时候，就按照child约束来：
  给Container加个子组件看下：

  
  
  6.png
  
  

  效果如下

  
  
  7.png
  
  其实在给一个组件设置属性的时候，本质是在当前child又包了一层装饰型组件，从源码中可以看出：
  
  8.png

总结

如果想给一个组件设置color、alignment、padding、margin、transform以及装饰器decoration（圆角、阴影），那么就可以在这个组件外包一层Container，然后直接设置即可。

后记

代码只看还是不行的，有些东西写着写着就理解了。纸上得来终觉浅，绝知此事要躬行~