为什么在Flex、Row和Column布局中CrossAxisAlignment不起作用？

Question

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

- Shubhamhackz

Answer 1

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

强制该行在垂直方向上扩展即可解决问题：

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

- Rémi Rousselet

---

那么，如果CrossAxisAligment不能控制交叉轴上的元素，它有什么用呢？ - Shubhamhackz

crossAxisAlignment 控制元素的位置，而不是行的大小。我们需要一个类似于 mainAxisSize 的 crossAxisSize。但是这不存在，因为像 CrossAxisAlignment.stretch 这样的对齐方式会使行填充垂直空间。 - Rémi Rousselet

有道理，我们需要像 crossAxisSize 这样的东西。 - Shubhamhackz

Answer 2

使用居中小部件

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

- shivashankar bhutekar

---

你的回答可以通过添加更多支持性信息来提高质量。请[编辑]以添加更多详细信息，例如引用或文档，以便他人确认你的回答正确。你可以在帮助中心找到有关撰写良好回答的更多信息。 - Community

Answer 3

请务必使用另一个父部件（例如Container、SizedBox或SizedBox.expand）将小部件Row包装起来，以便定义其大小，并可供子部件Row推断其父部件的边界大小。

body: SizedBox(
        height: MediaQuery.of(context).size.height,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [Text(‘Hello World’)],
        ),
      ),

注意：如果您使用的是 SizedBox.expand()，它可能有一个超出屏幕大小或具有无限长度的父部件，则它将无法正常工作。例如，在使用 SingleChildScrollView 时，使用 SizedBox.expand() 将无法解决上述问题。在这种情况下，您需要使用 SizedBox/Container 并为 Column/Row 分别手动定义 width/height。

- Bikash Kalita