Flutter：SizedBox Vs Container，为啥使用一个而不是另一个？

Posted 2023-02-23

【中文标题】Flutter：SizedBox Vs Container，为啥使用一个而不是另一个？

【英文标题】：Flutter: SizedBox Vs Container, why use one instead of the other?Flutter：SizedBox Vs Container，为什么使用一个而不是另一个？

【发布时间】：2019-09-07 00:54:10

【问题描述】：

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

Container 和 SizedBox 有什么区别？

我知道 Container 可以有其他参数，例如 padding 或 decoration，但如果我不使用这些参数，为什么要使用 SizedBox 而不是 Container？

它们之间有性能差异吗？

【参考方案1】：

小更新：When used for whitespace, there is now even a linter warning to prefer SizedBox instead of Container。主要优势似乎是 SizedBox 可以是 const 并且在运行时甚至不会创建新实例。

---

得益于开源的魔力，您不必猜测太多。

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 实际上与SizedBox 几乎相同，只是更灵活。

SizedBox 可以：

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

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

即。它实际上是相同的。如果您只使用Container 作为宽度/高度，则可能会产生非常小的性能开销，可以忽略不计。但你肯定无法测量它。但我仍然推荐SizedBox，因为它更清晰。恕我直言。

【讨论】：

所以关于这个问题（链接），我想知道哪个更适合两者之间的空占位符，它们不需要任何参数？ ***.com/q/57703182/5060513

恕我直言，别担心，使用适合情况的任何东西。空容器几乎不可能成为性能问题。所以使用任何更自然的东西。当我只想隐藏某些东西时，我个人使用 Container()用于加载（这基本上只在我懒于加载指标等的原型制作时发生）。如果我想要特定尺寸，我使用SizedBox。最近我什至一直在使用SizedBox 代替填充来分隔Column 或Row 中的项目.. ymmv

【参考方案2】：

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

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

【讨论】：

您能解释一下const 在您的构建函数中的好处吗？或者指出任何解释它的好处的资源？谢谢。

当然：Const 对象是最终的/不可变的，并且在编译时创建。因此，您不会浪费时间创建它们。此外，所有具有相同参数的相同类型的 const 对象都是相同的实例。因此，您不会浪费内存创建多个它们。换句话说，const 对象使您的程序更快，内存效率更高。

哇，感谢您花时间解释这一点！我现在将更频繁地在我的小部件树中使用const。

另外，我昨天才读到，flutter 知道一个元素是否为 const，因此可以在重建时跳过它。

CONST 绝对不会提高速度。我对此进行了广泛的测试。不确定它是否可以节省内存。