如何在ListTile的trailing区域用Column放置两个图标解决渲染溢出错误

问题根因 #

你遇到的渲染溢出错误核心由两个原因导致：

1. Column默认mainAxisSize属性为MainAxisSize.max，会主动撑满父容器的纵向可用空间，你手动指定SizedBox高度100的情况下，内容很容易超出约束
2. IconButton默认自带48dp的最小点击区域约束，且上下有默认内边距，两个IconButton堆叠后的高度几乎接近100，稍微有布局偏差就会触发溢出

修复方案 #

只需要调整trailing部分的Column配置、去掉多余的SizedBox，同时缩小IconButton的默认边距和约束即可，修改后的代码如下：

Widget buildBook(Book book) => Card(
  shape: const RoundedRectangleBorder(
    borderRadius: BorderRadius.all(Radius.circular(10)),
  ),
  child: ListTile(
    // 调整后的trailing部分
    trailing: Column(
      mainAxisSize: MainAxisSize.min, // 关键：让Column高度适配内容，不强行撑满父容器
      children: [
        IconButton(
          padding: EdgeInsets.zero, // 去掉IconButton默认内边距
          constraints: const BoxConstraints(minHeight: 24, minWidth: 24), // 缩小默认点击区域约束
          icon: Icon(Icons.edit, color: HexColor("#7367f0")),
          onPressed: () {
            _getVariantRowInfo(book.id, book.author, book.title);
          },
        ),
        IconButton(
          padding: EdgeInsets.zero,
          constraints: const BoxConstraints(minHeight: 24, minWidth: 24),
          icon: Icon(Icons.delete, color: HexColor("#7367f0")),
          onPressed: () {
            _getVariantRowInfo(book.id, book.author, book.title);
          },
        ),
      ],
    ),
    title: const Padding(
      padding: EdgeInsets.fromLTRB(0, 10, 15, 0),
      child: Text("  Discounted Price:  90"),
    ),
    horizontalTitleGap: 10,
    subtitle: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text("  ${book.author}", style: GoogleFonts.montserrat(fontSize: 15)),
        Text("  ${book.title}", style: GoogleFonts.montserrat(fontSize: 15)),
        const SizedBox(height: 10)
      ],
    ),
  )
);

如果需要保留IconButton的大点击热区，不想缩小约束，也可以直接放弃ListTile组件，用自定义Row实现列表项，自由度更高，不会受ListTile自带的尺寸约束限制。

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