flutter佈局-4-container

劉成發表於2018-11-07
FlutterAI

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的屬性有個全面的瞭解。

1、alignment：對齊方式 Alignment

下面先看下Alignment： 先上圖：

mainaxis.png

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

2、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，第二個是螢幕的解析度；

3、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,
複製程式碼

未標題-1.png

其中上面的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], 
複製程式碼
  1. Color.fromARGB(100, 10, 100, 100)，A表示不透明度，值從0-255，RGB值也是從0-255；
  2. Color.fromRGBO(100, 10, 10, 1)，O表示不透明度，值從0-1，RGB值是從0-255；
  3. Color.alphaBlend(Color.fromRGBO(10, 10, 255, 0.1), Color.fromRGBO(100, 10, 255, 0.5)) ，這個是顏色的混合， 顏色會根據不透明度進行合併； 如果前者的不透明度為1，就只顯示前者顏色，前者為0，顏色為後者，否則就是按照前後者的不透明度和顏色進行混合；

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

5、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的
複製程式碼

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

decoration.png

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) //這個擴散的半徑，半徑越大陰影面積越大，值越小陰影面積越小
複製程式碼

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

7、constraints：約束子child的

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

contrants.png

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

相關文章