了解Flutter中的Container组件

了解Flutter中的Container组件

基本属性

• alignment,[AlignmentGeometry]：在容器中对齐[子view]。
• padding,[EdgeInsetsGeometry]：[装饰]内部的空白空间。这个[孩子]，如果有的话，就是

放置在这个填充内。

• color,[Color]：在[孩子]后面画的颜色。也就是背景色。
• decoration,[Decoration]：画在[孩子]后面的装饰。
• foregroundDecoration,[Decoration]：在[孩子]面前画的装饰。
• width,[double]：宽度
• height,[double]：高度
• constraints,[BoxConstraints]：应用于子对象的附加约束。
• margin,[EdgeInsetsGeometry]：围绕[装饰]和[孩子]的空空间。就是边距。
• transform,[Matrix4]：如果指定了[transform]，则相对于容器的大小，对原点进行对齐。
• transformAlignment,[AlignmentGeometry]：(变换。对齐]，由此属性设置。
• child,[Widget]：孩子
• clipBehavior,[Clip]：[Container.decoration]不为空时的剪辑行为。

粗略看Container源码

@override
  Widget build(BuildContext context) {
    Widget? current = child;

    if (child == null && (constraints == null || !constraints!.isTight)) {
      current = LimitedBox(
        maxWidth: 0.0,
        maxHeight: 0.0,
        child: ConstrainedBox(constraints: const BoxConstraints.expand()),
      );
    }

    if (alignment != null)
      current = Align(alignment: alignment!, child: current);

    final EdgeInsetsGeometry? effectivePadding = _paddingIncludingDecoration;
    if (effectivePadding != null)
      current = Padding(padding: effectivePadding, child: current);

    if (color != null)
      current = ColoredBox(color: color!, child: current);

    if (clipBehavior != Clip.none) {
      assert(decoration != null);
      current = ClipPath(
        clipper: _DecorationClipper(
          textDirection: Directionality.maybeOf(context),
          decoration: decoration!,
        ),
        clipBehavior: clipBehavior,
        child: current,
      );
    }

    if (decoration != null)
      current = DecoratedBox(decoration: decoration!, child: current);

    if (foregroundDecoration != null) {
      current = DecoratedBox(
        decoration: foregroundDecoration!,
        position: DecorationPosition.foreground,
        child: current,
      );
    }

    if (constraints != null)
      current = ConstrainedBox(constraints: constraints!, child: current);

    if (margin != null)
      current = Padding(padding: margin!, child: current);

    if (transform != null)
      current = Transform(transform: transform!, alignment: transformAlignment, child: current);

    return current!;
  }

比如alignment不为空，则将孩子添加到Align组件，比如padding和margin都会使用到Padding组件...

在开发过程中，可以看到万物皆Widget，后续有时间将详细读源码。