Flutter使用Wrap和Column实现垂直图标列表时间距过大如何解决

问题原因 #

你遇到的间距过大问题不是Wrap的spacing参数不生效，而是Flutter内置的IconButton组件默认自带最小尺寸约束和内边距，这些默认值会额外撑大每个图标组件的占用空间，你设置的1px spacing是加在这些自带空间之外的，所以总间距看起来远大于预期。

解决方法 #

你可以通过调整IconButton的内置参数消除默认额外空间，示例修改如下：

child: Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Padding(
      padding: const EdgeInsets.all(10.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Container(child: Text('Title')),
          Container(child: Text('Category')),
        ],
      ),
    ),
    Wrap(
      direction: Axis.vertical,
      spacing: 1, // 这里的间距现在会按照你设置的1px正常生效
      runSpacing: 1,
      children: <Widget>[
        IconButton(
          padding: EdgeInsets.zero, // 去掉默认内边距
          constraints: BoxConstraints(), // 去掉默认最小尺寸限制
          splashRadius: 16, // 可选：调整点击波纹的大小，避免超出图标范围
          icon: Icon(Icons.check),
          iconSize: 14,
          onPressed: null,
        ),
        IconButton(
          padding: EdgeInsets.zero,
          constraints: BoxConstraints(),
          splashRadius: 16,
          icon: Icon(Icons.star_outline),
          iconSize: 14,
          onPressed: null,
        ),
        IconButton(
          padding: EdgeInsets.zero,
          constraints: BoxConstraints(),
          splashRadius: 16,
          icon: Icon(Icons.delete_outline),
          iconSize: 14,
          onPressed: () => deleteTx(tx.id),
        ),
      ],
    ),
  ],
)

备选方案 #

如果你不需要IconButton自带的点击波纹效果，也可以直接用Icon组件搭配GestureDetector实现点击，完全自定义尺寸和间距：

GestureDetector(
  onTap: () => deleteTx(tx.id),
  child: Icon(Icons.delete_outline, size:14),
)

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