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

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

。

是因为这个吗：问题

Answer 1

Row

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

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

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

Answer 2

使用中心小部件

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

Answer 3

确保将小部件 Row 与另一个父小部件（例如 Container 或 SizedBox 或 SizedBox.expand ）包装起来，它们可以定义其大小，并且子小部件 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。

Answer 4

只需用中心包裹您的列即可使横轴对齐中心工作。

 Center(
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      TextField(
        controller: _emailController,
        decoration: const InputDecoration(
          labelText: 'Email',
        ),
      ),
      TextField(
        controller: _passwordController,
        decoration: const InputDecoration(
          labelText: 'Password',
        ),
        obscureText: true,
      ),
    ],
  ),
);

类似地，用 mainAxisAlignment 的 Center 换行：MainAxisAlignment.center 即可工作：

Center(
  child: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      
    ],
  ),
)

截图：