新建项目-2.png

Container 是一个拥有绘制、定位、调整大小的 Widget.

Container


  1. Container({
  2.     Key key,
  3.     this.alignment,            //容器内 child 的对齐方式   （9个位置）      
  4.     this.padding,              //容器内边距
  5.     Color color, 
  6.     Decoration decoration,     //容器的背景装饰
  7.     this.foregroundDecoration, //容器的前景装饰
  8.     double width,
  9.     double height,
  10.     BoxConstraints constraints,//容器的大小限制
  11.     this.margin,               //容器外边距
  12.     this.transform,            //容器的变化
  13.     this.child,                //容器里显示的 Widget
  14.   })

1. 绘制过程

Container的绘制的过程如下：

  • 首先会绘制transform效果；
  • 接着绘制decoration；
  • 然后绘制child；
  • 最后绘制foregroundDecoration。

    2. alignment 对齐方式. 9个方位对齐方式.

3. padding、margin 内容边距

padding: 内边距
margin: 外边距

4. decoration 容器的背景装饰

  1. const BoxDecoration({
  2.     this.color,            //颜色
  3.     this.image,            //图片
  4.     this.border,           //边框 
  5.     this.borderRadius,     //边框圆角
  6.     this.boxShadow,        //阴影
  7.     this.gradient,         //渐变,如果指定了渐变色，color属性就无效
  8.     this.backgroundBlendMode, //混合模式应用于框的[颜色]或[渐变]背景,如果没有颜色或者渐变色，这个属性就没有效果
  9.     this.shape = BoxShape.rectangle, // 这个有两个值，一个是方形，一个是圆形（circle），
  10.         BoxShape.rectangle和RoundedRectangleBorder是一样的，CircleBorder和BoxShape.circle是一样的效果
  11.         但是Container的shape只能用BoxShape.rectangle、BoxShape.circle是这两种，
  12.         而RoundedRectangleBorder、CircleBorder目前是用在Material上的，
  13.         因为Container的shape是继承自 BoxBorder的，而Material的shape是继承自ShapeBorder，
  14.         虽然BoxBorder也是继承ShapeBorder的
  15.   })
  1.  body: Container(
  2.   alignment: Alignment.center,
  3.   color: Colors.white,
  4.   child: Column(
  5.     children: <Widget>[
  7.       Container(
  8.         //对齐方式
  9.         alignment: Alignment.center,
  10.         //容器内间距
  11.         margin: EdgeInsets.only(top: 20 , left:  20),
  12.         //卡片大小
  13.         constraints: BoxConstraints.tightFor(width: 200, height: 150),
  14.         //背景装饰
  15.         decoration: BoxDecoration(
  16.           gradient: RadialGradient(
  17.             //这里设置渐变设外面就不能设置背景色,不然会报错误
  18.             colors: [Colors.green, Colors.blue],
  19.               center: Alignment.topLeft,
  20.               radius: .98
  21.           ),
  22.           //加阴影
  23.           boxShadow: [
  24.             BoxShadow(
  25.               color: Colors.black54,
  26.               offset: Offset(2.0, 2.0),
  27.               blurRadius: 4.0
  28.             )
  29.           ]
  30.         ),
  31.         transform: Matrix4.rotationZ(.2), //卡片倾斜变换
  32.         child: Text(
  33.           "Hello Flutter",
  34.           style: TextStyle(
  35.               fontSize: 30,
  36.               color: Colors.red
  37.           ),
  38.         ),
  39.       ),
  41.     ],
  42.   ),
  43. ),

image.png

5. borderRadius 边框半径

  1. new BorderRadius.all(Radius.circular(4)) // 四个圆角都是半径为4
  2. new BorderRadius.circular(4), // 四个圆角都是半径为4,和上面的效果是一样的
  3. new BorderRadius.horizontal( left: Radius.circular(10)), //左边的两个角的半径为10 
  4. new BorderRadius.horizontal(left: Radius.circular(10), right: Radius.circular(4)),//左边的两个角半径为10，右侧两个角半径为4
  5. new BorderRadius.vertical( top: Radius.circular(6)), //上边两个角半径为6
  6. new BorderRadius.only(
  7.                       topLeft: Radius.circular(10),
  8.                       topRight: Radius.circular(4),
  9.                       bottomLeft: Radius.circular(6),
  10.                       bottomRight: Radius.circular(20)
  11.                      ), //坐上角半径为10，右上角4，左下角为6，右下角为20