Flutter控件--Container

一 。Container

1.1 簡介

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

1.2 繪製流程

1. Container 首先會使用 padding 來圍繞在 child 周圍（也包括 decoration 中存在的邊框）。
2. 添加額外的約束限制（將寬度和高度合併爲約束，若是寬高不爲 null）
3. 最後用 margin 包裹住

1.3 繪製過程

1. 首先會繪製給定的 transform
2. 以後繪製 decoration 來繪製邊框
3. 而後繪製 child
4. 最後繪製 foregroundDecoration （前景裝飾），同時填充該區域

1.4 佈局大小行爲

因爲 Container 結合了許多其餘 widget，每一個 widget 都有本身的佈局行爲，所以 Container 的佈局行爲有點複雜 。有的時候跟隨本身。有的時候跟隨 child。有的時候跟隨 父親。簡單說，就是若是 Container 沒有 child，沒有 height，沒有 width，沒有約束，而且父窗口提供無限制約束，則 Container 會嘗試儘量小。

1.4.1 總結來講按照順序

1. 先遵循對齊（alignment屬性）
2. 以 child 的寬高也約束。來約束本身，就是適配 child 的約束，能夠認爲是 android 上的 wrap_content
3. 足夠小的來適應 Container 的父佈局

1.4.2 更確切的按下面的走

1. 若是 Container 沒有 child ，沒有 height，沒有 width，沒有 constraints (約束)，而且父節點提供無限制約束，則 Container 嘗試儘量小
2. 若是 Container 沒有 child 且 沒有 alignment (對齊)，但提供了 height，width 或 constraints(約束)，則在給定這些 constraints(約束)和父節點 constraints(約束)的組合的狀況下，Container會盡量小。
3. 若是 Container 沒有 child，沒有 height，沒有 width，沒有 constraints (約束)，沒有 alignment (對齊)，可是父節點提供了有界約束，那麼Container會擴展以適應父節點提供的約束。
4. 若是 Container 具備 alignment (對齊)，而且父節點提供無限制約束，則Container 會嘗試圍繞 child 調整自身大小,也就是所謂的跟 child 同樣大
5. 若是 Container 具備 alignment （對齊），而且父窗口提供有界約束，則 Container 則會跟父節點同樣大，而後根據 alignment （對齊方式）將 child 放到其自身內部
6. 若是 Container具備 child 但沒有 height，沒有 width，沒有約束，也沒有 alignment (對齊)，而且 Container 將 constraints(約束)從父級傳遞給 child 並調整本身大小以適應 child
7. 額外說明： margin 和 padding 屬性也會影響其佈局。

1.5 屬性

1.5.1 alignment

在 Container 裏面 child 的對齊方式 , 若是 child 爲 null ，則 忽略 這個屬性 。取值 Alignment( x , y)，一樣也有幾個常亮來表示，這幾個常亮，足以在項目中完成

• Alignment topLeft = Alignment(-1.0, -1.0) ,左上角
• Alignment topCenter = Alignment(0.0, -1.0) 中上
• Alignment topRight = Alignment(1.0, -1.0);右上角
• Alignment centerLeft = Alignment(-1.0, 0.0);左中
• Alignment center = Alignment(0.0, 0.0) 正中心
• Alignment centerRight = Alignment(1.0, 0.0);中左
• Alignment bottomLeft = Alignment(-1.0, 1.0);左下
• Alignment bottomCenter = Alignment(0.0, 1.0) 中下
• Alignment bottomRight = Alignment(1.0, 1.0) 右下

1.5.2 padding

內邊距

• EdgeInsets.all(double value); 上下左右都有的邊距
• EdgeInsets.only({ this.left = 0.0, this.top = 0.0, this.right = 0.0, this.bottom = 0.0, }) : 單獨設置每一個的邊距
• EdgeInsets.fromLTRB(this.left, this.top, this.right, this.bottom) ： 單獨設置每一個的邊距。
• EdgeInsets.symmetric({ double vertical = 0.0, double horizontal = 0.0, })， 至關於 水平的 左右邊距都是 vertical。 垂直的 上下邊距都是 horizontal

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 講解

• color, 背景顏色
• image, 背景圖片 背景圖片是在 color上面的
• border, 邊框 Border.all(color: Colors.blueAccent, width: 2)
• borderRadius, 邊框弧度 BorderRadius.all(Radius.circular(20)),
• boxShadow, 陰影 此陰影數組是在 控件 Container 外面的陰影
• gradient, 漸變 // LinearGradient 線性漸變 // SweepGradient 波浪紋漸變 // RadialGradient 放射線漸變
• shape = BoxShape.rectangle,形狀 BoxShape.circle(圓形) 和 BoxShape.rectangle(長方形) ， 當是 圓形的時候 不能設置 borderRadius 屬性

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