flutter-Container

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 语法学习

三元表达式 ?:
??

发布了96 篇原创文章 · 获赞 12 · 访问量 15万+

猜你喜欢

转载自blog.csdn.net/yujunlong3919/article/details/98236955