Flutter自定义List Tile组件存在多余内边距问题如何解决

解决方法 #

按照以下步骤调整代码即可消除多余内边距：

• 给内部Column添加mainAxisSize: MainAxisSize.min属性，避免Column默认占用多余垂直空间
• 修正竖线Container的参数错误：原代码中Container宽度设为1但边框宽度为2，会导致尺寸溢出出现偏移，直接使用color属性设置竖线颜色即可，无需用border实现
• 如果该自定义组件嵌套在ListTile内使用，给ListTile添加contentPadding: EdgeInsets.zero关闭其默认内置内边距
• 可给最外层Container手动指定padding: EdgeInsets.zero强制清空默认内边距

修改后的核心代码示例：

return Container(
  padding: EdgeInsets.zero,
  child: Row(
    mainAxisSize: MainAxisSize.min,
    children: [
      Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
            height: 100,
            width: 100,
            color: Colors.orange,
            child: Image(
              image: AssetImage('assets/images/poligon.png'),
            )
          ),
          Transform.rotate(
            angle: 0.022218565326719023,
            child: Container(
              width: 2,
              height: 37.99062075760125,
              color: const Color(0xff33ac0c),
            )
          )
        ],
      ),
    ],
  ),
);

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