深入flutter布局约束原理

刚开始接触flutter的时候，Container组件是用得最多的。它就像HTML中的div一样普遍，专门用来布局页面的。

但是使用Container嵌套布局的时候，经常出现一些令人无法理解的问题。就如下面代码，在一个固定的容器中，子组件却铺满了全屏。

/// 例一
@override
Widget build(BuildContext context) {
   return Container(
     width: 300,
     height: 300,
     color: Colors.amber,
     child: Container(width: 50, height: 50, color: Colors.red,),
  );
}

然后要加上alignment属性，子组件正常显示了，但容器还是铺满全屏。

/// 例二
@override
Widget build(BuildContext context) {
   return Container(
     width: 300,
     height: 300,
     color: Colors.amber,
     alignment: Alignment.center,
     child: Container(width: 50, height: 50, color: Colors.red,),
  );
}

而在容器外层添加一个Scaffold组件，它就正常显示了。

/// 例三
@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Container(
      width: 300,
      height: 300,
      color: Colors.amber,
      alignment: Alignment.center,
      child: Container(width: 50, height: 50, color: Colors.red,),
    ),
  );
}

这一切的怪异行为困扰了我很久，直到我深入了flutter布局的学习，才渐渐解开这些疑惑。

1、flutter的widget类型

flutter的widget可以分为三类，组合类ComponentWidget、代理类ProxyWidget和绘制类RenderObjectWidget

组合类：如Container、Scaffold、MaterialApp还有一系列通过继承StatelessWidget和StatefulWidget的类。组合类是我们开发过程中用得最多的组件。

代理类：InheritedWidget，功能型组件，它可以高效快捷的实现共享数据的跨组件传递。如常见的Theme、MediaQuery就是InheritedWidget的应用。

绘制类：屏幕上看到的UI几乎都会通过RenderObjectWidget实现。通过继承它，可以进行界面的布局和绘制。如Align、Padding、ConstrainedBox等都是通过继承RenderObjectWidget，并通过重写createRenderObject方法来创建RenderObject对象，实现最终的布局（layout）和绘制（paint）。

2、Container是个组合