如何在Flutter的AppBar中居中Column组件？

当二级页面AppBar存在leading图标时，即使设置centerTitle: true，嵌套Row的Column仍无法在AppBar整体水平居中——原因是AppBar的title区域会被leading挤压，默认仅在剩余空间内居中，而非整个AppBar宽度。以下是两种可行解决方案：

方案一：通过SizedBox占满宽度实现全局居中 #

让title组件占满AppBar整个水平宽度，再用Center包裹Column，确保其在完整宽度内居中：

return Scaffold(
  appBar: AppBar(
    centerTitle: true,
    leading: const BackButton(), // 保留默认leading返回键
    title: SizedBox(
      width: double.infinity,
      child: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Padding(
              padding: const EdgeInsets.only(top: 8.0),
              child: Text(widget.id),
            ),
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 8.0),
              child: Text(
                _caption,
                style: const TextStyle(fontSize: 14),
              ),
            ),
          ],
        ),
      ),
    ),
  ),
);

方案二：调整titleSpacing消除间距 #

修改titleSpacing让title区域延伸至leading旁的空间，配合Center实现居中：

return Scaffold(
  appBar: AppBar(
    centerTitle: true,
    titleSpacing: -NavigationToolbar.kMiddleSpacing, // 抵消title与leading的默认间距，也可直接写-16
    title: Center(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Padding(
            padding: const EdgeInsets.only(top: 8.0),
            child: Text(widget.id),
          ),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 8.0),
            child: Text(
              _caption,
              style: const TextStyle(fontSize: 14),
            ),
          ],
        ),
      ),
    ),
  ),
);

说明 #

• 方案一逻辑直观，兼容性强，适合多数场景；
• 方案二通过调整系统默认间距实现，适合需要保留leading且希望消除额外间距的场景。

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