Flutter Column 中使用 Center 居中效果的实现

4 min read

在 Flutter Column 中使用 Center 进行居中可以通过两种方式实现：

  1. 在 Column 中使用 Center 组件

在 Column 中添加一个 Center 组件，然后将需要居中的子组件放在 Center 中即可实现居中效果。

示例代码：

Column(
  children: [
    Center(
      child: Text("居中文本"),
    )
  ],
)
  1. 在子组件中使用 MainAxisAlignment 和 CrossAxisAlignment 属性

在子组件中使用 MainAxisAlignment 和 CrossAxisAlignment 属性可以指定子组件在 Column 中的对齐方式，从而实现居中效果。

示例代码：

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Text("居中文本"),
  ],
)