Flutter布局篇——Container基本使用

1，child

放置子元素。

Container(
  child: Text('你好，世界！',textScaleFactor:4,),
)

2，width，height，color

宽，高，背景色。

Container(
  child: Text('你好，世界！',textScaleFactor:4,),
  width: 300,
  height: 300,
  color: Colors.pink[200],
)

3，padding，margin

内间距，外间距。

Container(
  child: Text('你好，世界！',textScaleFactor:4,),
  width: 400,
  height: 400,
  padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
  margin: EdgeInsets.fromLTRB(10, 10, 10, 10),
  color: Colors.pink[200],
)

4，alignment

内容对齐。

Container(
  child: Text('你好，世界！',textScaleFactor:4,),
  alignment: Alignment.topCenter,
)

5，constraints

最大，最小宽高。

Container(
  child: Text('你好，世界！', textScaleFactor: 4,),
  color: Colors.pink[100],
  width: 400,
  height: 400,
  constraints: BoxConstraints(
      maxWidth: 300, maxHeight: 300,
      minWidth: 100, minHeight: 100
  ),
)

6，decoration

BoxDecoration：背景色，背景图片，边框，圆角，阴影，渐变等等。

背景色

Container(
  decoration: BoxDecoration(
    color: Colors.pink[100]
  ),
)

背景图片

Container(
  decoration: BoxDecoration(
    image:DecorationImage( image:NetworkImage("https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"))
  ),
)

边框

Container(
  decoration: BoxDecoration(
      border: Border(
    top: BorderSide(width: 10, color: Colors.pink),
    left: BorderSide(width: 10, color: Colors.red),
    right: BorderSide(width: 10, color: Colors.black),
    bottom: BorderSide(width: 10, color: Colors.blue),
  )),
)

圆角

Container(
    decoration: BoxDecoration(
        border: Border.all(color: Colors.red, width: 10),
        borderRadius: BorderRadius.all(Radius.elliptical(40, 40))
    )
)

阴影

Container(
  width: 100,
    height: 100,
    margin:EdgeInsets.fromLTRB(100, 100, 100, 100),
    decoration: BoxDecoration(
        border: Border.all(color: Colors.red, width: 1),
        boxShadow: [BoxShadow(color: Colors.black12,offset: Offset(10,10))]
    )
)

渐变

Container(
    decoration:
        BoxDecoration(
            gradient: LinearGradient(colors: [Colors.black,Colors.white])
        )
)

7，foregroundDecoration

和decoration差不多，只不过在内容前面。

Container(
    child: Text('你好，世界！',textScaleFactor: 4,),
    foregroundDecoration: BoxDecoration(color:Colors.pink[100])
)

8，transform，transformAlignment

平移，旋转，缩放。

Container(
  width: 100,
  height: 100,
  color: Colors.pink[100],
  transform: Matrix4.rotationZ(30),
  transformAlignment: Alignment.center,
)