Flutter Container解析

Container是在实际开发中经常用到的小部件，Container里组合了各种小部件，让我们开发更加便捷，来看一下的Container都有哪些属性.

  Container({
    Key? key,
    this.alignment,
    this.padding,
    this.color,
    this.decoration,
    this.foregroundDecoration,
    double? width,
    double? height,
    BoxConstraints? constraints,
    this.margin,
    this.transform,
    this.transformAlignment,
    this.child,
    this.clipBehavior = Clip.none,
  })

key

key是用来作为Widget的标识，仅仅用来更新widget->key相同的小部件的状态。更跟树时候系统会比较key值来判断是否更新

alignment

它的类型是AlignmentGeometry，AlignmentGeometry是一个抽象类，一般使用Alignment来设置子视图的位置

 /// The top left corner.
  static const Alignment topLeft = Alignment(-1.0, -1.0);
 
  /// The center point along the top edge.
  static const Alignment topCenter = Alignment(0.0, -1.0);
 
  /// The top right corner.
  static const Alignment topRight = Alignment(1.0, -1.0);
 
  /// The center point along the left edge.
  static const Alignment centerLeft = Alignment(-1.0, 0.0);
 
  /// The center point, both horizontally and vertically.
  static const Alignment center = Alignment(0.0, 0.0);
 
  /// The center point along the right edge.
  static const Alignment centerRight = Alignment(1.0, 0.0);
 
  /// The bottom left corner.
  static const Alignment bottomLeft = Alignment(-1.0, 1.0);
 
  /// The center point along the bottom edge.
  static const Alignment bottomCenter = Alignment(0.0, 1.0);
 
  /// The bottom right corner.
  static const Alignment bottomRight = Alignment(1.0, 1.0);

padding

它的类型是EdgeInsetsGeometry，一般使用EdgeInsets来设置子视图内边距

列如：

padding:const EdgeInsets.all(8.0)
padding:const EdgeInsets.only(left: 40.0)

还可以设置水平方向的

const EdgeInsets.symmetric(vertical: 8.0)
const EdgeInsets.symmetric(horizontal: 8.0)

color

它的类型是Color,一般使用color来设置在 [child] 后面绘制的颜色。这里需要注意的是，当背景是简单的颜色时，应该首选该属性。对于其他情况，例如渐变或图像，请使用 [decoration] 属性。如果使用了[decoration]，则该属性必须为null。 [decoration] 仍然可以绘制背景颜色，即使此属性是null

decoration

它的类型是Decoration，Decoration这是个抽象类不能直接使用，通常使用BoxDecoration，来看一下BoxDecoration的构造函数

 const BoxDecoration({
    this.color,
    this.image,
    this.border,
    this.borderRadius,
    this.boxShadow,
    this.gradient,
    this.backgroundBlendMode,
    this.shape = BoxShape.rectangle,
  })

color颜色，image背景图片，border边框，borderRadius边框圆角，boxShadow盒子阴影，gradient渐变色，backgroundBlendModel应用于框的[颜色]或[渐变]背景的混合模式。shape剪裁方式，这里说一下shape，它的类型是BoxShape,shape即为装饰的形状，默认为BoxShape.rectangle，也可以选择BoxShape.circle。BoxShape.circle是整个装饰为圆形

BoxShape.rectangle

BoxShape.circle

foregroundDecoration

它的类型也是Decoration,foregroundDecoration是前景装饰，通常使用BoxDecoration

constraints

它的类型是BoxConstraints,constraints可以指定Container的最大宽高和最小宽高，否则有时超出某些范围页面显示错乱异常。

BoxConstraints({
    this.minWidth = 0.0,
    this.maxWidth = double.infinity,
    this.minHeight = 0.0,
    this.maxHeight = double.infinity,
  })

margin 

它的类型是EdgeInsetsGeometry，一般使用EdgeInsets，表示外边距表示自身对父视图的偏移。

transform

它的类型是Matrix4，Matrix4是在绘制容器之前应用的变换矩阵。基本上所有的变换都是在Matrix4(…)基础上实现的

transformAlignment

它的类型是AlignmentGeometry，变换锚点或者是变换重力方向和上文中的alignment是一样的

child

Container的子视图

clipBehavior

它的类型是Clip,clipBehavior是组件内容边缘的切割方式，分为四种：

1. • none (不做处理)
   • hardEdge （当内容溢出时，hardEdge切割容器边缘最快，但是精准度欠佳，可能会有一些锯齿存在。）
   • antiAlias （抗锯齿，速度要比hardEdge慢一些，但是边缘要平滑一些。）
   • antiAliasWithSaveLayer （图层抗锯齿，就是容器中每一个图层都做抗锯齿处理，而antiAlias是在容器的轮廓做抗锯齿，antiAliasWithSaveLayer效果肯定会更好更平滑，但是速度最慢，如果没有明确指明，建议使用antiAlias，这样效果和性能能够达到较好的平衡。）