Flutter编程之Container用法详解

Container是一个Widget容器，容器里面可以放置任意的Widget子组件，可以是一个文本组件Text，也可以是一个图片组件Image，甚至是一个和自己一样的Container。Container的子组件用child属性来指定。

属性

Container提供了很多属性，大体上包含大小、位置和装饰。

属性	解释	类型
alignment	对齐方式	AlignmentGeometry
padding	内边距	EdgeInsetsGeometry
color	背景色	Color
decoration	背景装饰器	Decoration
foregroundDecoration	前景装饰器	Decoration
width	宽度	double
height	高度	double
constraints	约束	BoxConstraints
margin	外边距	EdgeInsetsGeometry
child	子Widget	Widget
transform	转换	Matrix4

width,height

指定Container的宽高，不指定的话默认充满父Widget，double类型。下图是一个不指定宽高的Container。

body: Center(
  child: Container(
    color: Colors.blue,
  ),
),

效果图：

可以看到，Container完全占满了整个body区域。下面来看看指定Container的宽高属性是什么效果

body: Center(
  child: Container(
    width: 300,
    height: 300,
    color: Colors.blue,
  ),
),

效果图：

指定了宽高属性之后，Container就会按照指定的宽高来绘制了。

color

在上面宽高属性例子中就使用到了color属性，是一个Color类型的值，声明Color的方式通常也有几种方式：

• Flutter预定义的一些常用颜色在Colors类中，如Colors.blue；

• Color.fromARGB(a, r, g, b)

  • a：alpha，透明度，0~255的整型值，0代表完全透明，255代表完全不透明，128代表半透明
  • r：red，红色通道，0~255的整型值，255代表红色
  • g：green，绿色通道，0~255的整型值，255代表绿色
  • b：blue，蓝色通道，0~255的整型值，255代表蓝色

  Color.fromARGB(255, 255, 0, 0)表示红色。

• Color.fromRGBO(r, g, b, o)

  • r：red，红色通道，0~255的整型值，255代表红色
  • g：green，绿色通道，0~255的整型值，255代表绿色
  • b：blue，蓝色通道，0~255的整型值，255代表蓝色
  • o：opacity，不透明度，0.0~1.0的浮点数，1.0代表完全不透明

  Color.fromRGBO(255, 0, 0, 1.0)表示红色。

• Color传入十六进制颜色值，传入的十六进制颜色值也是按照ARGB的格式。Color(0xFFFF0000)表示红色

  • 0x：16进制前缀标识
  • FF：透明度，FF为255，表示完全不透明
  • FF：红色通道，FF为255，表示红色
  • 0000：绿色通道+蓝色通道，与红色通道的FF叠加表示红色

alignment

子Widget在父Widget中的对齐方式。

body: Center(
  child: Container(
    width: 200,
    height: 200,
    color: Colors.blue,
    alignment: XXX, // 指定下方的Container的对齐方式
    child: Container(
      width: 50,
      height: 50,
      color: Colors.red,
    ),
  ),
)

Flutter已经内置了一些常用的对齐方式：

• topLeft

• topCenter

• topRight

• centerLeft

• center

• centerRight

• bottomLeft

• bottomCenter

• bottomRight

topLeft	topCenter	topRight
centerLeft	center	centerRight
bottomLeft	bottomCenter	bottomRight

从上表中的效果图中可以看出，Flutter预置的对齐方式上下方向分为上 中 下，左右方向分为左 中 右，将一个Widget按照了6条线进行分割。

那么如果想到达到如下效果应该怎么做呢？

橙色圆形在点(0,0)和点(0,1)的中间，和上图表格中的效果图对比发现，Flutter内置的9个对齐方式已经满足不了需求了，但是Flutter为我们提供了更自由定制的一种方式，通过Alignment类构造函数的方式传入x坐标和y坐标的距离分数(distance fraction)，距离分数在范围0 ~ 1之间。

body: Center(
  child: Container(
    width: 200,
    height: 200,
    color: Colors.blue,
    alignment: Alignment(0, 0.5), // 指定下方的Container的对齐方式
    child: Container(
      width: 50,
      height: 50,
      color: Colors.red,
    ),
  ),
)

其实查看源码后可以发现，Flutter预置的9种对齐方式也是通过这种构造函数的方式来定义的。

padding

设置Widget与其子Widget内边界的距离。

body: Container(
  width: 200,
  height: 200,
  color: Colors.blue,
  padding: EdgeInsets.all(30),
  alignment: Alignment.topLeft,
  child: Container(
    width: 50,
    height: 50,
    color: Colors.red,
  ),
),

红色矩形上下左右和蓝色矩形的上下左右距离为30，因为红色矩形比较小，因此看不出右边和下边的内边距。把内层Container的宽高去掉，再看看效果：

body: Container(
  width: 200,
  height: 200,
  color: Colors.blue,
  padding: EdgeInsets.all(30),
  alignment: Alignment.topLeft,
  child: Container(
    color: Colors.red,
  ),
),

可以看到，红色矩形和蓝色矩形边界距离都是30。

• EdgeInsets.zero ：与上下左右没有边距；

• EdgeInsets.all(double value)：统一设置上下左右边距；

• EdgeInsets.only({double left, double top, double right, double bottom})：分开设置上下左右边距，可单独设置，如果全部设置成一样的值，则等价于EdgeInsets.all(double value)；

• EdgeInsets.fromLTRB(double left, double top, double right, double bottom)：必须传入4个参数，依次表示上 下 左 右，与EdgeInsets.only不同的是，EdgeInsets.only是可选命名函数，可单独设置，而EdgeInsets.fromLTRB不是可选命名函数，必须要一一对应传入每个参数；

• EdgeInsets.symmetric({double vertical, double horizontal})：设置水平内边距和垂直内边距，水平内边距则是设置左内边距和右内边距，垂直内边距则是设置上内边距和下内边距。其本质上和上面几种设置方式没有什么区别，都是通过设置其left top right bottom这几个属性来达到目的。

margin

设置Widget其父Widget外边界的距离。

body: Container(
  width: 200,
  height: 200,
  color: Colors.blue,
  margin: EdgeInsets.all(30),
  alignment: Alignment.topLeft,
  child: Container(
    width: 50,
    height: 50,
    color: Colors.red,
  ),
),

通过与padding中的第一张图中的效果对比可以发现，设置margin后，蓝色矩形不再是和红色矩形有边距了，而是和整个body区域的边距，因为该边距在该蓝色Widget的外侧，所以叫外边距。从图中同样看不出上下左右的边距效果，我们把外层Container的宽高去掉，再看看效果：

body: Container(
  color: Colors.blue,
  margin: EdgeInsets.all(30),
  alignment: Alignment.topLeft,
  child: Container(
    width: 50,
    height: 50,
    color: Colors.red,
  ),
),

可以看到，蓝色矩形的外边界距离都是30。

设置外边距的方式和内边距的方式完全一样。

• EdgeInsets.zero ：与上下左右没有边距；

• EdgeInsets.all(double value)：统一设置上下左右边距；

• EdgeInsets.only({double left, double top, double right, double bottom})：分开设置上下左右边距，可单独设置，如果全部设置成一样的值，则等价于EdgeInsets.all(double value)；

• EdgeInsets.fromLTRB(double left, double top, double right, double bottom)：必须传入4个参数，依次表示上 下 左 右，与EdgeInsets.only不同的是，EdgeInsets.only是可选命名函数，可单独设置，而EdgeInsets.fromLTRB不是可选命名函数，必须要一一对应传入每个参数；

• EdgeInsets.symmetric({double vertical, double horizontal})：设置水平内边距和垂直内边距，水平内边距则是设置左内边距和右内边距，垂直内边距则是设置上内边距和下内边距。其本质上和上面几种设置方式没有什么区别，都是通过设置其left top right bottom这几个属性来达到目的。

child

设置一个Widget包含的另一个Widget，比如上面例子中蓝色矩形Widget包含的红色矩形Widget，可以是任意Widget。

decoration、foregroundDecoration

见 Flutter编程之BoxDecoration用法详解

transform

见 Flutter编程 —— transform