Flutter中AppBar标题无法居中问题求助（附代码）

你遇到的问题根源在于：AppBar的title区域默认是夹在leading和actions之间的空间，使用Center组件只能让标题在这个中间区域内居中，而非整个AppBar的宽度范围。加上你设置了固定宽度的leading占位，进一步压缩了中间区域，导致视觉上标题偏右。

下面是几种直接可行的解决方法：

方法1：调整titleSpacing并让title占满宽度 #

通过设置titleSpacing: 0消除leading、title、actions之间的默认间距，再让title组件占满整个AppBar宽度，此时Center就能让标题在全屏范围内居中：

appBar: AppBar(
  automaticallyImplyLeading: false,
  titleSpacing: 0, // 关键：移除默认间距
  title: Container(
    width: double.infinity,
    child: Center(
      child: Text(
        _appBarTitle,
        style: const TextStyle(color: Colors.white),
      ),
    ),
  ),
  backgroundColor: AppColors.appbarColor,
  scrolledUnderElevation: 0,
  leading: const SizedBox(width: 70),
  actions: [
    IconButton(
      onPressed: () {
        setState(() {
          _isSearchVisible = !_isSearchVisible;
        });
      },
      icon: const Icon(Icons.search, size: 30, color: Colors.white),
    ),
    IconButton(
      onPressed: () {
        Navigator.of(context).push(MaterialPageRoute(builder: (context) => const CartScreen()));
      },
      icon: const Icon(Icons.shopping_cart, size: 30, color: Colors.white),
    ),
  ],
),

方法2：移除leading，在title内添加左侧占位 #

放弃使用AppBar的leading属性，转而在title的布局中添加左侧占位，这样title区域会占据整个AppBar宽度，Center就能实现真正的居中：

appBar: AppBar(
  automaticallyImplyLeading: false,
  title: Stack(
    children: [
      const Positioned(left: 0, child: SizedBox(width: 70)), // 左侧占位
      Center(
        child: Text(
          _appBarTitle,
          style: const TextStyle(color: Colors.white),
        ),
      ),
    ],
  ),
  backgroundColor: AppColors.appbarColor,
  scrolledUnderElevation: 0,
  actions: [
    IconButton(
      onPressed: () {
        setState(() {
          _isSearchVisible = !_isSearchVisible;
        });
      },
      icon: const Icon(Icons.search, size: 30, color: Colors.white),
    ),
    IconButton(
      onPressed: () {
        Navigator.of(context).push(MaterialPageRoute(builder: (context) => const CartScreen()));
      },
      icon: const Icon(Icons.shopping_cart, size: 30, color: Colors.white),
    ),
  ],
),

方法3：自定义PreferredSizeWidget #

如果需要更灵活的布局控制，可以直接自定义一个AppBar，完全掌控所有元素的位置：

appBar: PreferredSize(
  preferredSize: const Size.fromHeight(kToolbarHeight),
  child: Container(
    color: AppColors.appbarColor,
    child: Row(
      children: [
        const SizedBox(width: 70), // 左侧占位
        const Expanded(
          child: Center(
            child: Text(
              _appBarTitle,
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
        Row(
          children: [
            IconButton(
              onPressed: () {
                setState(() {
                  _isSearchVisible = !_isSearchVisible;
                });
              },
              icon: const Icon(Icons.search, size: 30, color: Colors.white),
            ),
            IconButton(
              onPressed: () {
                Navigator.of(context).push(MaterialPageRoute(builder: (context) => const CartScreen()));
              },
              icon: const Icon(Icons.shopping_cart, size: 30, color: Colors.white),
            ),
          ],
        ),
      ],
    ),
  ),
),

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