Flutter学习笔记19-Container

zombie · 简书 · · 2020-10-22 14:03

Container是一个组合类容器，它是DecoratedBox、ConstrainedBox、Transform、Padding、Align等组件组合的一个多功能容器。
源码如下：

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的大小可以通过width、height属性来指定，也可以通过constraints来指定；如果它们同时存在时，width、height优先。Container内部会根据width、height来生成一个constraints。
color和decoration是互斥的，如果同时设置它们则会报错。当指定color时，Container内会自动创建一个decoration。
代码示例：

class ContainerDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(top: 50.0, left: 100),
      constraints: BoxConstraints.tightFor(width: 200.0, height: 100.0),
      decoration: BoxDecoration(
        gradient: RadialGradient(
          colors: [Colors.red, Colors.orange],
          center: Alignment.center,
          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('10.10', style: TextStyle(color: Colors.white, fontSize: 40.0)),
    );
  }
}

代码运行效果图如下：