Flutter组件学习（3）容器Container

介绍

Container作为Flutter中的用来布局的Widget，可以对子widget进行 绘制(painting)、定位(positioning)、调整大小(sizing)操作。

 

常用属性

decoration: BoxDecoration( border: Border.all(width: 2.0,color: Colors.blue), color: Colors.yellow, borderRadius: BorderRadius.all(Radius.circular(20.0)), // shape: BoxShape.circle//如果设置为圆形， //borderRadius不能和circle同时出现，会报错 shape: BoxShape.rectangle, ),	decoration属性设置边框 边框的Border.all设置边框的宽度，和颜色 设置容器背景 设置容器圆角
width: 300	设置容器宽度
height: 300,	设置容器高度
margin: EdgeInsets.all(20)	设置四面的外间距
margin: EdgeInsets.fromLTRB(50, 50, 30,40)	分别设置外间距的4上下左右面的距离
padding: EdgeInsets.all(10),	设置四面的内间距
padding: EdgeInsets.fromLTRB(50, 50, 30,40),	分别设置内间距的4上下左右面的距离
alignment: Alignment.bottomLeft	控制显示位置
transform: new Matrix4.rotationZ(0.3),	沿着Z轴翻转

• 需要注意的是这两处的颜色设置不能同时用，会报错

案例

class HomeText extends StatelessWidget{
  @override
  Widget build(BuildContext context) {

      return Container(
        margin: EdgeInsets.all(50),
        width: 200,
        height: 200,
        decoration: BoxDecoration(
            border: Border.all(width: 2.0,color: Colors.blue),
            color: Colors.yellow,
            borderRadius: BorderRadius.all(Radius.circular(20.0)),
            shape: BoxShape.rectangle//如果设置为圆形，borderRadius不能和circle同时出现
        ),

        transform: new Matrix4.rotationZ(0.2),
      );
}

运行效果