跳到主要内容

简单效果实现

在页面中垂直水平居中

使用Center Widget

Center widget可以使其子widget在父widget中居中显示。这是实现居中最简单的方法:

使用ColumnMainAxisAlignment

当你有多个widget需要垂直居中时,可以使用Column结合MainAxisAlignment.center

使用RowCrossAxisAlignment

对于需要水平居中的情况,可以使用Row结合CrossAxisAlignment.center

结合Container使用

如果你想要更多的控制,比如设置页面的大小或背景色,可以将CenterColumnRow放在Container中:

使用Align Widget

Align widget也可以实现居中效果,通过设置其alignment属性:

使用ScaffoldCenter

在实际应用中,页面通常包含在Scaffold中,你可以这样来居中内容: