flutter系列之:深入理解布局的基礎constraints _生活百科

簡介
Tight和loose constraints
理解constraints的原則
總結

簡介我們在flutter中使用layout的時候需要經常對組件進行一些大小的限制，這種限制就叫做constraints，用來控制layout中的組件大小。
掌握了constraints才算對layout有了真正的了解，但是flutter中的constraints和我們熟悉的HTML中的constraints區別比較大，所以我們還是需要深入了解flutter中contraints的特性。
Tight和loose constraints對于constraints來說，只有四個屬性，分別是最小width，最大width，最小height和最大height 。這四個屬性所能限制的就是寬度和高度的范圍。
根據這兩個屬性的范圍不同，constraints可以分為tight constraints和loose constraints 。
那么tight和loose有什么區別呢？
對于tight來說，它的 maximum width = minimum width, 并且maximum height = minimum height, 也就是說為width和height提供了一個特定的值。
具體而言，可以看下BoxConstraints的tight實現：

BoxConstraints.tight(Size size): minWidth = size.width,maxWidth = size.width,minHeight = size.height,maxHeight = size.height;

和tight相對應的就是loose，在loose中我們設置了最大的width和height,但是希望widget越小越好，這樣對應width和height的最小值為0，同樣以BoxConstraints為例看下它的定義：
BoxConstraints.loose(Size size): minWidth = 0.0,maxWidth = size.width,minHeight = 0.0,maxHeight = size.height;理解constraints的原則前面我們講到了constraints的分類，這里我們會講一下constraints的基本原則。
通常來說，在flutter中，一個widget的constraints是從它的parent繼承而來的。然后這個widget會將constraints告訴他的子widget.
子widget會有自己定義的大小，那么子widget會根據自己定義的大小來設置自己的大小，并將結果反饋跟父widget，父widget會最終根據所有子widget的大小來設置自己的大小。
所以總結而言就是，constraints是向下傳遞的，而size是向上傳遞的。
可能大家還不太明白是什么意思，沒關系，接下來我們用具體的例子來說明。
首先，我們使用BoxConstraints.tightFor來創建一個盡可能大的width和height的Constraints,然后在這個constraint內部新建widget來觀察他們的表現。

ConstrainedBox(constraints: const BoxConstraints.tightFor(width: double.infinity, height: double.infinity),child: exampleWidget)

通過替換上面的exampleWidget，我們來觀察不同的表現形式。
首先是最基礎的Container，對于Container本身來說，他可以設置width和height,但是這兩個屬性并不是constraint，所以還得從parent widget中繼承。
那么對于下面的一個widget來說：
Widget build(BuildContext context) {return Container(color: blue);}它會使用從parent繼承的constraints,也就是說盡可能的大，所以會展示下面的界面：

文章插圖
【flutter系列之:深入理解布局的基礎constraints】填滿所有的區域。
如果給Container指定了width和hight，同樣的，Container需要從parent繼承constraints,所以仍然是填滿整個區域：
Widget build(BuildContext context) {return Container(width: 100, height: 100, color: blue);}但是，如果我們在Container的外面再加上一個constraints,比如Center：
Widget build(BuildContext context) {return Center(child: Container(width: 100, height: 100, color: blue),);}那么雖然Center會從parent繼承constraints，去填滿整個區域，但是Center本身的constraints是告訴子widget可以按照他自己的意愿來調整大小，所以這個時候最終Container的大小就是100x100: