## ConstrainedBox和SizedBox ConstrainedBox和SizedBox都是通過RenderConstrainedBox來渲染的。SizedBox只是ConstrainedBox一個定制，本節把他們放在一起討論。 ### ConstrainedBox ConstrainedBox用于對齊子widget添加額外的約束。例如，如果你想讓子widget的最小高度是80像素，你可以使用`const BoxConstraints(minHeight: 80.0)`作為子widget的約束。 #### 示例 我們先定義一個redBox，它是一個背景顏色為紅色的盒子，不指定它的寬度和高度： ``` Widget redBox=DecoratedBox( decoration: BoxDecoration(color: Colors.red), ); ``` 我們實現一個最小高度為50，寬度盡可能大的紅色容器。 ``` ConstrainedBox( constraints: BoxConstraints( minWidth: double.infinity, //寬度盡可能大 minHeight: 50.0 //最小高度為50像素 ), child: Container( height: 5.0, child: redBox ), ) ``` 顯示效果：  可以看到，我們雖然將Container的高度設置為5像素，但是最終卻是50像素，這正是ConstrainedBox的最小高度限制生效了。如果將Container的高度設置為80像素，那么最終紅色區域的高度也會是80像素，因為在此示例中，ConstrainedBox只限制了最小高度，并未限制最大高度。 #### BoxConstraints BoxConstraints用于設置限制條件，它的定義如下： ``` const BoxConstraints({ this.minWidth = 0.0, //最小寬度 this.maxWidth = double.infinity, //最大寬度 this.minHeight = 0.0, //最小高度 this.maxHeight = double.infinity //最大高度 }) ``` BoxConstraints還定義了一些便捷的構造函數，用于快速生成特定限制規則的BoxConstraints，如`BoxConstraints.tight(Size size)`，它可以生成給定大小的限制；`const BoxConstraints.expand()`可以生成一個盡可能大的用以填充另一個容器的BoxConstraints。除此之外還有一些其它的便捷函數，讀者可以查看API文檔。 ### SizedBox SizedBox用于給子widget指定固定的寬高，如： ``` SizedBox( width: 80.0, height: 80.0, child: redBox ) ``` 運行效果如下：  實際上SizedBox和只是ConstrainedBox一個定制，上面代碼等價于： ``` ConstrainedBox( constraints: BoxConstraints.tightFor(width: 80.0,height: 80.0), child: redBox, ) ``` 而`BoxConstraints.tightFor(width: 80.0,height: 80.0)`等價于： ``` BoxConstraints(minHeight: 80.0,maxHeight: 80.0,minWidth: 80.0,maxWidth: 80.0) ``` 而實際上ConstrainedBox和SizedBox都是通過RenderConstrainedBox來渲染的，我們可以看到ConstrainedBox和SizedBox的`createRenderObject()`方法都返回的是一個RenderConstrainedBox對象： ``` @override RenderConstrainedBox createRenderObject(BuildContext context) { return new RenderConstrainedBox( additionalConstraints: ..., ); } ``` ### 多重限制 如果某一個widget有多個父ConstrainedBox限制，那么最終會是哪個生效？我們看一個例子： ``` ConstrainedBox( constraints: BoxConstraints(minWidth: 60.0, minHeight: 60.0), //父 child: ConstrainedBox( constraints: BoxConstraints(minWidth: 90.0, minHeight: 20.0),//子 child: redBox, ) ) ``` 上面我們有父子兩個ConstrainedBox，他們的限制條件不同，運行后效果如下：  最終顯示效果是寬90，高60，也就是說是子ConstrainedBox的minWidth生效，而minHeight是父ConstrainedBox生效。單憑這個例子，我們還總結不出什么規律，我們將上例中父子限制條件換一下： ``` ConstrainedBox( constraints: BoxConstraints(minWidth: 90.0, minHeight: 20.0), child: ConstrainedBox( constraints: BoxConstraints(minWidth: 60.0, minHeight: 60.0), child: redBox, ) ) ```  最終的顯示效果仍然是90，高60，效果相同，但意義不同，因為此時minWidth生效的是父ConstrainedBox，而minHeight是子ConstrainedBox生效。 通過上面示例，我們發現有多重限制時，對于minWidth和minHeight來說，是取父子中相應數值較大的。實際上，只有這樣才能保證父限制與子限制不沖突。 > 思考題：對于maxWidth和maxHeight，多重限制的策略是什么樣的呢？ ### UnconstrainedBox UnconstrainedBox不會對子Widget產生任何限制，它允許其子Widget按照其本身大小繪制。一般情況下，我們會很少直接使用此widget，但在"去除"多重限制的時候也許會有幫助，我們看一下面的代碼： ``` ConstrainedBox( constraints: BoxConstraints(minWidth: 60.0, minHeight: 100.0), //父 child: UnconstrainedBox( //“去除”父級限制 child: ConstrainedBox( constraints: BoxConstraints(minWidth: 90.0, minHeight: 20.0),//子 child: redBox, ), ) ) ``` 上面代碼中，如果沒有中間的UnconstrainedBox，那么根據上面所述的多重限制規則，那么最終將顯示一個90×100的紅色框。但是由于 UnconstrainedBox “去除”了父ConstrainedBox的限制，則最終會按照子ConstrainedBox的限制來繪制redBox，即90×20：  但是，讀者請注意，UnconstrainedBox對父限制的“去除”并非是真正的去除，上面例子中雖然紅色區域大小是90×20，但上方仍然有80的空白空間。也就是說父限制的minHeight(100.0)仍然是生效的，只不過它不影響最終子元素的大小，但仍然還是占有相應的空間，可以認為此時的父ConstrainedBox是作用于子ConstrainedBox上，而redBox只受子ConstrainedBox限制，這一點請讀者務必注意。 那么有什么方法可以徹底去除父BoxConstraints的限制嗎？答案是否定的！所以在此提示讀者，在定義一個通用的widget時，如果對子widget指定限制時一定要注意，因為一旦指定限制條件，子widget如果要進行相關自定義大小時將可能非常困難，因為子widget在不更改父widget的代碼的情況下無法徹底去除其限制條件。