Flutter如何实现center居中布局

在Flutter中，我想让一个Widget在父容器中居中显示，尝试了Align和Padding都没达到理想效果。请问具体应该如何使用Center组件实现水平垂直居中？需要注意哪些属性设置？如果父容器尺寸不确定又该如何处理？

2 回复

在Flutter中，使用Center组件包裹子组件即可实现居中布局。例如：

Center(
  child: Text('居中文本'),
)

Center默认水平和垂直居中，也可通过alignment属性自定义对齐方式。

更多关于Flutter如何实现center居中布局的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，实现居中布局最常用的方式是使用Center组件。

基本用法

Center(
  child: Text('居中的文本'),
)

常用场景示例

1. 文本居中

Center(
  child: Text(
    'Hello Flutter',
    style: TextStyle(fontSize: 20),
  ),
)

2. 图片居中

Center(
  child: Image.asset('assets/image.png'),
)

3. 按钮居中

Center(
  child: ElevatedButton(
    onPressed: () {},
    child: Text('居中按钮'),
  ),
)

其他居中方式

使用Align组件

Align(
  alignment: Alignment.center,
  child: Text('使用Align居中'),
)

在Row/Column中使用

Row(
  mainAxisAlignment: MainAxisAlignment.center, // 水平居中
  children: [
    Text('水平居中'),
  ],
)

Column(
  mainAxisAlignment: MainAxisAlignment.center, // 垂直居中
  children: [
    Text('垂直居中'),
  ],
)

Center组件实际上就是Align(alignment: Alignment.center)的简写形式，是最简单直接的居中解决方案。

回到顶部