Container

Container是DecoratedBox、ConstrainedBox、Transform、Padding、Align等widget的一個組合widget。因此咱們只需經過一個Container能夠實現同時須要裝飾、變換、限制的場景。下面是Container的定義：

Container({
  this.alignment,
  this.padding, //容器內補白，屬於decoration的裝飾範圍
  Color color, // 背景色
  Decoration decoration, // 背景裝飾
  Decoration foregroundDecoration, //前景裝飾
  double width,//容器的寬度
  double height, //容器的高度
  BoxConstraints constraints, //容器大小的限制條件
  this.margin,//容器外補白，不屬於decoration的裝飾範圍
  this.transform, //變換
  this.child,
})

實例

咱們經過Container實現以下的卡片：

代碼：

Container(
  margin: EdgeInsets.only(top: 50.0, left: 120.0), //容器外補白
  constraints: BoxConstraints.tightFor(width: 200.0, height: 150.0), //卡片大小
  decoration: BoxDecoration(//背景裝飾
      gradient: RadialGradient( //背景徑向漸變
          colors: [Colors.red, Colors.orange],
          center: Alignment.topLeft,
          radius: .98
      ),
      boxShadow: [ //卡片陰影
        BoxShadow(
            color: Colors.black54,
            offset: Offset(2.0, 2.0),
            blurRadius: 4.0
        )
      ]
  ),
  transform: Matrix4.rotationZ(.2), //卡片傾斜變換
  alignment: Alignment.center, //卡片內文字居中
  child: Text( //卡片文字
    "5.20", style: TextStyle(color: Colors.white, fontSize: 40.0),
  ),
);