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是整个装饰为圆形

Flutter Container解析_第1张图片 BoxShape.rectangle
Flutter Container解析_第2张图片 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是组件内容边缘的切割方式,分为四种:

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

你可能感兴趣的:(flutter)