Dart 忽略小部件的自定义宽度/高度属性

有时我想强制小部件采用特定的大小，这通常是通过使用

SizedBox

/

ConstrainedBox

/

容器来实现的

但我已经意识到，在某些情况下，小部件只是忽略它，并采用不同的大小。为什么呢

例如：

预期行为：


实际行为：

当父母及其子女想要两种不同尺寸时，就会出现这种情况；但家长不知道如何在自己的边界内对齐自己的孩子

以下代码没有提供足够的信息来说明如何在蓝色框中对齐红色框：

Container(
  color: Colors.blue,
  width: 42,
  height: 42,
  child: Container(
    color: Colors.red,
    width: 24,
    height: 24,
  ),
),

因此，尽管它可以以这样的方式居中：


也完全有理由期望以下对齐方式：



在这种情况下，由于颤振不知道如何对齐红色框，因此将采用更简单的解决方案：

不要对齐红色框，并强制它占据所有可用空间；这导致：



要解决此问题，解决方案是显式告诉颤振如何在其父边界内对齐子对象

最常见的解决方案是将子项包装到
Align
小部件中：

Container(
  color: Colors.blue,
  width: 42,
  height: 42,
  child: Align(
    alignment: Alignment.center,
    child: Container(
      color: Colors.red,
      width: 24,
      height: 24,
    ),
  ),
),

一些小部件，如
Container
或
Stack
也将提供
对齐
属性以实现类似的行为
 这是一个特色。这允许一些相当大的优化，使事情可定制，不涉及“黑暗魔法”，没有任何讽刺！这是我真正喜欢的一个方面。一旦您了解了布局的工作原理，它就会使布局变得非常可预测。我已经回答了几十个关于布局的问题，根本没有运行任何代码。这对于任何其他技术来说都是不可能的，但是，颤振应该发出警告，至少如果颤振选择了某个不明显的东西来扩展比最初由开发人员代码设置的更大的东西，它可以说是“没有足够的约束”等等！。你救了我一个小头疼当然这应该在颤振文档中？