我們先來看一下Container初始化的參數:
注意:
Container 的color屬性與屬性 decoration的color存在沖突,如果兩個color都做了設定,預設會以decoration的color為準。
如果我們沒有給Container設定width和height,Container會跟child的大小一樣;假如我們沒有設定child的時候,它的尺寸會極大化,盡可能的充滿它的父Widget。
1. 最簡單的Container
Container接收一個child參數,我們可以傳入Text作為child參數,然後傳入是一個顔色。
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsISPrdEZwZ1Rh5WNXp1bwNjW1ZUba9VZwlHdsATOfd3bkFGazxCMx8VesATMfhHLlN3XnxCMwEzX0xiRGZkRGZ0Xy9GbvNGLpZTY1EmMZVDUSFTU4VFRR9Fd4VGdsYTMfVmepNHLrJXYtJXZ0F2dvwVZnFWbp1zczV2YvJHctM3cv1Ce-cmbw5yMlZWNhRTNzIGMwcjNkJWNiVjM1UWYjhTM2QmYilzY38CX5IzLcJTMwIDMy8CXn9Gbi9CXzV2Zh1WavwVbvNmLvR3YxUjL3M3Lc9CX6MHc0RHaiojIsJye.png)
2. Padding
Padding是内邊距,我們在這裡設定了padding: EdgeInsets.all(10),也就是說Text距離Container的四條邊的邊距都是10。
3. Margin
Margin是外邊距,我們在這裡設定了margin: EdgeInsets.all(10),Container在原有大小的基礎上,又被包圍了一層寬度為10的矩形。
需要注意,綠色外圍的白色區域也是屬于Container的一部分。
4. transform
transform可以幫助我們做旋轉,Matrix4給我們提供了很多的變換樣式。
5. decorationdecoration可以幫助我們實作更多的效果。例如形狀、圓角、邊界、邊界顔色等。
這裡就是設定了一個圓角的示例,同樣我們對BoxDecoration的color屬性設定顔色,對整個Container的也是有效的。
6. 顯示 Image
BoxDecoration可以傳入一個Image對象,這樣就靈活了很多,Image可以來自本地也可以來自網絡。
7. Border
使用border可以幫助我們做邊界效果,還可以設定圓角borderRadius,也可以設定border的寬度,顔色等。
8. 漸變色
BoxDecoration的屬性gradient可以接收一個顔色的數組,Alignment.center是漸變色開始的位置,可以從左上角、右上角、中間等位置開始顔色變化。
想體驗以上的Container的示例的運作效果,可以到我的Github倉庫項目flutter_app->lib->routes->container_page.dart檢視,并且可以下載下傳下來運作并體驗。