Flutter Drawer中ListTile的leading图标与标题文本对齐异常如何解决

问题根因 #

你遇到的对齐偏差和默认底部对齐无关，核心诱因有两点：

• horizontalTitleGap仅控制leading组件和title组件的横向间距，不影响垂直方向对齐规则，因此设置为0无法解决高低差问题
• ListTile默认垂直对齐规则为对齐文本基线，当你使用headlineMedium这类大字号标题、搭配尺寸/绘制基线和Material规范默认Icon有差异的FontAwesome图标时，就会出现视觉上的位置偏移；第一个ListTile额外设置的top内边距也会放大偏移感知。

修复方案 #

方案1（推荐，适配Flutter 2.5及以上版本） #

直接给每个ListTile添加两个属性，强制leading和title垂直居中对齐，同时去掉leading区域的冗余宽度：

ListTile(
  contentPadding: const EdgeInsets.fromLTRB(15, 20, 0, 0),
  // 新增以下两个配置
  minLeadingWidth: 0,
  verticalAlignment: ListTileVerticalAlignment.center,
  leading: IconTheme(
    data: Theme.of(context).iconTheme,
    child: const Icon(FontAwesomeIcons.diceD6),
  ),
  title: Text(
    'FREE ASSETS',
    style: Theme.of(context).textTheme.headlineMedium,
  ),
),
ListTile(
  // 同样新增两个对齐配置
  minLeadingWidth: 0,
  verticalAlignment: ListTileVerticalAlignment.center,
  leading: IconTheme(
    data: Theme.of(context).iconTheme,
    child: const Icon(FontAwesomeIcons.folderOpen),
  ),
  title: Text(
    'RESOURCE COLLECTION',
    style: Theme.of(context).textTheme.headlineMedium,
  ),
),
ListTile(
  minLeadingWidth: 0,
  verticalAlignment: ListTileVerticalAlignment.center,
  leading: IconTheme(
    data: Theme.of(context).iconTheme,
    child: const Icon(FontAwesomeIcons.chalkboard),
  ),
  title: Text(
    'LESSONS',
    style: Theme.of(context).textTheme.headlineMedium,
  ),
),
ListTile(
  minLeadingWidth: 0,
  verticalAlignment: ListTileVerticalAlignment.center,
  leading: IconTheme(
    data: Theme.of(context).iconTheme,
    child: const Icon(FontAwesomeIcons.solidRectangleList),
  ),
  title: Text(
    'NEWSLETTER',
    style: Theme.of(context).textTheme.headlineMedium,
  ),
),

如果调整后仍有细微偏移，可以给全局IconTheme增加统一size: 24配置，对齐Material Design默认图标尺寸，抵消FontAwesome图标默认尺寸差异带来的偏移。

方案2（适配低版本Flutter） #

如果使用的Flutter版本没有verticalAlignment属性，可以手动给leading图标包裹固定高度的容器，强制图标居中，容器高度和标题文字的行高保持一致即可：

leading: SizedBox(
  // headlineMedium默认字号28，设置高度32即可和文字居中匹配
  height: 32,
  child: Center(
    child: IconTheme(
      data: Theme.of(context).iconTheme,
      child: const Icon(FontAwesomeIcons.diceD6),
    ),
  ),
),

问题参考截图 #

• 对齐异常初始状态
  
• 设置horizontalTitleGap:0后的状态
  

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