Flutter：SizedBox与Container，为什么要用一个而不是另一个？

Question

当我开始考虑这两个组成部分时，我发现自己在争论为什么我应该一个而不是另一个。我想到了一些问题：

1. Container和SizedBox有什么区别？

2. 我知道Container可以具有其他参数，例如padding或装饰，但是如果我不使用这些参数，为什么我应该使用SizedBox而不是Container？

3. 它们之间有性能差异吗？

Answer 1

我想补充一点SizedBox，它不仅更简单，而且还可以制作const，而Container不能。这可能是您需要的，也可能不是。

如果您需要一个带颜色的盒子，则不能使用SizedBox. 但是https://pub.dev/packages/assorted_layout_widgets有Box小部件，它介于 aSizedBox和 a之间Container：您可以拥有颜色，也可以制作const。注意我是这个包的作者。

Answer 2

多亏了开源的魔力，您不必猜测太多。

Container基本上只是一个便利小部件，有时会使您节省嵌套其他4个小部件的时间。如果您将宽度/高度传递给Container：

       constraints =
        (width != null || height != null)
          ? constraints?.tighten(width: width, height: height)
            ?? BoxConstraints.tightFor(width: width, height: height)
          : constraints,

这将导致：

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

实际上，ConstrainedBox与a几乎相同SizedBox，只是更加灵活。

A SizedBox将做：

  @override
  RenderConstrainedBox createRenderObject(BuildContext context) {
    return RenderConstrainedBox(
      additionalConstraints: _additionalConstraints,
    );
  }

  BoxConstraints get _additionalConstraints {
    return BoxConstraints.tightFor(width: width, height: height);
  }

即。实际上是相同的。如果仅Container用于宽度/高度，那么性能开销可能会很小，可以忽略不计。但您肯定会无法测量。.但我仍然建议您这样做，SizedBox因为它更清晰。恕我直言。

Answer 3

SizedBox()是一个用于在两个小部件之间提供恒定高度或宽度的小部件。它不包含任何装饰属性，如颜色、边框半径等。

另一方面，Container()是一个任何人都可以根据他/她的需要进行修改的小部件。

只要浏览一下这两个小部件的属性，您就会发现它们之间存在巨大差异。