Flutter：无需外部包实现DataTable列宽拖拽或自定义设置的组件？

原生Flutter的DataTable本身不支持拖拽调整列宽，但可以通过状态管理+自定义拖拽交互实现需求，完全无需外部包，且保留原有功能。核心思路是：用StatefulWidget维护列宽状态，在列间添加可拖拽的分隔条，通过手势事件动态更新列宽。

实现代码 #

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '可拖拽调整列宽的DataTable',
      home: Scaffold(
        appBar: AppBar(title: const Text('可拖拽调整列宽的DataTable')),
        body: const ResizableDataTable(),
      ),
    );
  }
}

class ResizableDataTable extends StatefulWidget {
  const ResizableDataTable({super.key});

  @override
  State<ResizableDataTable> createState() => _ResizableDataTableState();
}

class _ResizableDataTableState extends State<ResizableDataTable> {
  // 初始化各列宽度，可根据需求修改
  List<double> _columnWidths = [150, 100, 200];
  // 记录当前正在拖拽的列分隔条索引
  int? _draggingIndex;

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: Stack(
        children: [
          // 核心DataTable组件
          DataTable(
            columnSpacing: 0, // 取消默认列间距，让分隔条紧贴列边缘
            columns: List.generate(_columnWidths.length, (index) {
              return DataColumn(
                label: SizedBox(
                  width: _columnWidths[index],
                  child: Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 16),
                    child: Text(
                      ['Name', 'Age', 'Role'][index],
                      style: const TextStyle(fontStyle: FontStyle.italic),
                    ),
                  ),
                ),
              );
            }),
            rows: <DataRow>[
              const DataRow(
                cells: <DataCell>[
                  DataCell(Text('Sarah')),
                  DataCell(Text('19')),
                  DataCell(Text('Student')),
                ],
              ),
              DataRow(
                cells: <DataCell>[
                  DataCell(
                    SizedBox(
                      width: _columnWidths[0],
                      child: const Text('abcdefghijklmnopqrstuvxyz'),
                    ),
                  ),
                  const DataCell(Text('43')),
                  const DataCell(Text('Professor')),
                ],
              ),
              DataRow(
                cells: <DataCell>[
                  const DataCell(Text('William')),
                  DataCell(
                    SizedBox(
                      width: _columnWidths[1],
                      child: const Text('abcdefghijklmnopqrstuvxyz'),
                    ),
                  ),
                  const DataCell(Text('Associate Professor')),
                ],
              ),
            ],
          ),
          // 叠加可拖拽的列分隔条
          Positioned.fill(
            child: Row(
              children: List.generate(_columnWidths.length - 1, (index) {
                // 计算分隔条的横坐标位置：前面所有列宽度之和
                final leftOffset = _columnWidths.sublist(0, index + 1).reduce((a, b) => a + b);
                return Positioned(
                  left: leftOffset - 2, // 向左偏移2px，让分隔条覆盖列边缘，提升拖拽体验
                  top: 0,
                  bottom: 0,
                  width: 4,
                  child: GestureDetector(
                    behavior: HitTestBehavior.translucent,
                    onPanStart: (details) => setState(() => _draggingIndex = index),
                    onPanUpdate: (details) {
                      if (_draggingIndex == null) return;
                      setState(() {
                        // 根据拖拽偏移调整相邻两列的宽度
                        final delta = details.delta.dx;
                        _columnWidths[_draggingIndex!] += delta;
                        _columnWidths[_draggingIndex! + 1] -= delta;
                        // 限制最小宽度，避免列被拖到消失
                        _columnWidths[_draggingIndex!] = _columnWidths[_draggingIndex!].clamp(80, double.infinity);
                        _columnWidths[_draggingIndex! + 1] = _columnWidths[_draggingIndex! + 1].clamp(80, double.infinity);
                      });
                    },
                    onPanEnd: (details) => setState(() => _draggingIndex = null),
                    child: Container(
                      color: _draggingIndex == index ? Colors.blue.withOpacity(0.5) : Colors.transparent,
                      child: const Center(
                        child: Icon(Icons.drag_indicator, size: 16, color: Colors.grey),
                      ),
                    ),
                  ),
                );
              }),
            ),
          ),
        ],
      ),
    );
  }
}

关键说明 #

1. 状态管理：用_columnWidths数组维护各列宽度，通过setState动态更新UI
2. 列宽约束：给DataColumn的label和需要固定宽度的DataCell添加SizedBox，确保列宽跟随状态变化
3. 拖拽交互：在Stack中叠加可拖拽的分隔条，通过GestureDetector监听拖拽事件，计算偏移量调整相邻列宽度
4. 边界限制：添加最小宽度限制，防止列被拖到完全消失
5. 手动设置列宽：直接修改_columnWidths数组的值并调用setState即可实现手动调整

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