flutter佈局-4-container

Container 容器

連載：flutter佈局-1-column 連載：flutter佈局-2-row 連載：flutter佈局-3-center

用來放置widget的容器，有padding、margin、位置、大小等參數。 具體有如下參數： alignment ：對齊方式 Alignment padding：內邊距 EdgeInsets margin：外邊距 EdgeInsets color： decoration： foregroundDecoration: width: 包含padding height:包含padding constraints：BoxConstraints： transform： child：子view，能夠爲空，就是一個空view 下面對每個參數進行詳細的講解，但願你們對container的屬性有個全面的瞭解。

一、alignment：對齊方式 Alignment

下面先看下Alignment： 先上圖：

也就是如上圖的象限所示同樣，左上角爲（-1，-1），右下角爲（1，1）

二、padding: 內邊距 margin：外邊距 這兩個一塊兒講了，具體的用法取值以下：

1. EdgeInsets.fromLTRB(10,10,10,10) ，L表示左邊距（left縮寫），T表示上邊距（top縮寫），R表示右邊距（right縮寫），B表示底邊距（bottom縮寫），四個值能夠分開寫；
2. EdgeInsets.all（10），上下左右邊距均爲10；
3. EdgeInsets.only(left: 10, right: 5, top: 10, bottom: 10)，可分別指定4個方向的邊距值，若是隻須要上邊距，能夠寫成EdgeInsets.only( top: 10)；
4. EdgeInsets.symmetric(vertical: 20, horizontal: 10) ，能夠指定垂直和水平方向的邊距，也能夠單獨指定垂直或者水平方向的邊距。如只須要垂直方向的邊距，可寫成EdgeInsets.symmetric(vertical: 20)；
5. EdgeInsets.fromWindowPadding()，建立與給定窗口填充匹配的insets。具體的用法目前還不知道,第一個參數是給定的widget的windowpadding，第二個是屏幕的分辨率；

三、color：顏色

1. Colors.green ，系統默認了幾種顏色，分別以下：

red,
    pink,
    purple,
    deepPurple,
    indigo,
    blue,
    lightBlue,
    cyan,
    teal,
    green,
    lightGreen,
    lime,
    yellow,
    amber,
    orange,
    deepOrange,
    brown,
    blueGrey,
複製代碼

redAccent,
    pinkAccent,
    purpleAccent,
    deepPurpleAccent,
    indigoAccent,
    blueAccent,
    lightBlueAccent,
    cyanAccent,
    tealAccent,
    greenAccent,
    lightGreenAccent,
    limeAccent,
    yellowAccent,
    amberAccent,
    orangeAccent,
    deepOrangeAccent,
複製代碼

其中上面的18中顏色每一種有10個顏色，好比紅色的，Colors.red，這個是正宗的紅色，和Colors.red[500]的值是同樣的，往上還有

Colors.red[50], Colors.red[100], Colors.red[200], Colors.red[300],  Colors.red[400], 
Colors.red[600], Colors.red[700], Colors.red[800], Colors.red[900], 
複製代碼

帶有accent的顏色每一個有4中顏色，如

Colors.redAccent，Colors.redAccent[100], Colors.redAccent[200], Colors.redAccent[400],  Colors.redAccent[700], 
複製代碼

2. Color.fromARGB(100, 10, 100, 100)，A表示不透明度，值從0-255，RGB值也是從0-255；
3. Color.fromRGBO(100, 10, 10, 1)，O表示不透明度，值從0-1，RGB值是從0-255；
4. Color.alphaBlend(Color.fromRGBO(10, 10, 255, 0.1), Color.fromRGBO(100, 10, 255, 0.5)) ，這個是顏色的混合， 顏色會根據不透明度進行合併； 若是前者的不透明度爲1，就只顯示前者顏色，前者爲0，顏色爲後者，不然就是按照先後者的不透明度和顏色進行混合；

四、width：寬，height：高，不用講了

五、decoration：裝飾的東東，具體的參數以下：

this.color,// 顏色，若是這個顏色指定了，最外層的顏色就不能用了，不然會報錯，兩者不可兼容。
    this.image,// 背景圖片
    this.border,// 邊框
    this.borderRadius,// 邊框圓角
    this.boxShadow,// 陰影
    this.gradient,// 漸變，在圖片之下展現，若是指定了漸變色，color屬性就沒用了
    this.backgroundBlendMode, // 混合模式應用於框的[顏色]或[漸變]背景,若是沒有顏色或者漸變色，這個屬性就沒有效果
    this.shape = BoxShape.rectangle,// 這個有兩個值，一個是方形，一個是圓形（circle），
        BoxShape.rectangle和RoundedRectangleBorder是同樣的，CircleBorder和BoxShape.circle是同樣的效果
        可是Container的shape只能用BoxShape.rectangle、BoxShape.circle是這兩種，
        而RoundedRectangleBorder、CircleBorder目前是用在Material上的，
        由於Container的shape是繼承自 BoxBorder的，而Material的shape是繼承自ShapeBorder，
        雖然BoxBorder也是繼承ShapeBorder的
複製代碼

具體先看下圖片吧，清晰明瞭：

5.1 shape 外觀樣式，BoxShape.circle圓形圖案，BoxShape.rectangle方形圖案； 5.2 borderRadius 邊框半徑，有如下幾種寫法：

new BorderRadius.all(Radius.circular(4)) // 四個圓角都是半徑爲4
new BorderRadius.circular(4), // 四個圓角都是半徑爲4,和上面的效果是同樣的
new BorderRadius.horizontal( left: Radius.circular(10)), //左邊的兩個角的半徑爲10 
new BorderRadius.horizontal(left: Radius.circular(10), right: Radius.circular(4)),//左邊的兩個角半徑爲10，右側兩個角半徑爲4
new BorderRadius.vertical( top: Radius.circular(6)), //上邊兩個角半徑爲6
new BorderRadius.only(
                      topLeft: Radius.circular(10),
                      topRight: Radius.circular(4),
                      bottomLeft: Radius.circular(6),
                      bottomRight: Radius.circular(20)
                     ), //坐上角半徑爲10，右上角4，左下角爲6，右下角爲20

複製代碼

5.3 boxShadow 陰影，陰影是BoxShadow的數組：其中陰影有4個參數；

BoxShadow(
                    color: Colors.green, //陰影的顏色
                    offset: Offset(50, 100), //偏移量，Offset第一個參數爲x軸的偏移量，正值向右，負值向左，第二個參數是y軸的偏移量，正值向下，負值向上
                    blurRadius: 20, //這個是高斯模糊的半徑，半徑越大陰影越模糊，半徑越小陰影越清晰
                    spreadRadius: 10) //這個擴散的半徑，半徑越大陰影面積越大，值越小陰影面積越小
複製代碼

六、foregroundDecoration: 同上面的Decoration同樣，只不過這個是在子chlild的前面繪製，Decoration是在子child的後面繪製的。

七、constraints：約束子child的

值有最大寬度、最小寬度、最大高度、最小高度

八、transform：變換，下一章節再講了，這個原理有點兒多