Contrainer容器

Contrainer是一个结合了绘制（painting）、定位（positioning）以及尺寸（sizing）widget的widget。

contrainer

Container的组成如下：

  • 最里层的是child元素；
  • child元素首先会被padding包着；
  • 然后添加额外的constraints限制；
  • 最后添加margin。

Container的绘制的过程如下：

  • 首先会绘制transform效果；
  • 接着绘制decoration；
  • 然后绘制child；
  • 最后绘制foregroundDecoration。

Container自身尺寸的调节分两种情况：

  • Container在没有子节点（children）的时候，会试图去变得足够大。除非constraints是unbounded限制，在这种情况下，Container会试图去变得足够小。
  • 带子节点的Container，会根据子节点尺寸调节自身尺寸，但是Container构造器中如果包含了width、height以及constraints，则会按照构造器中的参数来进行尺寸的调节。

Row,Column组件

Row：在水平方向上排列子widget的列表。 Column：在垂直方向上排列子widget的列表。 注意：这两个属于多子节点空间，可以将children排列成一行/一列，但是自身不带滚动属性，如果超出了一行，在debug下面则会显示溢出的提示。

row_column

Expanded组件

expanded主要是Row/Column的内的小控件，可以用来实现权重的布局。
flex属性：flex参数为弹性系数，如果为0或null，则child是没有弹性的，即不会被扩伸占用的空间。如果大于0，所有的Expanded按照其flex的比例来分割主轴的全部空闲空间。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
Row(
      mainAxisAlignment: MainAxisAlignment.start,
      children: <Widget>[
        Expanded(
          flex: 1,
          child: Container(
            height: 40,
            color: Colors.amber,
            child: Text('amber'),
          ),
        ),Expanded(
          flex: 2,
          child: Container(
            height: 40,
            color: Colors.red,
            child: Text('red'),
          ),
        ), Expanded(
          flex: 1,
          child: Container(
            height: 40,
            color: Colors.cyan,
            child: Text('cyan'),
          ),
        ),
      ],
    );

结果：
flex