Flutter ListTile添加trailing Column报RenderFlex溢出且对齐异常怎么解决

你遇到的两个问题根源都来自于错用了ListTile组件：

1. 溢出报错：ListTile本身是为简单轻量的列表项设计的，有默认的尺寸约束，trailing属性分配的高度、宽度都有上限，你在trailing中放入的高Column超出了这个限制，就会触发RenderFlex溢出。
2. 对齐失败：title和trailing的两个Column是独立布局的，即使你刻意调整间距高度，也会因为不同设备的文字渲染差异、内容高度差出现对齐偏差，你最后一行特意放了SizedBox40进一步放大了对齐误差。

以下是两种可完美解决问题的实现方案： #

方案1：逐行Row实现（最灵活，适配性最强） #

将原来的ListTile替换为Column，每一组标签和值单独用Row承载，天然保证同一行内容水平对齐：

// 页面布局代码
SizedBox(
  height: MediaQuery.of(context).size.height * 0.55,
  child: Padding(
    padding: const EdgeInsets.symmetric(horizontal: 5, vertical: 10),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        buildInfoRow("Date", "5/11/2021"),
        const SizedBox(height: 20),
        buildInfoRow("Token no", "36"),
        const SizedBox(height: 20),
        buildInfoRow("Token Issuance Date", "2/11/2021"),
        const SizedBox(height: 20),
        buildInfoRow("Token Issuance Time", "12:15:00 PM"),
        const SizedBox(height: 20),
        buildInfoRow("Calling Place", "Desk 07"),
        const SizedBox(height: 20),
        buildInfoRow("Total Fee", "PKR. 1,000/-"),
        const SizedBox(height: 20),
        buildInfoRow("Advance", "PKR. 200/-"),
        const SizedBox(height: 20),
        buildInfoRow("Remaining", "PKR. 800/-"),
        const SizedBox(height: 40),
        buildInfoRow("Status", "Unattended"),
      ],
    ),
  ),
)

// 单独抽离的行构建方法
Widget buildInfoRow(String label, String value) {
  return Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Text(label),
      Text(value),
    ],
  );
}

方案2：Table组件实现（适合多行固定列数的对齐场景） #

如果后续还会新增更多同结构的行，用Table组件代码更简洁，对齐逻辑内置不需要额外处理：

// 页面布局代码
SizedBox(
  height: MediaQuery.of(context).size.height * 0.55,
  child: Padding(
    padding: const EdgeInsets.only(left: 5),
    child: Table(
      columnWidths: const {
        0: FlexColumnWidth(1),
        1: FlexColumnWidth(1),
      },
      children: [
        buildTableRow("Date", "5/11/2021", 20),
        buildTableRow("Token no", "36", 20),
        buildTableRow("Token Issuance Date", "2/11/2021", 20),
        buildTableRow("Token Issuance Time", "12:15:00 PM", 20),
        buildTableRow("Calling Place", "Desk 07", 20),
        buildTableRow("Total Fee", "PKR. 1,000/-", 20),
        buildTableRow("Advance", "PKR. 200/-", 20),
        buildTableRow("Remaining", "PKR. 800/-", 40),
        buildTableRow("Status", "Unattended", 0),
      ],
    ),
  ),
)

// 单独抽离的表格行构建方法
TableRow buildTableRow(String label, String value, double paddingBottom) {
  return TableRow(
    children: [
      Padding(
        padding: EdgeInsets.only(bottom: paddingBottom),
        child: Text(label),
      ),
      Padding(
        padding: EdgeInsets.only(bottom: paddingBottom),
        child: Text(value, textAlign: TextAlign.end),
      ),
    ]
  );
}

补充说明 #

如果后续内容行数可能继续增加，超过你设置的0.55屏幕高度，只需要给Column/Table外层套一个SingleChildScrollView即可彻底解决溢出问题。

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