?Flutter中尺寸限制類容器介紹

Flutter中尺寸限制類容器組件包括ConstrainedBox、UnconstrainedBox、SizedBox、AspectRatio、FractionallySizedBox、LimitedBox、Container。這些組件可以約束子組件的尺寸，下面一一介紹。

ConstrainedBox

ConstrainedBox組件約束子組件的最大寬高和最小寬高，假如一個組件寬高都是300，包裹在ConstrainedBox中，并給ConstrainedBox添加最大寬高約束，用法如下：

ConstrainedBox(
  constraints: BoxConstraints(maxHeight: 60, maxWidth: 200),
  child: Container(height: 300, width: 300, color: Colors.red),
)

這時子組件是無法突破BoxConstraints設(shè)置的最大寬高，效果如下：

BoxConstraints的默認(rèn)值如下：

const BoxConstraints({
  this.minWidth = 0.0,
  this.maxWidth = double.infinity, //無限大
  this.minHeight = 0.0,
  this.maxHeight = double.infinity, //無限大
});

BoxConstraints提供了便捷的構(gòu)建函數(shù)，方便開發(fā)者調(diào)用，如BoxConstraints.tight(Size size)和BoxConstraints.expand()等。

如果BoxConstraints嵌套使用，有2個ConstrainedBox，如下：

ConstrainedBox(
  constraints: BoxConstraints(maxHeight: 60, maxWidth: 200),
  child: ConstrainedBox(
    constraints: BoxConstraints(maxHeight: 100, maxWidth: 240),
    child: Container(height: 300, width: 300, color: Colors.red),
  ),
)

以最大寬為例，第一個BoxConstraints的maxHeight值是60，也就是約束其子控件最大高是60，第二個BoxConstraints的maxHeight值是100，由于第二個BoxConstraints也受第一個的約束，所以第二個BoxConstraints最大高也只能是60，最終子組件的最大高是60，同理最大寬是200，因此多級BoxConstraints嵌套約束最大值最終值等于多個BoxConstraints約束中的最小值。同理嵌套約束最小值等于多個BoxConstraints約束中的最大值。

UnconstrainedBox

UnconstrainedBox組件不對子組件做任何約束，比如有一個父組件大小是200x200，子組件是UnconstrainedBox，UnconstrainedBox包裹一個300x300的組件，代碼如下：

Container(
  height: 200,
  width: 200,
  child: UnconstrainedBox(
    child: Container(height: 300, width: 300, color: Colors.red),
  ),
)

效果如下：

注意：黃色區(qū)域表示子控件超出父控件的區(qū)域了，黃色區(qū)域只會在debug模式下存在，在release模式下，只有紅色區(qū)域。

UnconstrainedBox雖然不限制其子控件的大小，但仍然受父控件的約束，超出父控件的區(qū)域?qū)厝　?/p>

UnconstrainedBox允許設(shè)置對齊方式，用法如下：

UnconstrainedBox(
  alignment: Alignment.topLeft,
  ...
)

效果如下：

和上一個圖對比，這次左邊和上邊沒有超出區(qū)域，右邊和下邊各超出100px。

SizedBox

SizedBox是具有固定寬高的組件，直接指定具體的寬高，用法如下：

SizedBox(
  height: 60,
  width: 200,
  child: RaisedButton(
    child: Text('this is SizedBox'),
  ),
)

我們也可以設(shè)置尺寸無限大，如下：

SizedBox(
  height: double.infinity,
  width: double.infinity,
  ...
)

雖然設(shè)置了無限大，子控件是否會無限長呢？不，不會，子控件依然會受到父組件的約束，會擴(kuò)展到父組件的尺寸，還有一個便捷的方式設(shè)置此方式：

SizedBox.expand(
  child: RaisedButton(
    child: Text('this is SizedBox'),
  ),
)

SizedBox可以沒有子組件，但仍然會占用空間，所以SizedBox非常適合控制2個組件之間的空隙，用法如下：

Column(
  children: <Widget>[
    Container(height: 30,),
    SizedBox(height: 10,),
    Container(height: 30,),
  ],
)

AspectRatio

AspectRatio組件是固定寬高比的組件，如果組件的寬度固定，希望高是寬的1/2，可以用AspectRatio實(shí)現(xiàn)此效果，用法如下：

AspectRatio(
  aspectRatio: 2 / 1,
  child: Container(color: Colors.red),
)

aspectRatio參數(shù)是寬高比，可以直接寫成分?jǐn)?shù)的形式，也可以寫成小數(shù)的形式，但建議寫成分?jǐn)?shù)的形式，可讀性更高。效果如下：

FractionallySizedBox

當(dāng)我們需要一個控件的尺寸是相對尺寸時，比如當(dāng)前按鈕的寬度占父組件的70%，可以使用FractionallySizedBox來實(shí)現(xiàn)此效果。

使用FractionallySizedBox包裹子控件，設(shè)置widthFactor寬度系數(shù)或者heightFactor高度系數(shù)，系數(shù)值的范圍是0-1，0.7表示占父組件的70%，用法如下：

FractionallySizedBox(
  widthFactor: .7,
  child: RaisedButton(
    child: Text('button'),
  ),
)

通過alignment參數(shù)控制子組件顯示的位置，默認(rèn)為center，用法如下：

FractionallySizedBox(
  alignment: Alignment.centerLeft,
  ...
)

如果想讓2個控件之間的間隔是當(dāng)前父控件的10%，可以使用無子控件的FractionallySizedBox，用法如下：

Container(
  height: 200,
  color: Colors.grey,
  child: Column(
    children: <Widget>[
      Container(
        height: 50,
        color: Colors.red,
      ),
      Flexible(
        child: FractionallySizedBox(
          heightFactor: .1,
        ),
      ),
      Container(
        height: 50,
        color: Colors.blue,
      ),
    ],
  ),
)

效果如下：

LimitedBox

LimitedBox組件是當(dāng)不受父組件約束時限制它的尺寸，什么叫不受父組件約束？就像這篇文章介紹的其他組件，它們都會對子組件約束，沒有約束的父組件有ListView、Row、Column等，如果LimitedBox的父組件受到約束，此時LimitedBox將會不做任何操作，我們可以認(rèn)為沒有這個組件，代碼如下：

Container(
  height: 100,
  width: 100,
  child: LimitedBox(
    maxHeight: 50,
    maxWidth: 100,
    child: Container(color: Colors.green,),
  ),
)

效果如下：

LimitedBox設(shè)置的寬高不是正方形，此時效果時正方形，說明LimitedBox沒有起作用。

在ListView中直接添加Container組件，如下：

ListView(
  children: <Widget>[
    Container(
      color: Colors.green,
    ),
    Container(
      color: Colors.red,
    ),
  ],
)

這時你會發(fā)現(xiàn)什么也沒有，因為在容器不受約束時，大小將會設(shè)置0，只需將Container包裹在LimitedBox中即可：

ListView(
  children: <Widget>[
    LimitedBox(
      maxHeight: 100,
      child: Container(
        color: Colors.green,
      ),
    ),
    LimitedBox(
      maxHeight: 100,
      child: Container(
        color: Colors.red,
      ),
    ),
  ],
)

效果：

Container

Container組件應(yīng)該是最常用的組件之一，Container組件可以直接設(shè)置其寬高，用法如下：

Container(
  height: 100,
  width: 100,
  ...
)

Container組件是這些組件里面屬性最多的一個，當(dāng)然也是用法最復(fù)雜的一個，這里重點(diǎn)介紹Container對子組件的約束，我在前面的文章中已經(jīng)詳細(xì)的介紹了Container，這里不在介紹，奉上跳轉(zhuǎn)地址：https://blog.csdn.net/mengks1987/article/details/104388393

總結(jié)

• ConstrainedBox：適用于需要設(shè)置最大/小寬高，組件大小以來子組件大小，但不能超過設(shè)置的界限。
• UnconstrainedBox：用到情況不多，當(dāng)作ConstrainedBox的子組件可以“突破”ConstrainedBox的限制，超出界限的部分會被截取。
• SizedBox：適用于固定寬高的情況，常用于當(dāng)作2個組件之間間隙組件。
• AspectRatio：適用于固定寬高比的情況。
• FractionallySizedBox：適用于占父組件百分比的情況。
• LimitedBox：適用于沒有父組件約束的情況。
• Container：適用于不僅有尺寸的約束，還有裝飾（顏色、邊框、等）、內(nèi)外邊距等需求的情況。