Flutter中ListTile嵌套Column时Trailing组件占满宽度如何解决？

错误触发原因 #

ListTile的trailing属性有隐式的宽度约束，不允许子组件占满整个ListTile的水平宽度。你当前使用的Column默认会在水平交叉轴方向尽可能扩展占满可用空间，不符合ListTile的尺寸约束，所以触发报错。

修复方案 #

下面两种方案选一种即可：

• 方案1：给trailing的Column外层加固定宽度的容器，手动指定宽度适配你的内容尺寸，修改后的trailing代码如下：

trailing: SizedBox(
  // 宽度可根据实际展示需求调整
  width: 80,
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.end,
    // 加这个配置避免Column垂直方向撑满ListTile高度
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
      SizedBox(height: 10),
      TextTime(
        child: Text(
          "${timeago.format(time.toDate())}",
          style: TextStyle(
            fontWeight: FontWeight.w300,
            fontSize: 11,
          ),
        ),
      ),
      SizedBox(height: 5),
      buildCounter(context),
    ],
  ),
),

• 方案2：不想写死宽度的话，用IntrinsicWidth包裹Column，让宽度自动适配内部最宽子元素的尺寸：

trailing: IntrinsicWidth(
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.end,
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
      // 原有子组件内容保持不变
      SizedBox(height: 10),
      TextTime(
        child: Text(
          "${timeago.format(time.toDate())}",
          style: TextStyle(
            fontWeight: FontWeight.w300,
            fontSize: 11,
          ),
        ),
      ),
      SizedBox(height: 5),
      buildCounter(context),
    ],
  ),
)

如果以上两种方案都无法满足你的自定义布局需求，可以直接放弃使用ListTile，用Row组件自行组装leading、标题、右侧内容的布局，灵活度更高。

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