Flutter用700行代码纯手工自定义绘制表格控件KqTable

我们项目中往往需要使用到自定义表格，系统提供的表格控件只支持简单的展示功能，并不能很好的满足我们项目的自定义，然而自定义最大自由度的还是自己绘制，所以我选则了自己从头开始自定义绘制一个表格，绘制中不仅需要考虑到事件的处理，还需要考虑到表格固定行列的处理，绘制时采用了数据预处理策略，先对需要绘制的数据进行层级排序，然后根据层级排序，控制绘制顺序。而且项目中还用到了局部绘制的概念，即只绘制出当前正在展示的表格，根据表格的滑动，动态绘制需要展示的内容。感兴趣的伙伴可以直接复制代码使用和修改。

• 演示

• 功能

1.支持动态数据绘制。数据格式[[row],[row],...]。

2.支持表格中文字的大小与颜色设置。

3.支持控件宽高设置。

4.支持设置表格的格子背景颜色与边框颜色。

5.支持固定上下左右行列，固定遵循格式，代表上下左右固定的行与列数：[int,int,int,int]

6.支持指定任意行列的颜色，设置格式：[TableColor,TableColor,...],TableColor有两个子函数。设置行颜色的RowColor与设置列颜色的RowColor。

7.支持单元格点击回调，回调会返回所点击的单元格的对应数据对象T。

8.支持行列拖拽宽度和高度。

9.支持点击表头选中行列，并高亮。

10.手把手自定义事件处理。

• 代码

import 'dart:async';

import 'package:flutter/material.dart';
import 'dart:ui' as ui;

class KqTable<T extends ITableData> extends StatefulWidget {
  /// 控件数据
  final List<List<T>> data;

  /// 文本大小
  final double fontSize;

  /// 文本颜色
  final Color textColor;

  /// 控件宽度
  final double width;

  /// 控件高度
  final double height;

  /// 表格颜色
  final Color tableColor;

  /// 表格边框颜色
  final Color tableBorderColor;

  /// 表格点击选中颜色
  final Color tableClickChosenColor;

  /// 表格长按选中颜色
  final Color tableLongPressChosenColor;

  /// 表格点击选中边框颜色
  final Color tableClickChosenBorderColor;

  /// 表格长按选中边框颜色
  final Color tableLongPressChosenBorderColor;

  /// 上下左右固定行数值[int,int,int,int]
  final List<int> lockList;

  /// 指定特定行或者列的颜色，行使用[RowColor],列使用[ColumnColor]
  final List<TableColor> colorList;

  /// 点击单元格回调
  final Function(T data)? onTap;

  const KqTable(
      {super.key,
      required this.data,
      this.fontSize = 14,
      this.textColor = Colors.black,
      this.width = 300,
      this.height = 200,
      this.tableColor = Colors.white,
      this.tableBorderColor = const Color.fromARGB(255, 189, 189, 189),
      this.lockList = const [3, 0, 1, 0],
      this.colorList = const [
        RowColor(0, Color.fromARGB(255, 238, 238, 238)),
        RowColor(5, Color.fromARGB(255, 238, 238, 238)),
        RowColor(6, Color.fromARGB(255, 238, 238, 238)),
        ColumnColor(0, Color.fromARGB(255, 238, 238, 238)),
        ColumnColor(7, Color.fromARGB(255, 238, 238, 238))
      ],
      this.onTap,
      this.tableClickChosenColor =
          const Color.fromARGB(102, 130, 177, 255), //a=40% blue
      this.tableClickChosenBorderColor =
          const Color.fromARGB(230, 130, 177, 255), //90% blue
      this.tableLongPressChosenColor =
          const Color.fromARGB(102, 29, 233, 182), //a=40% green
      this.tableLongPressChosenBorderColor =
          const Color.fromARGB(230, 29, 233, 182)}); //a=90% green

  @override
  State<StatefulWidget> createState() => _KqTableState<T>();
}

class _KqTableState<T extends ITableData> extends State<KqTable<T>> {
  /// 长按判定等待时间100毫秒
  final int _waitTime = 100;

  /// x方向偏移量
  double _offsetDx = 0;

  /// y方向偏移量
  double _offsetDy = 0;

  /// x方向误差量
  double _diffOffsetDx = 0;

  /// y方向误差量
  double _diffOffsetDy = 0;

  /// 行数
  int _xLength = 0;

  /// 列数
  int _yLength = 0;

  /// 每列的行文本最大宽度列表[[原宽度,调整后宽度],[原宽度,调整后宽度],...]
  final List<List<double>> _xWidthList = [];

  /// 每行的文本高度，高度也可以变化，所以不能用一个值表达[[原高度，调整后高度],[原高度，调整后高度],...]
  final List<List<double>> _yHeightList = [];

  /// 按下时当前单元格的对象
  T? _opTableData;

  /// 当前手势是否滑动
  bool _opIsMove = false;

  /// 当前是否是长按
  bool _opIsLongPress = false;

  /// 绘制对象缓存
  final List<ITableData> _tempDrawData = <ITableData>[];

  /// 计时器
  Timer? timer;

  /// 点击选中行
  int _opClickChosenX = -1;

  /// 点击选中列
  int _opClickChosenY = -1;

  /// 长按选中行
  int _opLongPressChosenX = -1;

  /// 长按选中的行或者列的宽度或者高度值;
  double _opLongPressChosenWH = 0;

  /// 长按选中列
  int _opLongPressChosenY = -1;

  /// 点击是否同时选中行列
  bool _opIsClickChosenXY = false;

  /// 长按是否同时选中行列
  bool _opIsLongPressChosenXY = false;

  @override
  void initState() {
    super.initState();
    _initData();
  }

  @override
  void dispose() {
    //退出时关闭计时器防止内存泄露
    _stopLongPressTimer();
    super.dispose();
  }

  void _initData() {
    _xLength = widget.data[0].length;
    _yLength = widget.data.length;
    double columnHeight = 0;
    for (int i = 0; i < _xLength; i++) {
      double maxWidth = 0;
      for (int j = 0; j < _yLength; j++) {
        ITableData tableData = widget.data[j][i];
        TextPainter textPainter = TextPainter(
            text: TextSpan(
                text: tableData.text,
                style: TextStyle(
                    color: widget.textColor, fontSize: widget.fontSize)),
            maxLines: 1,
            textDirection: TextDirection.ltr)
          ..layout(minWidth: 0, maxWidth: double.infinity);
        if (maxWidth < textPainter.width) {
          maxWidth = textPainter.width;
        }
        columnHeight = textPainter.height;
      }
      _xWidthList.add([maxWidth, maxWidth]);
    }
    for (int j = 0; j < _yLength; j++) {
      _yHeightList.add([columnHeight, columnHeight]);
    }
  }

  void _startLongPressTimer(VoidCallback callback) {
    //计时器，每[_waitTime]毫秒执行一次
    var period = Duration(milliseconds: _waitTime);
    if (timer != null && timer!.isActive) {
      timer?.cancel();
    }
    timer = Timer(period, () {
      if (mounted) {
        _opIsLongPress = true;
        callback();
      }
    });
  }

  void _stopLongPressTimer() {
    timer?.cancel();
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
        onVerticalDragUpdate: (_) {},
        child: RepaintBoundary(
            child: SizedBox(
          width: widget.width,
          height: widget.height,
          child: ClipRect(
              child: Listener(
            child: CustomPaint(
              painter: _TablePainter(
                  this,
                  _offsetDx,
                  _offsetDy,
                  widget.data,
                  _xLength,
                  _yLength,
                  _xWidthList,
                  _yHeightList,
                  _tempDrawData,
                  _opClickChosenX,
                  _opClickChosenY,
                  _opLongPressChosenX,
                  _opLongPressChosenY,
                  _opIsClickChosenXY,
                  _opIsLongPressChosenXY),
            ),
            onPointerDown: (PointerDownEvent event) {
              _opIsMove = false;
              _opIsLongPress = false;
              _opIsLongPressChosenXY = false;
              _opIsClickChosenXY = false;
              _opLongPressChosenX = -1;
              _opLongPressChosenY = -1;
              _opClickChosenX = -1;
              _opClickChosenY = -1;
              //事件点击的中心位置
              Offset? eventOffset = event.localPosition;
              _diffOffsetDx = eventOffset.dx - _offsetDx;
              _diffOffsetDy = eventOffset.dy - _offsetDy;

              ///判定按下在哪个单元格，并获取单元格内容
              //点击的横向坐标
              int y = 0;
              //点击的纵向坐标
              int x = 0;
              //计算横向和纵向坐标
              ITableData? tempX;
              ITableData? tempY;
              for (ITableData tableData in _tempDrawData) {
                if (eventOffset.dx < (tableData.left! + tableData.width!) &&
                    eventOffset.dx > tableData.left!) {
                  if (tempX == null || tempX.level! < tableData.level!) {
                    tempX = tableData;
                  }
                }

                if (eventOffset.dy < (tableData.top! + tableData.height!) &&
                    eventOffset.dy > tableData.top!) {
                  if (tempY == null || tempY.level! < tableData.level!) {
                    tempY = tableData;
                  }
                }
              }
              if (tempX != null) {
                x = tempX.x!;
              }
              if (tempY != null) {
                y = tempY.y!;
              }
              // 单击单元格判定
              if (x == 0 && y == 0) {
                _opIsClickChosenXY = true;
              } else if (x == 0) {
                _opClickChosenY = y;
              } else if (y == 0) {
                _opClickChosenX = x;
              } else {
                _opIsClickChosenXY = false;
                _opClickChosenX = -1;
                _opClickChosenY = -1;
              }
              //获取坐标对应的值
              _opTableData = widget.data[y][x];

              /// 长按拖拽判定
              _startLongPressTimer(() {
                if (y == 0 && x != 0) {
                  // 判断宽度拖拽
                  _opLongPressChosenX = x;
                  _opLongPressChosenWH = _xWidthList[_opLongPressChosenX][1];
                } else if (x == 0 && y != 0) {
                  //判断高度拖拽
                  _opLongPressChosenY = y;
                  _opLongPressChosenWH = _yHeightList[_opLongPressChosenY][1];
                } else if (y == 0 && x == 0) {
                  //判断宽度和高度同时拖拽
                  _opIsLongPressChosenXY = true;
                }
                if (_opLongPressChosenX != -1 ||
                    _opLongPressChosenY != -1 ||
                    _opIsLongPressChosenXY) {
                  _opClickChosenX = -1;
                  _opClickChosenY = -1;
                  _opIsClickChosenXY = false;
                }
                setState(() {});
              });
            },
            onPointerMove: (PointerMoveEvent event) {
              _opIsMove = true;
              _stopLongPressTimer();
              //事件点击的中心位置
              Offset? eventOffset = event.localPosition;
              if (_opLongPressChosenX != -1) {
                ///表格宽度拖拽
                if (_xWidthList[_opLongPressChosenX][1] >
                        _xWidthList[_opLongPressChosenX][0] ||
                    ((eventOffset.dx - _diffOffsetDx) > 0 &&
                        _xWidthList[_opLongPressChosenX][1] ==
                            _xWidthList[_opLongPressChosenX][0])) {
                  _xWidthList[_opLongPressChosenX][1] =
                      _opLongPressChosenWH + eventOffset.dx - _diffOffsetDx;
                } else {
                  _xWidthList[_opLongPressChosenX][1] =
                      _xWidthList[_opLongPressChosenX][0];
                }
              } else if (_opLongPressChosenY != -1) {
                ///表格高度拖拽
                if (_yHeightList[_opLongPressChosenY][1] >
                    _yHeightList[_opLongPressChosenY][0] ||
                    ((eventOffset.dy - _diffOffsetDy) > 0 &&
                        _yHeightList[_opLongPressChosenY][1] ==
                            _yHeightList[_opLongPressChosenY][0])) {
                  _yHeightList[_opLongPressChosenY][1] =
                      _opLongPressChosenWH + eventOffset.dy - _diffOffsetDy;
                } else {
                  _yHeightList[_opLongPressChosenY][1] =
                      _yHeightList[_opLongPressChosenY][0];
                }
              } else if (_opIsLongPressChosenXY) {
                ///宽高同时拖拽
                if (eventOffset.dx >= _xWidthList[0][0]) {
                  _xWidthList[0][1] = eventOffset.dx;
                } else {
                  _xWidthList[0][1] = _xWidthList[0][0];
                }
                if (eventOffset.dy >= _yHeightList[0][0]) {
                  _yHeightList[0][1] = eventOffset.dy;
                } else {
                  _yHeightList[0][1] = _yHeightList[0][0];
                }
              } else {
                ///表格移动
                _offsetDx = eventOffset.dx - _diffOffsetDx;
                _offsetDy = eventOffset.dy - _diffOffsetDy;
              }

              /// 边界处理
              // 当有固定行时
              // 上边限定
              if (_offsetDy >= 0) {
                _offsetDy = 0;
              }
              // 左边限定
              if (_offsetDx >= 0) {
                _offsetDx = 0;
              }
              // 右边限定
              double rightOffset = 0;
              double tableWidth = _TableUtils.getTableRealWidth(_xWidthList);
              double tableHeight = _TableUtils.getTableRealHeight(_yHeightList);
              for (int i = 0; i < widget.lockList[3]; i++) {
                rightOffset += _xWidthList[_xWidthList.length - i - 1][1];
              }
              if (_offsetDx <= (widget.width + rightOffset) - tableWidth) {
                _offsetDx = (widget.width + rightOffset) - tableWidth;
              }
              // 下边限定
              List<double> reversalCellHeights =
                  _TableUtils.reversalCellHeights(_yLength, _yHeightList);
              if (_offsetDy <=
                  (widget.height +
                          reversalCellHeights[widget.lockList[1] == 0
                              ? 0
                              : widget.lockList[1] - 1]) -
                      tableHeight) {
                _offsetDy = (widget.height +
                        reversalCellHeights[widget.lockList[1] == 0
                            ? 0
                            : widget.lockList[1] - 1]) -
                    tableHeight;
              }
              //当表格宽度小于控件宽度，则不能水平移动
              if (tableWidth <= widget.width) {
                _offsetDx = 0;
              }
              //当表格高度小于控件高度，则不能上下移动
              if (tableHeight <= widget.height) {
                _offsetDy = 0;
              }

              setState(() {});
            },
            onPointerUp: (PointerUpEvent event) {
              if (_opIsLongPress) {
                //长按
                setState(() {
                  _opLongPressChosenX = -1;
                  _opLongPressChosenY = -1;
                  _opIsLongPressChosenXY = false;
                });
              } else if (!_opIsMove) {
                //单击
                setState(() {
                  _stopLongPressTimer();
                  widget.onTap?.call(_opTableData as T);
                });
              }
            },
          )),
        )));
  }
}

class _TablePainter<T> extends CustomPainter {
  /// state
  final _KqTableState state;

  /// x方向偏移量
  final double _offsetDx;

  /// y方向偏移量
  final double _offsetDy;

  final List<List<T>>? _data;

  /// 行数
  final int _xLength;

  /// 列数
  final int _yLength;

  /// 每列的行文本最大宽度列表
  final List<List<double>> _xWidthList;

  /// 每行的文本高度列表
  final List<List<double>> _columnHeightList;

  /// 绘制对象缓存
  final List<ITableData> _tempDrawData;

  /// 点击选中行
  final int _opClickChosenX;

  /// 点击选中列
  final int _opClickChosenY;

  /// 长按选中行
  final int _opLongPressChosenX;

  /// 长按选中列
  final int _opLongPressChosenY;

  /// 点击是否同时选中行列
  final bool _opIsClickChosenXY;

  /// 长按是否同时选中行列
  final bool _opIsLongPressChosenXY;

  _TablePainter(
      this.state,
      this._offsetDx,
      this._offsetDy,
      this._data,
      this._xLength,
      this._yLength,
      this._xWidthList,
      this._columnHeightList,
      this._tempDrawData,
      this._opClickChosenX,
      this._opClickChosenY,
      this._opLongPressChosenX,
      this._opLongPressChosenY,
      this._opIsClickChosenXY,
      this._opIsLongPressChosenXY);

  @override
  void paint(Canvas canvas, Size size) {
    //表格边框画笔
    final Paint paint1 = Paint()
      ..strokeCap = StrokeCap.square
      ..isAntiAlias = true
      ..style = PaintingStyle.stroke
      ..color = state.widget.tableBorderColor;
    //表格背景画笔
    final Paint paint2 = Paint()
      ..strokeCap = StrokeCap.square
      ..isAntiAlias = true
      ..style = PaintingStyle.fill
      ..color = state.widget.tableColor;

    _tempDrawData.clear();
    drawTable(canvas, size, paint1, paint2);
  }

  void drawTable(Canvas canvas, Size size, Paint paint1, Paint paint2) {
    List<double> reversalRowWidths =
        _TableUtils.reversalCellWidths(_xLength, _xWidthList);
    List<double> reversalColumnHeights =
        _TableUtils.reversalCellHeights(_yLength, _columnHeightList);
    double totalCellWidth = 0;
    double cellWidth = 0;
    for (int i = 0; i < _xLength; i++) {
      totalCellWidth += cellWidth;
      cellWidth = _xWidthList[i][1];
      double totalCellHeight = 0;
      double cellHeight = 0;
      if (totalCellWidth + _offsetDx <= state.widget.width) {
        for (int j = 0; j < _yLength; j++) {
          String str = (_data![j][i] as ITableData).text;
          totalCellHeight += cellHeight;
          cellHeight = _columnHeightList[j][1];
          if (totalCellHeight + _offsetDy <= state.widget.height) {
            if (j < state.widget.lockList[0]) {
              //上
              if (i < state.widget.lockList[2]) {
                //左上角
                drawTableAdd(str, totalCellWidth, totalCellHeight, cellWidth,
                    cellHeight, j, i,
                    level: 2);
              } else if (i >= _xLength - state.widget.lockList[3]) {
                //右上角
                drawTableAdd(
                    str,
                    state.widget.width - reversalRowWidths[_xLength - i - 1],
                    totalCellHeight,
                    cellWidth,
                    cellHeight,
                    j,
                    i,
                    level: 2);
              } else {
                drawTableAdd(str, totalCellWidth + _offsetDx, totalCellHeight,
                    cellWidth, cellHeight, j, i,
                    level: 1);
              }
            } else if (i < state.widget.lockList[2]) {
              //左
              if (j >= _yLength - state.widget.lockList[1]) {
                //左下角
                drawTableAdd(
                    str,
                    totalCellWidth,
                    state.widget.height -
                        reversalColumnHeights[_yLength - j - 1],
                    cellWidth,
                    cellHeight,
                    j,
                    i,
                    level: 2);
              } else {
                drawTableAdd(str, totalCellWidth, totalCellHeight + _offsetDy,
                    cellWidth, cellHeight, j, i,
                    level: 1);
              }
            } else if (j >= _yLength - state.widget.lockList[1]) {
              //下
              if (i >= _xLength - state.widget.lockList[3]) {
                // 右下角
                drawTableAdd(
                    str,
                    state.widget.width - reversalRowWidths[_xLength - i - 1],
                    state.widget.height -
                        reversalColumnHeights[_yLength - j - 1],
                    cellWidth,
                    cellHeight,
                    j,
                    i,
                    level: 2);
              } else {
                drawTableAdd(
                    str,
                    totalCellWidth + _offsetDx,
                    state.widget.height -
                        reversalColumnHeights[_yLength - j - 1],
                    cellWidth,
                    cellHeight,
                    j,
                    i,
                    level: 1);
              }
            } else if (i >= _xLength - state.widget.lockList[3]) {
              //右
              drawTableAdd(
                  str,
                  state.widget.width - reversalRowWidths[_xLength - i - 1],
                  totalCellHeight + _offsetDy,
                  cellWidth,
                  cellHeight,
                  j,
                  i,
                  level: 1);
            } else {
              drawTableAdd(str, totalCellWidth + _offsetDx,
                  totalCellHeight + _offsetDy, cellWidth, cellHeight, j, i);
            }
          }
        }
      }
    }

    drawTableReal(canvas, size, paint1, paint2);
  }

  /// 把需要绘制的数据先放入内存中
  void drawTableAdd(String text, double left, double top, double width,
      double height, int y, int x,
      {int? level}) {
    if (top <= state.widget.height && left <= state.widget.width) {
      _tempDrawData.add(ITableData(text,
          left: left,
          top: top,
          width: width,
          height: height,
          y: y,
          x: x,
          level: level ?? 0));
    }
  }

  /// 遍历存好的数据进行绘制
  void drawTableReal(Canvas canvas, Size size, Paint paint1, Paint paint2) {
    //绘制层级排序
    _tempDrawData.sort((a, b) => a.level!.compareTo(b.level!));
    //绘制
    for (ITableData data in _tempDrawData) {
      if (data.top! <= state.widget.height &&
          data.left! <= state.widget.width) {
        //构建文字
        ui.ParagraphBuilder paragraphBuilder =
            ui.ParagraphBuilder(ui.ParagraphStyle())
              ..pushStyle(ui.TextStyle(
                  color: state.widget.textColor, fontSize: state.widget.fontSize))
              ..addText(data.text);
        //先初始化paint2的颜色
        paint2.color = state.widget.tableColor;
        //表格有指定颜色的颜色
        if (state.widget.colorList.isNotEmpty) {
          for (TableColor tableColor in state.widget.colorList) {
            if (tableColor is RowColor && tableColor.index == data.y) {
              paint2.color = tableColor.color;
            } else if (tableColor is ColumnColor &&
                tableColor.index == data.x) {
              paint2.color = tableColor.color;
            }
          }
        }

        ///画表格背景
        canvas.drawRect(
            Rect.fromLTWH(data.left!, data.top!, data.width!, data.height!),
            paint2);

        //画笔颜色调整，主要针点击背景覆盖层和边框绘制
        if ((_opLongPressChosenX != -1 && data.x == _opLongPressChosenX) ||
            (_opLongPressChosenY != -1 && data.y == _opLongPressChosenY) ||
            (_opIsLongPressChosenXY && (data.x == 0 || data.y == 0))) {
          paint2.color = state.widget.tableLongPressChosenColor;
          paint1.color = state.widget.tableLongPressChosenBorderColor;

          ///画表格覆盖背景
          canvas.drawRect(
              Rect.fromLTWH(data.left!, data.top!, data.width!, data.height!),
              paint2);
        } else if ((_opClickChosenX != -1 && data.x == _opClickChosenX) ||
            (_opClickChosenY != -1 && data.y == _opClickChosenY) ||
            (_opIsClickChosenXY && (data.x == 0 || data.y == 0))) {
          paint2.color = state.widget.tableClickChosenColor;
          paint1.color = state.widget.tableClickChosenBorderColor;

          ///画表格覆盖背景
          canvas.drawRect(
              Rect.fromLTWH(data.left!, data.top!, data.width!, data.height!),
              paint2);
        }

        ///画表格边框
        canvas.drawRect(
            Rect.fromLTWH(data.left!, data.top!, data.width!, data.height!),
            paint1);

        ///画表格文本
        canvas.drawParagraph(
            paragraphBuilder.build()
              ..layout(ui.ParagraphConstraints(width: size.width)),
            Offset(data.left!, data.top!));
      }
    }
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}

abstract class TableColor {
  final int index;
  final Color color;

  const TableColor(this.index, this.color);
}

class RowColor extends TableColor {
  const RowColor(super.index, super.color);
}

class ColumnColor extends TableColor {
  const ColumnColor(super.index, super.color);
}

class ITableData {
  final String text;
  double? left;
  double? top;
  double? width;
  double? height;
  int? y;
  int? x;
  int? level = 0;

  ITableData(this.text,
      {this.left,
      this.top,
      this.width,
      this.height,
      this.y,
      this.x,
      this.level});

  @override
  String toString() {
    return "text=$text,left=$left,top=$top,width=$width,height=$height,row=$y,column=$x,level=$level";
  }
}

class _TableUtils {
  /// 单元格宽度反向长度列表
  static List<double> reversalCellWidths(
      int xLength, List<List<double>> xWidthList) {
    List<double> totalReversalCellWidthList = [];
    double totalReversalCellWidth = 0;
    for (int i = xLength - 1; i >= 0; i--) {
      totalReversalCellWidth += xWidthList[i][1];
      totalReversalCellWidthList.add(totalReversalCellWidth);
    }
    return totalReversalCellWidthList;
  }

  /// 单元格高度反向高度列表
  static List<double> reversalCellHeights(
      int yLength, List<List<double>> yHeightList) {
    List<double> totalReversalCellHeightList = [];
    double totalReversalCellHeight = 0;
    for (int i = yLength - 1; i >= 0; i--) {
      totalReversalCellHeight += yHeightList[i][1];
      totalReversalCellHeightList.add(totalReversalCellHeight);
    }
    return totalReversalCellHeightList;
  }

  /// 获取表格宽高
  static double getTableRealWidth(List<List<double>> xWidthList) {
    double totalWidth = 0;
    for (int i = 0; i < xWidthList.length; i++) {
      totalWidth += xWidthList[i][1];
    }
    return totalWidth;
  }

  /// 获取表格宽高
  static double getTableRealHeight(List<List<double>> yHeightList) {
    double totalHeight = 0;
    for (int i = 0; i < yHeightList.length; i++) {
      totalHeight += yHeightList[i][1];
    }
    return totalHeight;
  }
}

• 使用

构建测试数据：

class TestTableData extends ITableData {
  TestTableData(super.text);
}


List<List<TestTableData>> _getTableTestData2() {
    //模拟数据
    List<List<TestTableData>> data = [];
    Random random = Random();

    for (int i = 0; i < 20; i++) {
      List<TestTableData> dataList = [];
      for (int j = 0; j < 10; j++) {
        int seed = random.nextInt(100);
        dataList.add(TestTableData(" $seed "));
      }
      data.add(dataList);
    }
    return data;
}

使用：

KqTable<TestTableData>(
    data: _getTableTestData2(),
    onTap: (TestTableData data) {
        KqToast.showNormal(data.text);
    },
)

代码注释全面，有需要的朋友可以直接撸，如有问题，欢迎指正。