Flutter中TableRow内文本被挤压问题求助

问题现象 #

在Flutter项目中使用Table展示Firebase预约数据时，TableRow内的文本出现挤压变形，尤其是“status: unassigned”这类文本显示异常。

问题原因 #

1. 默认Table未设置列宽规则，列宽会根据内容自动分配，导致短标签列占用过多空间，内容列被挤压。
2. 内容列的Text组件未开启自动换行，超出宽度时会强制挤压文本。
3. Table缺少垂直对齐设置，部分单元格内容布局不协调。

解决方法 #

通过给Table添加列宽约束、开启文本自动换行、优化垂直对齐来修复：

修改后的Table代码 #

Table(
  // 指定列宽分配规则：第一列固定宽度，第二列占剩余空间
  columnWidths: const {
    0: FixedColumnWidth(120),
    1: FlexColumnWidth(),
  },
  // 设置单元格垂直居中对齐
  defaultVerticalAlignment: TableCellVerticalAlignment.middle,
  children: [
    const TableRow(children: [SizedBox(height: 5,), SizedBox(height: 5,)]),
    TableRow(
      children: [
        const Center(child: Text('Date', style: TextStyle(fontFamily: 'MonMed'),)),
        Text(': ${documents[index]['date']}', style: const TextStyle(fontFamily: 'MonMed'), softWrap: true,),
      ]
    ),
    const TableRow(children: [SizedBox(height: 8,), SizedBox(height: 8,)]),
    TableRow(
      children: [
        const Center(child: Text('Car Plate', style: TextStyle(fontFamily: 'MonMed'),)),
        Text(': ${documents[index]['carPlate']}', style: const TextStyle(fontFamily: 'MonMed'), softWrap: true,),
      ]
    ),
    const TableRow(children: [SizedBox(height: 8,), SizedBox(height: 8,)]),
    TableRow(
      children: [
        const Center(child: Text('Service', style: TextStyle(fontFamily: 'MonMed'),)),
        Text(': ${documents[index]['serviceName']}', style: const TextStyle(fontFamily: 'MonMed'), softWrap: true,),
      ]
    ),
    const TableRow(children: [SizedBox(height: 8,), SizedBox(height: 8,)]),
    TableRow(
      children: [
        const Center(child: Text('Price', style: TextStyle(fontFamily: 'MonMed'),)),
        Text(': ${documents[index]['payment']}', style: const TextStyle(fontFamily: 'MonMed'), softWrap: true,),
      ]
    ),
    const TableRow(children: [SizedBox(height: 8,), SizedBox(height: 8,)]),
    TableRow(
      children: [
        const Center(child: Text('Customer', style: TextStyle(fontFamily: 'MonMed'),)),
        Text(': ${documents[index]['custName']}', style: const TextStyle(fontFamily: 'MonMed'), softWrap: true,),
      ]
    ),
    const TableRow(children: [SizedBox(height: 8,), SizedBox(height: 8,)]),
    TableRow(
      children: [
        const Center(child: Text('Pay Status', style: TextStyle(fontFamily: 'MonMed'),)),
        Text(': ${documents[index]['payStatus']}', style: const TextStyle(fontFamily: 'MonMed'), softWrap: true,),
      ]
    ),
    const TableRow(children: [SizedBox(height: 8,), SizedBox(height: 8,)]),
    TableRow(
      children: [
        const Center(child: Text('Status', style: TextStyle(fontFamily: 'MonMed'),)),
        Text(': ${documents[index]['status']}', style: const TextStyle(fontFamily: 'MonMed'), softWrap: true,),
      ]
    ),
    const TableRow(children: [SizedBox(height: 10,), SizedBox(height: 10,)]),
    TableRow(
      children: [
        const Center(child: Text('Time Start', style: TextStyle(fontFamily: 'MonMed'),)),
        Text(': ${documents[index]['timeStart']}:00 Hour', style: const TextStyle(fontFamily: 'MonMed'), softWrap: true,),
      ]
    ),
    const TableRow(children: [SizedBox(height: 8,), SizedBox(height: 8,)]),
    TableRow(
      children: [
        const Center(child: Text('Time End', style: TextStyle(fontFamily: 'MonMed'),)),
        Text(': ${newTimeEnd}:00 Hour', style: const TextStyle(fontFamily: 'MonMed'), softWrap: true,),
      ]
    ),
  ],
)

额外优化建议 #

• 如果需要更清晰的表格线条，可以添加border: TableBorder.all(color: Colors.grey.shade300)属性。
• 若标签列文本长度差异大，可改用比例分配列宽，比如0: FlexColumnWidth(1), 1: FlexColumnWidth(2)，让两列按1:2的比例分配宽度。

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