文章目录
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 语法学习
三元表达式 ?:
??