Flutter中如何在ListTile的trailing属性内显示两行文本

云原生阿岚

2026-8-30

Flutter ListTile trailing区域实现两行文本效果

ListTile的trailing属性支持传入任意Widget，不需要修改组件源码，直接传入纵向布局容器包裹两行文本即可实现需求，具体实现如下：

核心实现代码

ListTile(
  // 左侧、标题区域可按业务需求自行配置
  leading: const Icon(Icons.notifications, size: 40),
  title: const Text("系统通知"),
  subtitle: const Text("您有新的互动消息待查看"),
  // trailing区域实现两行文本
  trailing: SizedBox(
    width: 70, // 固定宽度约束，避免无界约束导致布局溢出
    child: Column(
      mainAxisSize: MainAxisSize.min, // 高度适配内容，不占满剩余垂直空间
      mainAxisAlignment: MainAxisAlignment.center, // 垂直方向居中
      crossAxisAlignment: CrossAxisAlignment.end, // 文本右对齐，匹配参考图样式
      children: [
        const Text(
          "刚刚",
          style: TextStyle(fontSize: 13, color: Colors.grey),
        ),
        const SizedBox(height: 4), // 两行文本的间距
        Text(
          "99+",
          style: TextStyle(fontSize: 12, color: Colors.redAccent),
        ),
      ],
    ),
  ),
)

实现注意事项

不要直接在trailing里裸放Column：ListTile给trailing的布局约束是水平方向无界的，裸放Column会触发RenderFlex溢出报错，必须套SizedBox/Container/ConstrainedBox这类组件给一个明确的宽度上限，宽度值可根据自身文本长度调整。
若文本长度不确定容易溢出，可给Text组件添加maxLines: 1和overflow: TextOverflow.ellipsis属性，超长内容自动截断显示省略号。
可通过修改Column的crossAxisAlignment参数调整文本对齐方式：需要左对齐传CrossAxisAlignment.start，居中传CrossAxisAlignment.center即可。