容器類Widget和布局類Widget都作用于其子Widget，不同的是：

布局類Widget一般都需要接收一個(gè)widget數(shù)組（children），他們直接或間接繼承自（或包含）MultiChildRenderObjectWidget ；而容器類Widget一般只需要接收一個(gè)子Widget（child），他們直接或間接繼承自（或包含）SingleChildRenderObjectWidget。

布局類Widget是按照一定的排列方式來對(duì)其子Widget進(jìn)行排列；而容器類Widget一般只是包裝其子Widget，對(duì)其添加一些修飾（補(bǔ)白或背景色等）、變換(旋轉(zhuǎn)或剪裁等)、或限制(大小等)。

填充（Padding）

Padding可以給其子節(jié)點(diǎn)添加填充（留白），和邊距效果類似。

尺寸限制類容器

尺寸限制類容器用于限制容器大小，F(xiàn)lutter中提供了多種這樣的容器，如ConstrainedBox、SizedBox、UnconstrainedBox、AspectRatio等

?ConstrainedBox

ConstrainedBox用于對(duì)子組件添加額外的約束。例如，如果你想讓子組件的最小高度是80像素，你可以使用const BoxConstraints(minHeight: 80.0)作為子組件的約束。

SizedBox

SizedBox用于給子元素指定固定的寬高。

而實(shí)際上ConstrainedBox和SizedBox都是通過RenderConstrainedBox來渲染的。

多重限制（ConstrainedBox）

我們發(fā)現(xiàn)有多重限制時(shí)，對(duì)于minWidth和minHeight來說，是取父子中相應(yīng)數(shù)值較大的。

UnconstrainedBox

UnconstrainedBox不會(huì)對(duì)子組件產(chǎn)生任何限制，它允許其子組件按照其本身大小繪制。一般情況下，我們會(huì)很少直接使用此組件，但在"去除"多重限制的時(shí)候也許會(huì)有幫助。

其它尺寸限制類容器

還有一些其他的尺寸限制類容器，比如AspectRatio，它可以指定子組件的長(zhǎng)寬比、LimitedBox?用于指定最大寬高、FractionallySizedBox?可以根據(jù)父容器寬高的百分比來設(shè)置子組件寬高等。

?裝飾容器DecoratedBox

DecoratedBox可以在其子組件繪制前(或后)繪制一些裝飾（Decoration），如背景、邊框、漸變等。

BoxDecoration

通常會(huì)直接使用BoxDecoration類，它是一個(gè)Decoration的子類，實(shí)現(xiàn)了常用的裝飾元素的繪制。

變換（Transform）

Transform可以在其子組件繪制時(shí)對(duì)其應(yīng)用一些矩陣變換來實(shí)現(xiàn)一些特效。Matrix4是一個(gè)4D矩陣，通過它我們可以實(shí)現(xiàn)各種矩陣操作。

平移

Transform.translate接收一個(gè)offset參數(shù)，可以在繪制時(shí)沿x、y軸對(duì)子組件平移指定的距離。

旋轉(zhuǎn)

Transform.rotate可以對(duì)子組件進(jìn)行旋轉(zhuǎn)變換。

縮放

Transform.scale可以對(duì)子組件進(jìn)行縮小或放大。

注意

????Transform的變換是應(yīng)用在繪制階段，而并不是應(yīng)用在布局(layout)階段，所以無論對(duì)子組件應(yīng)用何種變化，其占用空間的大小和在屏幕上的位置都是固定不變的，因?yàn)檫@些是在布局階段就確定的。

????由于矩陣變化只會(huì)作用在繪制階段，所以在某些場(chǎng)景下，在UI需要變化時(shí)，可以直接通過矩陣變化來達(dá)到視覺上的UI改變，而不需要去重新觸發(fā)build流程，這樣會(huì)節(jié)省layout的開銷，所以性能會(huì)比較好。如之前介紹的Flow組件，它內(nèi)部就是用矩陣變換來更新UI，除此之外，F(xiàn)lutter的動(dòng)畫組件中也大量使用了Transform以提高性能。

RotatedBox

RotatedBox和Transform.rotate功能相似，它們都可以對(duì)子組件進(jìn)行旋轉(zhuǎn)變換，但是有一點(diǎn)不同：RotatedBox的變換是在layout階段，會(huì)影響在子組件的位置和大小。

Container

Container是一個(gè)組合類容器，它本身不對(duì)應(yīng)具體的RenderObject，它是DecoratedBox、ConstrainedBox、Transform、Padding、Align等組件組合的一個(gè)多功能容器。

????容器的大小可以通過width、height屬性來指定，也可以通過constraints來指定；如果它們同時(shí)存在時(shí)，width、height優(yōu)先。實(shí)際上Container內(nèi)部會(huì)根據(jù)width、height來生成一個(gè)constraints。

????color和decoration是互斥的，如果同時(shí)設(shè)置它們則會(huì)報(bào)錯(cuò)！實(shí)際上，當(dāng)指定color時(shí)，Container內(nèi)會(huì)自動(dòng)創(chuàng)建一個(gè)decoration。

Scaffold、TabBar、底部導(dǎo)航

Scaffold

Scaffold是一個(gè)路由頁的骨架，我們使用它可以很容易地拼裝出一個(gè)完整的頁面。

AppBar

AppBar是一個(gè)Material風(fēng)格的導(dǎo)航欄，通過它可以設(shè)置導(dǎo)航欄標(biāo)題、導(dǎo)航欄菜單、導(dǎo)航欄底部的Tab標(biāo)題等。

TabBar

Material組件庫中提供了一個(gè)TabBar組件，它可以快速生成Tab菜單。

TabBarView

通過TabBar我們只能生成一個(gè)靜態(tài)的菜單，真正的Tab頁還沒有實(shí)現(xiàn)。由于Tab菜單和Tab頁的切換需要同步，我們需要通過TabController去監(jiān)聽Tab菜單的切換去切換Tab頁。

抽屜菜單Drawer

Scaffold的drawer和endDrawer屬性可以分別接受一個(gè)Widget來作為頁面的左、右抽屜菜單。如果開發(fā)者提供了抽屜菜單，那么當(dāng)用戶手指從屏幕左（或右）側(cè)向里滑動(dòng)時(shí)便可打開抽屜菜單。

?FloatingActionButton

FloatingActionButton是Material設(shè)計(jì)規(guī)范中的一種特殊Button，通常懸浮在頁面的某一個(gè)位置作為某種常用動(dòng)作的快捷入口，如本節(jié)示例中頁面右下角的"?"號(hào)按鈕。我們可以通過Scaffold的floatingActionButton屬性來設(shè)置一個(gè)FloatingActionButton，同時(shí)通過floatingActionButtonLocation屬性來指定其在頁面中懸浮的位置。

底部Tab導(dǎo)航欄

我們可以通過Scaffold的bottomNavigationBar屬性來設(shè)置底部導(dǎo)航，如本節(jié)開始示例所示，我們通過Material組件庫提供的BottomNavigationBar和BottomNavigationBarItem兩種組件來實(shí)現(xiàn)Material風(fēng)格的底部導(dǎo)航欄。

剪裁（Clip）

CustomClipper

如果我們想剪裁子組件的特定區(qū)域，比如，在上面示例的圖片中，如果我們只想截取圖片中部40×30像素的范圍應(yīng)該怎么做？這時(shí)我們可以使用CustomClipper來自定義剪裁區(qū)域，實(shí)現(xiàn)代碼如下：