Flutter中ExpansionTile组件title无法居中的问题及解决方案咨询

无法居中的根本原因 #

ExpansionTile 内部默认采用三栏布局逻辑，leading、title、trailing三个区域的宽度是独立分配的：

• 即使未显式设置leading属性，组件内部仍会为leading区域预留默认宽度占位
• 仅设置trailing: SizedBox()只能消除右侧trailing的占位，左侧leading的预留空间仍然存在
• 你给title包裹的Center组件仅能在title自身的受限宽度范围内居中，无法覆盖左侧预留的leading空白，因此视觉上始终偏右，无法实现全宽度居中。

解决方案 #

方案1：参数适配（无侵入，推荐） #

同时消除左右两侧的占位空间，撑开title的宽度即可，修改ExpansionTile配置如下：

ExpansionTile(
  // 同时消除左右两侧的默认占位
  leading: const SizedBox.shrink(),
  trailing: const SizedBox.shrink(),
  tilePadding: EdgeInsets.zero,
  // 让title占满整行宽度后再做文本居中
  title: SizedBox(
    width: double.infinity,
    child: Text(
      "MENU",
      textAlign: TextAlign.center,
      style: GoogleFonts.lato(color: Colors.white),
    ),
  ),
  // 其余原有配置保持不变
  childrenPadding: EdgeInsets.zero,
  backgroundColor: Colors.black,
  collapsedBackgroundColor: Colors.black,
  expandedAlignment: Alignment.center,
  expandedCrossAxisAlignment: CrossAxisAlignment.center,
  children: [
    MenuItemLS(text: "WORK", onPress: () => print("Work")),
    MenuItemLS(text: "ABOUT", onPress: () => print("About Nav")),
    MenuItemLS(text: "CONTACT", onPress: () => print("Contact Nav")),
  ],
)

方案2：偏移适配（兼容低版本Flutter） #

如果使用的Flutter版本较低，无法通过上述参数实现效果，可以手动偏移title抵消左侧预留宽度：

ExpansionTile(
  trailing: const SizedBox(),
  tilePadding: EdgeInsets.zero,
  title: Transform.translate(
    // 16为ExpansionTile默认的leading预留宽度，可根据实际显示效果微调
    offset: const Offset(-16, 0),
    child: Center(
      child: Text(
        "MENU",
        style: GoogleFonts.lato(color: Colors.white),
      ),
    ),
  ),
  // 其余配置保持不变
)

内容的提问来源于stack exchange，提问作者Md. Yeasin Sheikh