Flutter控制項 Container

container 乙個方便的 widget，它組合了常見的繪畫、定位和大小的 widget，在flutter中非常常見。顏色，邊框，填充形狀，陰影，漸變色，背景。 """

container 首先會使用 padding 來圍繞在 child 周圍（也包括 decoration 中存在的邊框）。

新增額外的約束限制（將寬度和高度合併為約束，如果寬高不為 null）

最後用 margin 包裹住

首先會繪製給定的 transform

之後繪製 decoration 來繪製邊框

然後繪製 child

最後繪製 foregrounddecoration （前景裝飾），同時填充該區域

由於 container 結合了許多其他 widget，每個 widget 都有自己的布局行為，因此 container 的布局行為有點複雜。有的時候跟隨自己。有的時候跟隨 child。有的時候跟隨父親。簡單說，就是如果 container 沒有 child，沒有 height，沒有 width，沒有約束，並且父視窗提供無限制約束，則 container 會嘗試盡可能小。

1.4.1 總結來說按照順序

先遵循對齊（alignment屬性）

以 child 的寬高也約束。來約束自己，就是適配 child 的約束，可以認為是 android 上的 wrap_content

足夠小的來適應 container 的父布局

1.4.2 更確切的按下面的走

如果 container 沒有 child ，沒有 height，沒有 width，沒有 constraints (約束)，並且父節點提供無限制約束，則 container 嘗試盡可能小

如果 container 沒有 child 且沒有 alignment (對齊)，但提供了 height，width 或 constraints(約束)，則在給定這些 constraints(約束)和父節點 constraints(約束)的組合的情況下，container會盡可能小。

如果 container 沒有 child，沒有 height，沒有 width，沒有 constraints (約束)，沒有 alignment (對齊)，但是父節點提供了有界約束，那麼container會擴充套件以適應父節點提供的約束。

如果 container 具有 alignment (對齊)，並且父節點提供無限制約束，則container 會嘗試圍繞 child 調整自身大小,也就是所謂的跟 child 一樣大

如果 container 具有 alignment （對齊），並且父視窗提供有界約束，則 container 則會跟父節點一樣大，然後根據 alignment （對齊方式）將 child 放到其自身內部

如果 container具有 child 但沒有 height，沒有 width，沒有約束，也沒有 alignment (對齊)，並且 container 將 constraints(約束)從父級傳遞給 child 並調整自己大小以適應 child

額外說明：margin 和 padding 屬性也會影響其布局。

1.5.1 alignment

在 container 裡面 child 的對齊方式 , 如果 child 為 null ，則忽略這個屬性。取值 alignment( x , y)，同樣也有幾個常亮來表示，這幾個常亮，足以在專案中完成

1.5.2 padding

內邊距 1.5.3 color 、 width 和 height

container 的背景色。color屬性不能與 decoration 不能共存

1.5.4 margin

外邊距與 padding 取值一樣

1.5.5 decoration

繪製在 child 後面裝飾品設定邊框、背景色、背景、圓角等屬性，不能與 color 屬性共存。下面是 boxdecoration 的屬性

1.5.5.1 boxdecoration 講解

1.5.6 foregrounddecoration

繪製在 child 前面裝飾品設定邊框、背景色、背景、圓角等屬性，可以與 color 屬性共存。但是會遮蓋住 child 和背景色

1.5.7 constraints

container 的約束。相當於規定 container 的maxheight,maxwidth，minheight，minwidth 。如果 container 的 width 大於此 maxwidth，那麼大小按 maxwidth 來算。其他的也是如此

1.5.8 transform 矩陣變換和 child

Flutter控制項 Container

flutter之Align控制項

flutter控制項之CheckBox

Flutter基礎控制項 Row，Column

Flutter控制項 Container

flutter之Align控制項

flutter控制項之CheckBox

Flutter基礎控制項 Row，Column

相關推薦