为什么 CrossAxisAligment 在 Flex、Row 和 Column 中不起作用？答案

【问题标题】：Why CrossAxisAligment not Working in Flex,Row and Column?为什么 CrossAxisAligment 在 Flex、Row 和 Column 中不起作用？
【发布时间】：2019-06-02 01:49:05
【问题描述】：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Flutter Demo'
        ),
      ),
      body: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Text(
            'Hell World!'
          )
        ],
      )
    );
  }
}

为什么文本 Hell World 仅水平居中而不是垂直居中，因为我还指定了 CrossAxisAligment。

是不是因为这个：Issue

【问题讨论】：

标签： dart flutter flutter-layout

【解决方案1】：

Row 默认情况下不会占用所有可用的垂直空间。它只占用所需的空间（但它占用了所有水平空间）。

强制行垂直扩展应该可以解决问题：

body: SizedBox.expand(
  child: Row(...),
),

【讨论】：

那CrossAxisAligment好像不能跨轴控制东西有什么用？
crossAxisAlignment 控制元素的位置，而不是行的大小。我们需要crossAxisSize，类似于mainAxisSize。但这并不存在，因为诸如CrossAxisAlignment.stretch 之类的对齐方式会使行填充垂直空间。
这很有道理..我们需要类似crossAxisSize

【解决方案2】：

使用中心小部件

Center(child: Row(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Text('Hell World!')],))

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。