一、介紹

Container 組件是一個(gè)方便繪制、定位和調(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);

三、屬性介紹

對(duì)齊方式，使用如下

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

背景色,不能與 decoration 屬性同時(shí)設(shè)置
裝飾，也就是設(shè)置背景色、邊框、圓角等，不能和color同時(shí)使用，Decoration是抽象類(lèi)，一般使用BoxDecoration的實(shí)現(xiàn)類(lèi)（FlutterLogoDecoration、ShapeDecoration、UnderlineTabIndicator也是Decoration的實(shí)現(xiàn)類(lèi)）

BoxDecoration的源碼

const BoxDecoration({
    this.color,//背景填充顏色
    this.image,//使用圖片作為裝飾
    this.border,//可以設(shè)置邊框顏色、邊框?qū)挾?、邊框樣?    this.borderRadius,//邊框圓角
    this.boxShadow,//陰影效果
    this.gradient,//設(shè)置成漸變效果的背景，會(huì)覆蓋 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
形狀變化，簡(jiǎn)單使用如下

子組件

demo

class ContainerTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
        child: Container(
      //對(duì)齊方式
      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(
        "我是一個(gè)文本",
        style: TextStyle(color: Colors.red),
      ),
      //寬
      width: 300.0,
      //高
      height: 300.0,
      //外邊距
      margin: EdgeInsets.all(10.0),
      //根據(jù)x,y,z的值進(jìn)行平移
//          transform:Matrix4.translationValues(20.0, 20.0, 20.0),
      //根據(jù)x,y,z的值進(jìn)行縮放，正值放大，負(fù)值縮小
//            transform: Matrix4.diagonal3Values(-2, -2, 1),
      //根據(jù)z軸進(jìn)行旋轉(zhuǎn)
//            transform: Matrix4.rotationZ(1.3),
      //根據(jù)y軸進(jìn)行旋轉(zhuǎn)
//        transform: Matrix4.rotationY(1.3),
      //根據(jù)x軸進(jìn)行旋轉(zhuǎn)
//      transform: Matrix4.rotationX(1.5),
      //扭曲，根據(jù)x,y軸的值進(jìn)行扭曲
//        transform: Matrix4.skew(1.5, 0.0),
      //扭曲，根據(jù)x軸的值進(jìn)行扭曲
//        transform: Matrix4.skewX(1.3),
      //扭曲，根據(jù)y軸的值進(jìn)行扭曲
      transform: Matrix4.skewY(-0.5),
    ));
  }
}

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

（整理出來(lái)，方便個(gè)人查找和學(xué)習(xí)）