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

这种情况发生在父对象和它的子对象需要两个不同的大小时;但是父对象不知道应该如何在其边界内对齐子对象。

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

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

因此,虽然它可以这样居中:

期望采用以下对齐方式也是完全合理的:

不要对齐红色框,并强制它占用所有可用空间;这会导致:

要解决这个问题,解决方案是显式地告诉Flutter如何在其父边界内对齐子对象。

最常见的解决方案是将孩子包装成 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 也将提供 alignment 属性来实现类似的行为。