简单效果实现
在页面中垂直水平居中
使用Center
Widget
Center
widget可以使其子widget在父widget中居中显示。这是实现居中最简单的方法:
使用Column
和MainAxisAlignment
当你有多个widget需要垂直居中时,可以使用Column
结合MainAxisAlignment.center
:
使用Row
和CrossAxisAlignment
对于需要水平居中的情况,可以使用Row
结合CrossAxisAlignment.center
:
结合Container
使用
如果你想要更多的控制,比如设置页面的大小或背景色,可以将Center
、Column
或Row
放在Container
中:
使用Align
Widget
Align
widget也可以实现居中效果,通过设置其alignment
属性:
使用Scaffold
和Center
在实际应用中,页面通常包含在Scaffold
中,你可以这样来居中内容:
布局技巧
column中让子元素撑满
可以使用Spacer填充,实现flex:1 的效果