Flutter能否使用无标题ListTile？解决标题为空留白问题

当你给ListTile的title传null时，组件内部仍会为title保留默认占位空间，这就是空白的来源；而subtitle为null时会被完全移除布局项，所以不会有这个问题。

给你几个可行的解决办法：

方法1：仅在title不为空时传递该参数（推荐） #

用Dart的集合展开语法，让ListTile在title为空时完全不处理title相关布局，从根源消除空白：

ListTile(
  subtitle: Text(
    task.text,
    maxLines: 3,
    overflow: TextOverflow.fade,
  ),
  ...?item.title.isNotEmpty
      ? {
          title: Text(
            item.title,
            maxLines: 1,
          )
        }
      : null,
)

方法2：用SizedBox.shrink()替代null #

如果不想用集合展开，也可以把空状态下的title换成SizedBox.shrink()，它会占据最小空间（几乎为0），从而消除空白：

ListTile(
  title: item.title.isNotEmpty
    ? Text(
        item.title,
        maxLines: 1,
      )
    : SizedBox.shrink(),
  subtitle: Text(
        task.text,
        maxLines: 3,
        overflow: TextOverflow.fade,
      ),
)

方法3：手动调整内边距适配 #

如果上面的方法都不适用，还可以在title为空时手动修改ListTile的内边距，抵消默认的占位空白：

ListTile(
  title: item.title.isNotEmpty
    ? Text(
        item.title,
        maxLines: 1,
      )
    : null,
  subtitle: Text(
        task.text,
        maxLines: 3,
        overflow: TextOverflow.fade,
      ),
  contentPadding: item.title.isEmpty 
      ? EdgeInsets.only(left: 16, right: 16, top: 8, bottom: 8) 
      : null,
)

内边距数值可以根据你的实际UI风格调整。

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