https://api.flutter.dev/flutter/widgets/Container-class.html

Container是一个组合类容器，它本身不对应具体的RenderObject，它是DecoratedBox、ConstrainedBox、Transform、Padding、Align等组件组合的一个多功能容器，所以我们只需通过一个Container组件可以实现同时需要装饰、变换、限制的场景。

Container的定义：

  1. Container({
  2.   this.alignment,
  3.   this.padding, //容器内补白，属于decoration的装饰范围
  4.   Color color, // 背景色
  5.   Decoration decoration, // 背景装饰
  6.   Decoration foregroundDecoration, //前景装饰
  7.   double width,//容器的宽度
  8.   double height, //容器的高度
  9.   BoxConstraints constraints, //容器大小的限制条件
  10.   this.margin,//容器外补白，不属于decoration的装饰范围
  11.   this.transform, //变换
  12.   this.child,
  13. })

Container 没设置child时，默认填满父组件；
Container 设置了child，默认是适配子控件大小的，即其宽高由子元素决定。
Container 设置了child，又设置了对齐方式，默认填满父组件。

示例：

  1. Column(
  2.   crossAxisAlignment: CrossAxisAlignment.start,
  3.   children: [
  4.     Container(
  5.       height: 60.0,
  6.       color: Colors.green,
  7.       child: Text('hello'),
  8.     ),
  9.     SizedBox(height: 5),
  10.     Container(
  11.       height: 60.0,
  12.       color: Colors.green, //没设置child，宽度等于全屏宽度
  13.     ),
  14.     SizedBox(height: 5),
  15.     Container(
  16.       width: 150,
  17.       height: 150,
  18.       color: Colors.green, 
  19.       child: Container(color: Colors.red),  //宽高、child都不设置，默认完全填充父组件
  20.     ),
  21.   ],
  22. );

image.png

常用属性

alignment 对齐方式

注意：设置对齐方式后，Container将会充满其父控件，相当于Android中 match_parent 。

Alignment封装常用位置对照图：

image.png

Alignment 坐标系，原点在组件中心。

Container - 图3

示例
  1. Container(
  2.   alignment: Alignment.centerRight,
  3.   width: 100.0,
  4.   height: 100.0,
  5.   decoration: BoxDecoration(
  6.     color: Colors.grey,
  7.     border: Border.all(color: Colors.green, width: 2.0),
  8.     borderRadius: BorderRadius.all(Radius.circular(10.0)),
  9.   ),
  10.   child: Text('我是'),
  11. ),

image.png

width、height、constraints

  • width 、height 宽高
  • constrains 容器大小的限制条件，设置最大/小宽、高来确定大小，如果不设置，默认最小宽高是0，最大宽高是无限大（double.infinity）

容器的大小可以通过width、height属性来指定，也可以通过constraints来指定；如果它们同时存在时，width、height优先。实际上Container内部会根据width、height来生成一个constraints。

  1. Container(
  2.   width: 100.0,
  3.   height: 100.0,
  4. ),
  1. Container(
  2.   // 限定宽高范围
  3.   constraints: BoxConstraints(
  4.     maxWidth: 300.00,
  5.     minWidth: 100.0,
  6.     minHeight: 100.0,
  7.     maxHeight: 300.0,
  8.   ),
  9.   // 指定宽高
  10.   constraints: BoxConstraints.tightFor(width: 100.0, height: 100.0),
  11. ),

margin、padding 外边距、内边距

  1. Container(
  2.   margin: EdgeInsets.all(20.0),
  3.   color: Colors.orange,
  4.   child: Text('hello flutter'),
  5. ),
  6. Container(
  7.   // 全内边距
  8.   padding: EdgeInsets.all(20.0),
  9.   // 四边距
  10.   // padding: EdgeInsets.fromLTRB(left, top, right, bottom)
  11.   padding: EdgeInsets.fromLTRB(20, 10, 20, 10),
  12.   // 垂直、水平内边距
  13.   padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
  14.   // 单边距
  15.   padding: EdgeInsets.only(top: 20.0, right: 10.0),
  18.   color: Colors.orange,
  19.   child: Text('hello flutter'),
  20. ),

image.png
直观的感觉就是margin的留白是在容器外部，而padding的留白是在容器内部，读者需要记住这个差异。事实上，Container内margin和padding都是通过Padding 组件来实现的，上面的示例代码实际上等价于：

  1. Padding(
  2.   padding: EdgeInsets.all(20.0),
  3.   child: DecoratedBox(
  4.     decoration: BoxDecoration(color: Colors.orange),
  5.     child: Text('hello flutter'),
  6.   ),
  7. ),
  8. DecoratedBox(
  9.   decoration: BoxDecoration(color: Colors.red),
  10.   child: Padding(
  11.     padding: EdgeInsets.all(20.0),
  12.     child: Text('hello flutter'),
  13.   ),
  14. ),


decoration

装饰器，可以传递背景图、背景色、边框等。

  1. decoration: BoxDecoration()

BoxDecoration

我们通常会直接使用BoxDecoration类，它是一个Decoration的子类，实现了常用的装饰元素的绘制。

  1. BoxDecoration({
  2.   Color color, //颜色
  3.   DecorationImage image,//图片
  4.   BoxBorder border, //边框
  5.   BorderRadiusGeometry borderRadius, //圆角
  6.   List<BoxShadow> boxShadow, //阴影,可以指定多个
  7.   Gradient gradient, //渐变
  8.   BlendMode backgroundBlendMode, //背景混合模式
  9.   BoxShape shape = BoxShape.rectangle, //形状
  10. })

color 背景色

  1. Container(
  2.   margin: EdgeInsets.all(10.0),
  3.   width: 100.0,
  4.   height: 100.0,
  5.   color: Colors.grey,
  6. );
  8. // 等同于
  9. Container(
  10.   margin: EdgeInsets.all(10.0),
  11.   width: 100.0,
  12.   height: 100.0,
  13.   decoration: BoxDecoration(
  14.     color: Colors.grey,
  15.   ),
  16. );

image 背景图

  1. decoration: BoxDecoration(
  2.   color: Colors.grey,
  3.   image: DecorationImage(
  4.     image: NetworkImage(
  5.       'https://lstatic.zuimeia.com/common/image/2020/11/3/cb418da0-d7a3-4b8c-829f-8cdf23ff1b08_4834_1450.jpeg'),
  6.     fit: BoxFit.contain,
  7.   ),
  8. ),

image.png

gradient 背景渐变

横向渐变
  1. Container(
  2.   margin: EdgeInsets.all(10.0),
  3.   width: 100.0,
  4.   height: 100.0,
  5.   decoration: BoxDecoration(
  6.     gradient: LinearGradient(
  7.       colors: [Colors.red, Colors.green],    //颜色组
  8.       begin: Alignment.topLeft, //起始点坐标  等同于 begin: Alignment(-1, -1)
  9.       end: Alignment.bottomRight, //终止点坐标  等同于 begin: Alignment(1, 1)
  10.       tileMode: TileMode.clamp, //clamp、repeated、mirror
  11.       // end: Alignment(1, 1),
  12.     ),
  13.   ),
  14. );

image.png

径向渐变
  1. Container(
  2.   margin: EdgeInsets.all(10.0),
  3.   width: 100.0,
  4.   height: 100.0,
  5.   decoration: BoxDecoration(
  6.     gradient: RadialGradient(
  7.       colors: [Colors.red, Colors.green], //颜色组
  8.       center: Alignment.topLeft, //圆心坐标位置
  9.       radius: 0.5, //圆半径
  10.       // focalRadius: 0.0, //焦半径
  11.       tileMode: TileMode.clamp, //clamp、repeated、mirror
  12.     ),
  13.   ),
  14. );

tileMode 不同情况图示：
811e496a6c6a4bebece6e6e47f06698.png

_

border 边框

  1. decoration: BoxDecoration(
  2.   // 全边框
  3.   border: Border.all(color: Colors.green, width: 2.0, style: BorderStyle.solid),
  4.   border: Border.fromBorderSide(
  5.       BorderSide(color: Colors.green, width: 2.0, style: BorderStyle.solid)),
  7.   // 单边框
  8.   border: Border(left: BorderSide(color: Colors.green, width: 2.0)),
  10.   // 双边框
  11.   border: Border.symmetric(
  12.     vertical: BorderSide(),
  13.     horizontal: BorderSide(color: Colors.red, width: 4),
  14.   ),
  15. ),

_

borderRadius 圆角

image.png

  1. decoration: BoxDecoration(
  2.   // 全圆角(BorderRadius.all)
  3.   borderRadius: BorderRadius.all(Radius.circular(10.0)),
  4.   borderRadius: BorderRadius.circular(10),
  6.   // 单圆角(BorderRadius.only) topLeft、topRight、bottomLeft、bottomRight
  7.   borderRadius: BorderRadius.only(topLeft: Radius.circular(10.0)),
  9.   //上下圆角(BorderRadius.vertical) top bottom
  10.   borderRadius:
  11.       BorderRadius.vertical(top: Radius.circular(10.0), bottom: Radius.circular(20.0)),
  13.   //左右圆角(BorderRadius.horizontal) left right
  14.   borderRadius:
  15.     BorderRadius.horizontal(left: Radius.circular(10.0), right: Radius.circular(20.0)),
  16. ),

boxShadow 阴影

image.png

  1. decoration: BoxDecoration(
  2.   color: Colors.grey,
  3.   boxShadow: [
  4.     BoxShadow(
  5.       color: Color.fromRGBO(0, 0, 0, 0.2),
  6.       offset: Offset(2.0, 10.0),
  7.       blurRadius: 10.0,
  8.       // spreadRadius: 50.0, //扩散
  9.     ),
  10.   ],
  11. ),

shape 形状

https://www.yuque.com/zhuchaoyang/tnyvrp/hl64eg
image.png

  1. decoration: BoxDecoration(
  2.   color: Colors.grey,
  3.   shape: BoxShape.circle, //circle 圆形；rectangle 矩形
  4. ),

transform 2D变换

transform: Matrix4.rotationZ((45 / 180) * pi) 以左上角为轴，顺时针旋转45度。
详情请参考 transform 一节。