Flutter ListTile出现多余制表符空格问题的原因及解决方法

这个多余空格是Flutter Material 3设计规范下ListTile组件的默认参数导致的，属于框架默认行为，不是代码书写错误：

• ListTile组件默认自带非0的contentPadding内边距，M3版本下的默认值远大于M2时期的数值
• 组件默认的horizontalTitleGap（leading图标和标题的间距）、minLeadingWidth（leading区域最小宽度）、minVerticalPadding（上下最小内边距）都预设了较大的默认值，视觉上就会呈现出多余空白
• 如果项目全局主题配置过ListTile相关样式参数，规则会应用到所有ListTile组件，就会出现全项目ListTile都带多余空格的现象
• 额外排查点：如果父组件是ListView，其默认会携带MediaQuery生成的边距，也可能被误认为是ListTile自带的空格

根据需求可以选择单组件修复或者全局修复，要解决全项目统一的问题推荐用全局主题配置的方式。

单组件修复 #

给单个ListTile手动设置间距参数，覆盖默认值即可，示例代码：

ListTile(
  // 可根据自身UI需求调整数值，不需要完全设为0
  contentPadding: EdgeInsets.symmetric(horizontal: 8),
  horizontalTitleGap: 4,
  minLeadingWidth: 20,
  minVerticalPadding: 2,
  title: const Text("列表项标题"),
  leading: const Icon(Icons.person),
  onTap: () {},
)

全局统一修复 #

在App入口的MaterialApp主题配置中，添加全局ListTile主题配置，一次修改即可让全项目所有ListTile生效：

MaterialApp(
  theme: ThemeData(
    useMaterial3: true,
    // 其余主题配置...
    listTileTheme: ListTileThemeData(
      contentPadding: EdgeInsets.symmetric(horizontal: 8),
      horizontalTitleGap: 4,
      minLeadingWidth: 20,
      minVerticalPadding: 2,
    ),
  ),
  // 其余路由、页面配置...
)

如果修改后仍存在空白，检查ListTile外层父组件是否手动添加了Padding，或是ListView默认自带的边距，手动将ListView的padding参数设为需要的数值即可。

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