与约束相关的中心小部件行为

问题描述

... 这个小部件将尽可能大，如果它的尺寸是约束和 widthFactor 和 heightFactor 为空。如果一个维度不受约束且相应的大小因子为空，则小部件将匹配该维度中其子项的大小。 ...

虚拟代码：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',home: LoginPage(),);
  }
}

class LoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Container(
          //height: 100,child: Column(
            children: <Widget>[
              Center(
                child: Text('logo'),),],);
  }
}

输出：它只是打印水平居中但不是垂直居中的“徽标”。

这遵循文档，“如果维度不受约束......匹配其子级的大小”。在这种情况下，Column 具有无界的垂直约束，因此 Center 的传入约束也是无界的。因此，Center 匹配 Text 小部件的高度，而不是垂直居中。

虚拟代码（注释未注释）： 我们运行完全相同的代码，但 //height: 100, 被取消注释。

我认为应该发生的事情：由于现在垂直尺寸受到限制，我认为“徽标”将垂直和水平居中。

实际输出：与之前的虚拟代码输出相同。

问题：为什么会发生这种情况？根据文档：“小部件将尽可能大......为空”所以 Center 小部件不应该尽可能大并且垂直和水平地居中孩子。

旁注：如果我删除 Column 小部件，我只会得到水平和垂直居中的预期行为

解决方法

发生这种情况的原因是 Column 的 mainAxis 是高度是无界的，因此使 Center 与其孩子的身高相匹配。尽管您已将 Column 的 height 限制为 100，但其 mainAxis 仍然是无界的。把 Column 想象成一个 ListView，虽然 ListView 的高度是有界的，但它仍然允许它的孩子占据比可用高度更多的空间。

解决方案：

您可以通过将 mainAxisAlignment 设置为 MainAxisAlignment.center 来居中您的文本小部件
使用 Spacer()

例如：

children: [
   Spacer(),Text(),Spacer(),]

dart user-interface widget