## 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的代碼的情況下無法徹底去除其限制條件。
- 緣起
- 起步
- 移動開發技術簡介
- Flutter簡介
- 搭建Flutter開發環境
- 常見配置問題
- Dart語言簡介
- 第一個Flutter應用
- 計數器示例
- 路由管理
- 包管理
- 資源管理
- 調試Flutter APP
- Dart線程模型及異常捕獲
- 基礎Widgets
- Widget簡介
- 文本、字體樣式
- 按鈕
- 圖片和Icon
- 單選框和復選框
- 輸入框和表單
- 布局類Widgets
- 布局類Widgets簡介
- 線性布局Row、Column
- 彈性布局Flex
- 流式布局Wrap、Flow
- 層疊布局Stack、Positioned
- 容器類Widgets
- Padding
- 布局限制類容器ConstrainedBox、SizeBox
- 裝飾容器DecoratedBox
- 變換Transform
- Container容器
- Scaffold、TabBar、底部導航
- 可滾動Widgets
- 可滾動Widgets簡介
- SingleChildScrollView
- ListView
- GridView
- CustomScrollView
- 滾動監聽及控制ScrollController
- 功能型Widgets
- 導航返回攔截-WillPopScope
- 數據共享-InheritedWidget
- 主題-Theme
- 事件處理與通知
- 原始指針事件處理
- 手勢識別
- 全局事件總線
- 通知Notification
- 動畫
- Flutter動畫簡介
- 動畫結構
- 自定義路由過渡動畫
- Hero動畫
- 交錯動畫
- 自定義Widget
- 自定義Widget方法簡介
- 通過組合現有Widget實現
- 實例:TurnBox
- CustomPaint與Canvas
- 實例:圓形漸變進度條(自繪)
- 文件操作與網絡請求
- 文件操作
- Http請求-HttpClient
- Http請求-Dio package
- 實例:Http分塊下載
- WebSocket
- 使用Socket API
- Json轉Model
- 包與插件
- 開發package
- 插件開發:平臺通道簡介
- 插件開發:實現Android端API
- 插件開發:實現IOS端API
- 系統能力調用
- 國際化
- 讓App支持多語言
- 實現Localizations
- 使用Intl包
- Flutter核心原理
- Flutter UI系統
- Element和BuildContext
- RenderObject與RenderBox
- Flutter從啟動到顯示