新建項目-2.png

Container 是一個擁有繪制封救、定位昂灵、調整大小的 Widget.

Container

Container({
    Key key,
    this.alignment,            //容器內 child 的對齊方式   （9個位置）      
    this.padding,              //容器內邊距
    Color color, 
    Decoration decoration,     //容器的背景裝飾
    this.foregroundDecoration, //容器的前景裝飾
    double width,
    double height,
    BoxConstraints constraints,//容器的大小限制
    this.margin,               //容器外邊距
    this.transform,            //容器的變化
    this.child,                //容器里顯示的 Widget
  }) 

1. 繪制過程

Container的繪制的過程如下：

• 首先會繪制transform效果答憔；
• 接著繪制decoration我衬；
• 然后繪制child幽纷；
• 最后繪制foregroundDecoration涂屁。

2. alignment 對齊方式. 9個方位對齊方式.

3. padding甸怕、margin 內容邊距

padding: 內邊距

margin: 外邊距

4. decoration 容器的背景裝飾

const BoxDecoration({
    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的
  })

 body: Container(
  alignment: Alignment.center,
  color: Colors.white,
  child: Column(
    children: <Widget>[

      Container(
        //對齊方式
        alignment: Alignment.center,
        //容器內間距
        margin: EdgeInsets.only(top: 20 , left:  20),
        //卡片大小
        constraints: BoxConstraints.tightFor(width: 200, height: 150),
        //背景裝飾
        decoration: BoxDecoration(
          gradient: RadialGradient(
            //這里設置漸變設外面就不能設置背景色,不然會報錯誤
            colors: [Colors.green, Colors.blue],
              center: Alignment.topLeft,
              radius: .98
          ),
          //加陰影
          boxShadow: [
            BoxShadow(
              color: Colors.black54,
              offset: Offset(2.0, 2.0),
              blurRadius: 4.0
            )
          ]
        ),
        transform: Matrix4.rotationZ(.2), //卡片傾斜變換
        child: Text(
          "Hello Flutter",
          style: TextStyle(
              fontSize: 30,
              color: Colors.red
          ),
        ),
      ),

    ],
  ),
),

image.png

5. 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