一、介紹

Container 組件是一個方便繪制、定位和調(diào)整子組件大小的組件(可以裝別的組件的盒子)

二、創(chuàng)建container組件源碼

Container({
    Key key,
    this.alignment,
    this.padding,
    this.color,
    this.decoration,
    this.foregroundDecoration,
    double width,
    double height,
    BoxConstraints constraints,
    this.margin,
    this.transform,
    this.child,
    this.clipBehavior = Clip.none,
  }) : assert(margin == null || margin.isNonNegative),
       assert(padding == null || padding.isNonNegative),
       assert(decoration == null || decoration.debugAssertIsValid()),
       assert(constraints == null || constraints.debugAssertIsValid()),
       assert(clipBehavior != null),
       assert(decoration != null || clipBehavior == Clip.none),
       assert(color == null || decoration == null,
         'Cannot provide both a color and a decoration\n'
         'To provide both, use "decoration: BoxDecoration(color: color)".'
       ),
       constraints =
        (width != null || height != null)
          ? constraints?.tighten(width: width, height: height)
            ?? BoxConstraints.tightFor(width: width, height: height)
          : constraints,
       super(key: key);

三枷邪、屬性介紹

對齊方式，使用如下

內(nèi)邊距诺凡，使用如下

背景色,不能與 decoration 屬性同時設置
裝飾，也就是設置背景色践惑、邊框腹泌、圓角等，不能和color同時使用尔觉，Decoration是抽象類凉袱，一般使用BoxDecoration的實現(xiàn)類（FlutterLogoDecoration、ShapeDecoration侦铜、UnderlineTabIndicator也是Decoration的實現(xiàn)類）

BoxDecoration的源碼

const BoxDecoration({
    this.color,//背景填充顏色
    this.image,//使用圖片作為裝飾
    this.border,//可以設置邊框顏色专甩、邊框?qū)挾取⑦吙驑邮?    this.borderRadius,//邊框圓角
    this.boxShadow,//陰影效果
    this.gradient,//設置成漸變效果的背景钉稍，會覆蓋 color
    this.backgroundBlendMode,//混合模式（暫不了解）
    this.shape = BoxShape.rectangle,
  }) : assert(shape != null),
       assert(
         backgroundBlendMode == null || color != null || gradient != null,
         "backgroundBlendMode applies to BoxDecoration's background color or "
         'gradient, but no color or gradient was provided.'
       );

BoxDecoration屬性

裝飾种樱，繪制在child之上，使用方法同decoration
寬
高
約束條件（暫不了解如何使用）
外邊距俊卤，使用方法同padding
形狀變化嫩挤，簡單使用如下

子組件

demo

class ContainerTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
        child: Container(
      //對齊方式
      alignment: Alignment.center,
      //內(nèi)邊距
      padding: EdgeInsets.fromLTRB(10.0, 20.0, 10.0, 20.0),
      //背景色
//          color: Colors.yellow,
      //裝飾
      decoration: BoxDecoration(
        //背景色
        color: Colors.red,
        //圖片地址
//        image: DecorationImage(image: NetworkImage("url")),
        //邊框
        border: Border.all(color: Color(0xff000000), width: 5.0),
        //圓角
        borderRadius: BorderRadius.only(
            topLeft: Radius.circular(10.0),
            topRight: Radius.circular(20.0),
            bottomLeft: Radius.circular(30.0),
            bottomRight: Radius.circular(40.0)),
        //陰影
        boxShadow: [BoxShadow(color: Color(0xff000000), blurRadius: 5.0)],
        //漸變色
        gradient: LinearGradient(
            colors: [Colors.amberAccent, Colors.blue, Colors.deepPurple]),
//          backgroundBlendMode: BlendMode.color //混合模式
      ),
      //裝飾岂昭，child之上
//      foregroundDecoration: BoxDecoration(),
      child: Text(
        "我是一個文本",
        style: TextStyle(color: Colors.red),
      ),
      //寬
      width: 300.0,
      //高
      height: 300.0,
      //外邊距
      margin: EdgeInsets.all(10.0),
      //根據(jù)x,y,z的值進行平移
//          transform:Matrix4.translationValues(20.0, 20.0, 20.0),
      //根據(jù)x,y,z的值進行縮放，正值放大狠怨，負值縮小
//            transform: Matrix4.diagonal3Values(-2, -2, 1),
      //根據(jù)z軸進行旋轉
//            transform: Matrix4.rotationZ(1.3),
      //根據(jù)y軸進行旋轉
//        transform: Matrix4.rotationY(1.3),
      //根據(jù)x軸進行旋轉
//      transform: Matrix4.rotationX(1.5),
      //扭曲约啊，根據(jù)x,y軸的值進行扭曲
//        transform: Matrix4.skew(1.5, 0.0),
      //扭曲，根據(jù)x軸的值進行扭曲
//        transform: Matrix4.skewX(1.3),
      //扭曲取董，根據(jù)y軸的值進行扭曲
      transform: Matrix4.skewY(-0.5),
    ));
  }
}

企業(yè)微信截圖_16056317458073.png

（整理出來棍苹，方便個人查找和學習）