Flutter中DataTable实现动态行高适配的问题咨询

官方原生DataTable组件目前不支持单行动态行高，其设计逻辑强制所有数据行统一使用dataRowHeight属性设置的固定高度，所以才会出现短内容行留白的问题。

可选解决方案 #

• 方案1：使用原生Table组件替代（无第三方依赖） #

Table组件天生支持行高自适应，会根据当前行内最高的单元格内容自动调整行高，适合不需要DataTable自带的排序、选中态等高级特性的场景。简单示例代码如下：

Table(
  border: TableBorder.all(color: Colors.grey),
  columnWidths: const {
    0: FixedColumnWidth(100),
    1: FlexColumnWidth(),
  },
  children: [
    // 表头行
    TableRow(
      decoration: BoxDecoration(color: Colors.grey[200]),
      children: const [
        Padding(padding: EdgeInsets.all(8), child: Text('标题1')),
        Padding(padding: EdgeInsets.all(8), child: Text('标题2')),
      ]
    ),
    // 数据行，行高自动适配内容
    ...yourDataList.map((item) => TableRow(
      children: [
        Padding(padding: EdgeInsets.all(8), child: Text(item.field1)),
        Padding(padding: EdgeInsets.all(8), child: Text(item.field2)),
      ]
    )).toList(),
  ],
)

• 方案2：使用扩展组件data_table_2 #

该组件基于官方DataTable源码修改，兼容原生DataTable的所有API，同时新增了动态行高、横向滚动、列宽自定义等常用特性，适配成本极低。使用时只需将原有DataTable替换为DataTable2，无需额外配置即可实现行高自动适配内容。

• 方案3：自定义修改DataTable源码 #

如果需要完全基于官方组件定制，可以拷贝Flutter SDK中DataTable的源码，将源码中强制使用全局dataRowHeight作为行高的逻辑，修改为根据每行内容计算高度的逻辑，即可实现单行动态行高。

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