flutter-Container

文章目录

      • Container
        • constraints:添加到child上额外的约束条件 最大最小值
        • alignment:控制child的对齐方式,
        • padding:文本区域和widget之间
        • margin :widget和widget之间
        • decoration
        • foregroundDecoration 前景色 DecoratedBox 底部颜色即背景色,中间内容,顶部颜色即前景色 会遮挡中间内容
        • width height 最后要作用到BoxConstraints,由BoxConstraints限制范围
        • dart 语法学习

Container

是有多个widget组成的(LimitedBox->ConstrainedBox->Align->Padding->DecoratedBox->ConstrainedBox->Padding->Transform)

constraints:添加到child上额外的约束条件 最大最小值
current = ConstrainedBox(constraints: constraints, child: 
current);
alignment:控制child的对齐方式,
current = Align(alignment: alignment, child: current);
padding:文本区域和widget之间
current = Padding(padding: effectivePadding, child: current);
margin :widget和widget之间
   current = Padding(padding: margin, child: current);
decoration

decoration: 背景装饰 类似android中的shape 边框 圆角,背景色,背景图片等

current = DecoratedBox(decoration: decoration, child: current);
 const BoxDecoration({
    this.color,
    this.image,
    this.border,
    this.borderRadius,
    this.boxShadow,
    this.gradient,
    this.backgroundBlendMode,
    this.shape = BoxShape.rectangle,
  }) : assert(shape != null),
       assert(
         backgroundBlendMode == null || color != null || gradient != null,
         'backgroundBlendMode applies to BoxDecoration\'s background color or '
         'gradient, but no color or gradient was provided.'
       );

color:背景色,最后也会设置到decoration这个widget上面 所以不可同时设置color和decoration

//断言不能同时存在
assert(color == null || decoration == null)
//用color生成BoxDecoration
decoration = decoration ?? (color != null ? BoxDecoration(color: color) : null),
foregroundDecoration 前景色 DecoratedBox 底部颜色即背景色,中间内容,顶部颜色即前景色 会遮挡中间内容
current = DecoratedBox(  decoration: foregroundDecoration,  position: DecorationPosition.foreground,  child: current,);

width height 最后要作用到BoxConstraints,由BoxConstraints限制范围
 constraints =
        (width != null || height != null)
          ? constraints?.tighten(width: width, height: height)
            ?? BoxConstraints.tightFor(width: width, height: height)
          : constraints,
dart 语法学习

三元表达式 ?:
??

你可能感兴趣的:(flutter)