Flutter 如何在Row与Column中对齐元素实现自定义AppBar

解决方案 #

你当前的代码问题在于没有给标题分配独立的居中展示区域，Row默认按子元素的实际宽度依次排布，自然无法实现标题居中的效果。直接使用下方的代码即可实现左侧返回键、中间标题居中的自定义AppBar布局：

Row(
  mainAxisAlignment: MainAxisAlignment.start,
  children: [
    // 左侧返回按钮
    InkWell(
      onTap: () => Navigator.pop(context),
      child: const Icon(Icons.arrow_back),
    ),
    // Expanded会自动填充Row除左右组件外的所有剩余空间
    Expanded(
      child: Text(
        "text",
        textAlign: TextAlign.center,
      ),
    ),
    // 等宽占位，抵消左侧返回按钮的宽度，保证标题绝对居中
    const SizedBox(width: 24,)
  ],
)

如果后续需要在AppBar右侧添加操作按钮，直接替换末尾的占位SizedBox即可，不会影响标题的居中效果。

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