flutter【11】组件--container

作用

container能够方便地对组件进行绘制、定位和设定尺寸大小。

构造过程

1. 使用 padding 包围child
2. 应用附加约束，如宽高
3. 添加 margin

绘制过程

1. 应用变换（transform）
2. 添加装饰（decoration）以填充padding
3. 绘制child
4. 绘制前景装饰（foregroundDecoration），仍然填充padding

尺寸控制

• 没有children，container会尽可能的大
• 没有children，但是传进来的约束为 unbounded，container会尽可能的小
• 有children，container会根据children的大小调整自己
• container的width、height以及其他构造方法中的约束参数可以覆盖上述约定。

布局行为

container 会尝试按照以下顺序进行布局：

1. 对齐
2. 调整自身大小适应child
3. 采用宽高和约束
4. 扩张自身以填充parent
5. 尽可能的小

具体情况如下所示：

1. 没有child，没有宽高，没有约束，但是parent提供了unbounded约束，则container会尽可能地大。
2. 没有child，没有对齐，但是有宽高和约束，container会根据自身和parent的约束尽可能的小。
3. 没有child，没有宽高，没有约束，没有对齐，但是parent提供了unbounded约束，则container会扩张，在parent的约束下填充parent。
4. 有对齐，parent提供了unbounded约束，则container会调整自己的大小包围child。
5. 有对齐，parent提供了bounded约束，则container会尝试扩张填充parent，然后根据对齐调整child的位置。
6. 有child，没有宽高，没有约束，没有对齐，则container将其parent的约束传递给child，然后调整自身大小以适应child。
7. margin 和 padding 属性也会影响布局，装饰decoration会隐式的增加 padding 。

代码示例

具体的属性和方法使用参考官方参考文档

Container(
  constraints: BoxConstraints.expand(
    height: Theme.of(context).textTheme.display1.fontSize * 1.1 + 200.0,
  ),
  padding: const EdgeInsets.all(8.0),
  color: Colors.teal.shade700,
  alignment: Alignment.center,
  child: Text('Hello World', style: Theme.of(context).textTheme.display1.copyWith(color: Colors.white)),
  foregroundDecoration: BoxDecoration(
    image: DecorationImage(
      image: NetworkImage('https://www.example.com/images/frame.png'),
      centerSlice: Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0),
    ),
  ),
  transform: Matrix4.rotationZ(0.1),
)