如何在Flutter的ListTile trailing容器中居中显示Icon？

你的问题核心是IconButton自带默认内边距，即便你设置了外层容器的宽高和IconButton的alignment，默认padding仍会挤压图标空间，导致无法居中。以下是三种可行的修复方案：

方案一：用GestureDetector替代IconButton #

GestureDetector没有默认padding，直接包裹Icon即可实现居中：

trailing: Container(
  margin: EdgeInsets.symmetric(vertical: 12),
  width: 25,
  height: 25,
  decoration: BoxDecoration(
    color: tdRed,
    borderRadius: BorderRadius.circular(5),
  ),
  child: GestureDetector(
    onTap: () {},
    child: Icon(
      Icons.delete,
      color: Colors.white,
      size: 18,
    ),
  ),
),

方案二：移除IconButton的默认padding #

保留IconButton，但手动将其padding设为0：

trailing: Container(
  margin: EdgeInsets.symmetric(vertical: 12),
  width: 25,
  height: 25,
  decoration: BoxDecoration(
    color: tdRed,
    borderRadius: BorderRadius.circular(5),
  ),
  child: IconButton(
    padding: EdgeInsets.zero, // 关键：清除默认内边距
    alignment: Alignment.center,
    color: Colors.white,
    iconSize: 18,
    icon: Icon(Icons.delete),
    onPressed: () {},
  ),
),

方案三：InkWell+Icon组合（保留水波纹效果） #

如果需要点击时的水波纹反馈，用InkWell包裹居中的Icon：

trailing: Container(
  margin: EdgeInsets.symmetric(vertical: 12),
  width: 25,
  height: 25,
  decoration: BoxDecoration(
    color: tdRed,
    borderRadius: BorderRadius.circular(5),
  ),
  child: InkWell(
    borderRadius: BorderRadius.circular(5),
    onTap: () {},
    child: Center(
      child: Icon(
        Icons.delete,
        color: Colors.white,
        size: 18,
      ),
    ),
  ),
),

补充说明 #

IconButton的默认内边距为EdgeInsets.all(8.0)，你的容器宽高仅25，减去左右各8的padding后，剩余空间不足以容纳18大小的图标，因此图标会出现偏移。清除默认padding或替换为无padding的组件，就能让图标正常居中。

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