Flutter 盒約束

介紹

在Flutter中，widget由其底層的RenderBox對象渲染。 渲染框由它們的父級給出約束，并且在這(zhè)些約束下(xià)調整自(zì)身大小。約束由最小寬度、最大寬度和(hé)高度組成; 尺寸由特定的寬度和(hé)高度組成。

通(tōng)常，按照widget如(rú)何處理他(tā)們的約束來看(kàn)，有三種類型的盒子：

盡可(kě)能(néng)大。 例如(rú) Center 和(hé) ListView 的渲染盒

跟随子widget大小。 例如(rú), Transform 和(hé) Opacity 的渲染盒。

指定尺寸。 例如(rú), Image 和(hé) Text的渲染盒

一(yī)些widget，例如(rú)Container， 會根據構造函數(shù)參數(shù)的不同而不同。Container默認是盡可(kě)能(néng)大的占用空間(jiān)， 但(dàn)是如(rú)果你給它指定一(yī)個width，那(nà)它就會采用指定的值。

其他(tā)一(yī)些，例如(rú)Row 和(hé) Column (flex boxes) 會根據給定它們的約束的不同而不同，如(rú)下(xià)面的“Flex”部分所述。

這(zhè)些約束有時(shí)是“tight”，這(zhè)意味着它們沒有留下(xià)讓渲染框自(zì)己決定大小的空間(jiān)（例如(rú)，如(rú)果最小和(hé)最大寬度相同，也就是說有一(yī)個tight寬度）。 其中的主要(yào)例子是App widget, 它是RenderView類包含的一(yī)個widget ：由應用程序build函數(shù)返回的子widget的渲染框被指定了(le)一(yī)個約束，強制它精确填充應用程序的內(nèi)容區(qū)域（通(tōng)常是整個屏幕）。 Flutter中的許多盒子，特别是那(nà)些隻包含一(yī)個子widget的，都(dōu)會将其約束傳遞給他(tā)們的孩子。 這(zhè)意味着如(rú)果您在應用程序的渲染樹(shù)的根部嵌套一(yī)些盒子，那(nà)麽子節點都(dōu)要(yào)受到這(zhè)些渲染盒的約束。

有些箱子放松了(le)約束，有“最大”約束，但(dàn)沒有“最小”約束。例如(rú)，Center。

無邊界約束

在某些情況下(xià)，渲染盒的約束将是無邊界（unbounded）的或無限的。這(zhè)意味着最大寬度或最大高度會設置為(wèi)double.INFINITY。

一(yī)個本身試圖占用盡可(kě)能(néng)大的渲染盒在給定無邊界約束時(shí)不會有用，在檢查模式下(xià)（譯者語：指Dart的checked模式），會抛出異常。

渲染盒具有無邊界約束的最常見(jiàn)情況是在自(zì)身處于彈性盒（Row 和(hé) Column）內(nèi)以及可(kě)滾動區(qū)域 （ListView 和(hé)其他(tā)ScrollView的子類）內(nèi)。

特别是，ListView試圖擴充以适應其橫向可(kě)用空間(jiān)（即，如(rú)果它是一(yī)個垂直滾動塊，它将嘗試與其父項一(yī)樣寬）。 如(rú)果您ListView在水平滾動的情況下(xià)嵌套垂直滾動的ListView，則內(nèi)部滾動區(qū)域會盡可(kě)能(néng)寬，這(zhè)是無限寬的，因為(wèi)外(wài)部滾動區(qū)域可(kě)以在水平方向上(shàng)一(yī)直滾動。

Flex

彈性盒自(zì)身（Row和(hé)Column） 的行(xíng)為(wèi)有所不同，這(zhè)取決于它們在給定的方向上(shàng)是處于有邊界的限制還是無邊界的限制下(xià)。

在有邊界的限制下(xià)，他(tā)們在這(zhè)個方向上(shàng)會盡可(kě)能(néng)大。

在無邊界的限制下(xià)，他(tā)們試圖讓自(zì)己的子節點在這(zhè)個方向自(zì)适應。 在這(zhè)種情況下(xià)，您不能(néng)将子節點的flex屬性設置為(wèi)0以外(wài)的任何值（默認值為(wèi)0）。 在widget庫中，這(zhè)意味着一(yī)個彈性盒位于另一(yī)個彈性盒或可(kě)滾動的盒子內(nèi)部時(shí)，你不能(néng)使用Expanded。 如(rú)果你這(zhè)樣做(zuò)，你會得到一(yī)個異常消息。

在 交叉 方向上(shàng), 例如(rú)在Column的寬度和(hé)在Row的高度上(shàng)，它們絕不能(néng)是無界的，否則它們将無法合理地(dì)對齊他(tā)們的子節點。