如何在Flutter的ListTile中实现如图右上角所示的trailing效果？

目标效果参考图

不用魔改ListTile组件源码，ListTile的trailing参数支持传入任意自定义Widget，用Stack+Positioned做层叠定位就能直接实现目标效果，具体落地逻辑如下：

• 核心布局思路：trailing区域底层放常规尾部内容（比如跳转箭头、说明文本、操作图标），上层把角标元素定位到右上角即可
• 必须给trailing的层叠布局加固定尺寸约束，否则会出现布局溢出报错

可直接复用的代码示例 #

ListTile(
  contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
  leading: const CircleAvatar(
    radius: 24,
    backgroundColor: Colors.blueAccent,
    child: Icon(Icons.person, color: Colors.white),
  ),
  title: const Text(
    "消息通知",
    style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500),
  ),
  subtitle: const Text(
    "您有3条未读系统消息",
    style: TextStyle(fontSize: 13, color: Colors.grey),
  ),
  trailing: SizedBox(
    // 固定trailing区域宽高，避免Stack布局溢出
    width: 64,
    height: 40,
    child: Stack(
      alignment: Alignment.center,
      children: [
        // 尾部常规内容：说明文本+跳转箭头
        const Positioned(
          right: 0,
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text(
                "查看",
                style: TextStyle(fontSize: 14, color: Colors.grey),
              ),
              Icon(Icons.chevron_right, color: Colors.grey, size: 20),
            ],
          ),
        ),
        // 右上角角标：对应参考图的右上角标记效果
        Positioned(
          top: 2,
          right: 32,
          child: Container(
            padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 1),
            decoration: BoxDecoration(
              color: Colors.red,
              borderRadius: BorderRadius.circular(8),
            ),
            child: const Text(
              "NEW",
              style: TextStyle(
                color: Colors.white,
                fontSize: 10,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ),
      ],
    ),
  ),
  onTap: () {
    // 编写列表项点击逻辑
  },
)

适配调整提示 #

• 如果不需要文字角标，只要红点提示，直接把角标部分的Container替换为width: 8, height: 8, decoration: BoxDecoration(color: Colors.red, shape: BoxShape.circle)的组件即可
• 角标的top、right偏移值可以根据你实际的尾部内容尺寸调整，保证角标刚好卡在右上角位置即可
• 如果你的trailing内容更复杂，对应调整外层SizedBox的宽高参数，不要让内容超出约束范围

内容的提问来源于stack exchange，提问作者김민석