Flutter如何让AppBar标题始终居中？返回箭头致偏移问题

当用Navigator.push跳转页面后，AppBar自动生成的返回箭头会挤压标题空间，导致原本想居中的标题偏移。这里给你两种实用的解决方法：

方法一：直接启用centerTitle属性 #

这是最简单的方式，Flutter的AppBar本身提供了centerTitle参数，设置为true后，不管有没有leading（返回箭头或自定义图标），标题都会自动居中。

修改原页面的AppBar代码：

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      leading: IconButton(
        icon: Icon(Icons.account_circle_rounded),
        onPressed: () {},
      ),
      centerTitle: true, // 开启标题居中
      title: Text('Some text'),
    ),
    body: Container(...),
  );
}

跳转后的OrderWidget页面，同样给AppBar加上centerTitle: true：

// OrderWidget的build方法内
AppBar(
  centerTitle: true,
  title: Text('订单页面'),
)

方法二：自定义标题布局（适合复杂标题） #

如果你的标题需要嵌套多个Widget（比如图标+文字），可以用Center包裹标题，并设置titleSpacing: 0让标题区域占据整个AppBar宽度，不受leading影响。

示例代码：

AppBar(
  leading: IconButton(
    icon: Icon(Icons.account_circle_rounded),
    onPressed: () {},
  ),
  titleSpacing: 0, // 取消默认标题间距
  title: Center(
    child: Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Icon(Icons.shopping_cart),
        SizedBox(width: 8),
        Text('购物车'),
      ],
    ),
  ),
)

对于自动生成返回箭头的页面，也可以手动指定leading和leadingWidth，确保布局一致：

AppBar(
  leading: BackButton(), // 手动添加返回按钮
  leadingWidth: 56, // 固定leading宽度，和默认保持一致
  titleSpacing: 0,
  title: Center(
    child: Text('订单页面'),
  ),
)

内容的提问来源于stack exchange，提问作者Happy