Flutter中如何设置PaginatedDataTable弹性列宽自适应填充空间

Flutter默认的Table组件提供columnWidths属性，可通过设置FlexColumnWidth为不同列分配弹性占比，实现跨设备的响应式列宽效果，示例配置如下：

columnWidths: const <int, TableColumnWidth>{
  0: FlexColumnWidth(4),
  1: FlexColumnWidth(1),
},

该配置方式十分简便，但PaginatedDataTable没有提供直接实现弹性列宽的对应属性，直接使用时表格会存在大量空白区域，显示效果不佳。

以下为可复现该问题的示例代码：

class ResultsData extends DataTableSource {
  final List<Map<String, dynamic>> _data = [
    {'condition': "A1AT deficiency", 'risk': "High"},
    {'condition': "Type 2 diabetes", 'risk': "Medium"},
    {'condition': "Cystic fibrosis", 'risk': "Low"},
    {'condition': "Latex allergy", 'risk': "Low"},
    {'condition': "Tachycardia", 'risk': "Low"},
  ];

  @override
  bool get isRowCountApproximate => false;

  @override
  int get rowCount => _data.length;

  @override
  int get selectedRowCount => 0;

  @override
  DataRow getRow(int index) {
    return DataRow(
      cells: [
        DataCell(Text(_data[index]['condition'])),
        DataCell(Text(_data[index]['risk'])),
      ],
    );
  }
}

Widget resultTable(BuildContext context) {
  var data = ResultsData();

  return Expanded(
    child: Card(
      child: Column(
        children: [
          const ListTile(
            title: Text(
              'Your results',
              style: TextStyle(fontWeight: FontWeight.bold),
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(5),
            child: PaginatedDataTable(
              showCheckboxColumn: false,
              rowsPerPage: 4,
              columns: <DataColumn>[
                DataColumn(
                  label: Flexible(
                    child: Text(
                      'Condition',
                      style: Theme.of(context).textTheme.titleSmall?.apply(
                        fontWeightDelta: 1,
                        color: Colors.black54,
                      ),
                    ),
                  ),
                ),
                DataColumn(
                  numeric: true,
                  label: Flexible(
                    child: Text(
                      'Risk',
                      style: Theme.of(context).textTheme.titleSmall?.apply(
                        fontWeightDelta: 1,
                        color: Colors.black54,
                      ),
                    ),
                  ),
                ),
              ],
              source: data,
            ),
          ),
        ],
      ),
    ),
  );
}

预期实现效果：表格列自动填充可用空白区域，优先实现第一列占总宽度60%，第二列占据剩余宽度的布局效果。

解决方案 #

PaginatedDataTable本身没有内置类似FlexColumnWidth的弹性列宽配置，要实现按比例填充可用宽度，直接通过LayoutBuilder获取父容器可用宽度，手动按比例分配每列宽度即可。

核心修改逻辑：

• 用LayoutBuilder包裹PaginatedDataTable，获取当前布局的最大可用宽度
• 按6:4的需求比例计算两列各自宽度，扣除组件默认的左右内边距
• 每个DataColumn的label外层包裹指定宽度的SizedBox，强制列宽匹配计算值
• 移除原label上的Flexible包裹，避免布局冲突

修改后的可运行代码片段：

Padding(
  padding: const EdgeInsets.all(5),
  child: LayoutBuilder(
    builder: (context, constraints) {
      // 扣除PaginatedDataTable默认左右内边距，按6:4分配列宽
      final availableWidth = constraints.maxWidth - 24;
      final conditionColWidth = availableWidth * 0.6;
      final riskColWidth = availableWidth * 0.4;

      return PaginatedDataTable(
        showCheckboxColumn: false,
        rowsPerPage: 4,
        columns: <DataColumn>[
          DataColumn(
            label: SizedBox(
              width: conditionColWidth,
              child: Text(
                'Condition',
                style: Theme.of(context).textTheme.titleSmall?.apply(
                  fontWeightDelta: 1,
                  color: Colors.black54,
                ),
              ),
            ),
          ),
          DataColumn(
            numeric: true,
            label: SizedBox(
              width: riskColWidth,
              child: Text(
                'Risk',
                style: Theme.of(context).textTheme.titleSmall?.apply(
                  fontWeightDelta: 1,
                  color: Colors.black54,
                ),
              ),
            ),
          ),
        ],
        source: data,
      );
    },
  ),
)

如果实际显示时宽度存在细微溢出或留白，微调扣除的内边距数值即可。后续需要调整列占比时，直接修改宽度计算的比例系数，方案会自动适配不同屏幕宽度，不会出现多余空白。

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