天天看點

【Flutter 1-16】Flutter手把手教程UI布局和Widget——容器控件Container

我們先來看一下Container初始化的參數:

注意:

Container 的color屬性與屬性 decoration的color存在沖突,如果兩個color都做了設定,預設會以decoration的color為準。

如果我們沒有給Container設定width和height,Container會跟child的大小一樣;假如我們沒有設定child的時候,它的尺寸會極大化,盡可能的充滿它的父Widget。

1. 最簡單的Container

Container接收一個child參數,我們可以傳入Text作為child參數,然後傳入是一個顔色。

【Flutter 1-16】Flutter手把手教程UI布局和Widget——容器控件Container

2. Padding

Padding是内邊距,我們在這裡設定了padding: EdgeInsets.all(10),也就是說Text距離Container的四條邊的邊距都是10。

【Flutter 1-16】Flutter手把手教程UI布局和Widget——容器控件Container

3. Margin

Margin是外邊距,我們在這裡設定了margin: EdgeInsets.all(10),Container在原有大小的基礎上,又被包圍了一層寬度為10的矩形。

需要注意,綠色外圍的白色區域也是屬于Container的一部分。

【Flutter 1-16】Flutter手把手教程UI布局和Widget——容器控件Container

4. transform

transform可以幫助我們做旋轉,Matrix4給我們提供了很多的變換樣式。

【Flutter 1-16】Flutter手把手教程UI布局和Widget——容器控件Container

5. decorationdecoration可以幫助我們實作更多的效果。例如形狀、圓角、邊界、邊界顔色等。

【Flutter 1-16】Flutter手把手教程UI布局和Widget——容器控件Container

這裡就是設定了一個圓角的示例,同樣我們對BoxDecoration的color屬性設定顔色,對整個Container的也是有效的。

6. 顯示 Image

BoxDecoration可以傳入一個Image對象,這樣就靈活了很多,Image可以來自本地也可以來自網絡。

【Flutter 1-16】Flutter手把手教程UI布局和Widget——容器控件Container

7. Border

使用border可以幫助我們做邊界效果,還可以設定圓角borderRadius,也可以設定border的寬度,顔色等。

【Flutter 1-16】Flutter手把手教程UI布局和Widget——容器控件Container

8. 漸變色

BoxDecoration的屬性gradient可以接收一個顔色的數組,Alignment.center是漸變色開始的位置,可以從左上角、右上角、中間等位置開始顔色變化。

【Flutter 1-16】Flutter手把手教程UI布局和Widget——容器控件Container

想體驗以上的Container的示例的運作效果,可以到我的Github倉庫項目flutter_app->lib->routes->container_page.dart檢視,并且可以下載下傳下來運作并體驗。