Flutter纯手工绘制定制表格控件Table

迷南。 2024-03-26 20:18 63阅读 0赞

该项目为flutter表格的初级版，后续更完善的版本已发布文章：[Flutter用700行代码纯手工自定义绘制表格控件KqTable![icon-default.png?t=N176][icon-default.png_t_N176]https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/ba83e22b5fbb4ca5b47b85e100196356.png][Flutter_700_KqTable_icon-default.png_t_N176_icon-default.png_t_N176_https_blog.csdn.net_u012800952_article_details_129549252_spm_1001.2014.3001.5502]

*  **演示**

![b45bc4a4fb064b5e8e394d2547fead08.png][]![8c14150776cf4f3abf0e0afd7321d160.png][]

*  **功能**

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

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

**3.支持控件宽高设置。**

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

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

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

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

**8.支持列宽度拖拽，在第一行位置按住列分隔线便可拖拽列宽度。**

*  **代码**

import 'package:flutter/material.dart';
    import 'dart:ui' as ui;
    
    class KqTable<T> 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;
    
      /// 上下左右固定行数值[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 = Colors.blueAccent,
          this.lockList = const [1, 0, 1, 0],
          this.colorList = const [
            RowColor(0, Colors.grey),
            RowColor(5, Colors.grey),
            ColumnColor(0, Colors.grey),
            ColumnColor(6, Colors.grey)
          ],
          this.onTap});
    
      @override
      State<StatefulWidget> createState() => _KqTableState<T>();
    }
    
    class _KqTableState<T> extends State<KqTable<T>> {
      ///边线判断误差，用于判定拖拽列宽时是否点击在列线上的判定
      final _columnWidthOffset = 4;
    
      /// x方向偏移量
      double _offsetDx = 0;
    
      /// y方向偏移量
      double _offsetDy = 0;
    
      /// x方向误差量
      double _diffOffsetDx = 0;
    
      /// y方向误差量
      double _diffOffsetDy = 0;
    
      /// 行数
      int _rowLength = 0;
    
      /// 列数
      int _columnLength = 0;
    
      /// 每列的行文本最大宽度列表[[原宽度,调整后宽度],[原宽度,调整后宽度],...]
      final List<List<double>> _rowWidthList = [];
    
      double _columnHeight = 0;
    
      /// 表格总宽度
      double _tableWidth = 0;
    
      /// 表格总高度
      double _tableHeight = 0;
    
      /// 按下时当前单元格的对象
      T? _operateTableData;
    
      /// 当前手势是否滑动
      bool _operateIsMove = false;
    
      /// 当前是否处于拖拽状态
      bool _operateIsDrag = false;
    
      /// 当前正在拖拽第几列的边线
      int _operateColumnLineIndex = 0;
    
      /// 当前正在拖拽边线前面累加的宽度值
      double _operateTotalWidth = 0;
    
      @override
      void initState() {
        super.initState();
        _initData();
      }
    
      void _initData() {
        _rowLength = widget.data[0].length;
        _columnLength = widget.data.length;
        for (int i = 0; i < _rowLength; i++) {
          double maxWidth = 0;
          for (int j = 0; j < _columnLength; j++) {
            String str = widget.data[j][i] as String;
            TextPainter textPainter = TextPainter(
                text: TextSpan(
                    text: str,
                    style: TextStyle(
                        color: Colors.redAccent, fontSize: widget.fontSize)),
                maxLines: 1,
                textDirection: TextDirection.ltr)
              ..layout(minWidth: 0, maxWidth: double.infinity);
            if (maxWidth < textPainter.width) {
              maxWidth = textPainter.width;
            }
            _columnHeight = textPainter.height;
          }
          _rowWidthList.add([maxWidth, maxWidth]);
          _tableWidth += maxWidth;
        }
        _tableHeight = _columnHeight * _columnLength;
      }
    
      @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,
                      _rowLength, _columnLength, _rowWidthList, _columnHeight),
                ),
                onPointerDown: (PointerDownEvent event) {
                  _operateIsMove = false;
                  _operateIsDrag = false;
                  //事件点击的中心位置
                  Offset? eventOffset = event.localPosition;
                  _diffOffsetDx = eventOffset.dx - _offsetDx;
                  _diffOffsetDy = eventOffset.dy - _offsetDy;
    
                  ///判定按下在哪个单元格，并获取单元格内容
                  //点击的横向坐标
                  int r = 0;
                  //点击的纵向坐标
                  int c = 0;
                  if (eventOffset.dy - widget.lockList[0] * _columnHeight < 0) {}
                  //计算横向坐标
                  List<double> totalReversalRowWidthList = [];
                  double totalReversalRowWidth = 0;
                  for (int i = _rowLength - 1; i >= 0; i--) {
                    totalReversalRowWidth += _rowWidthList[i][1];
                    totalReversalRowWidthList.add(totalReversalRowWidth);
                  }
                  double totalWidth = 0;
                  for (int i = 0; i < _rowWidthList.length; i++) {
                    totalWidth += _rowWidthList[i][1];
                    if (i < widget.lockList[2]) {
                      //左
                      if (eventOffset.dx.abs() - totalWidth < 0) {
                        c = i;
                        break;
                      }
                    } else {
                      //中间
                      if ((eventOffset.dx - _offsetDx).abs() - totalWidth < 0) {
                        c = i;
                        break;
                      }
                    }
                  }
                  //右
                  if (widget.lockList[3] != 0 &&
                      eventOffset.dx -
                              (widget.width -
                                  totalReversalRowWidthList[
                                      widget.lockList[3] - 1]) >
                          0) {
                    for (int i = 0; i < totalReversalRowWidthList.length; i++) {
                      if (eventOffset.dx -
                              (widget.width - totalReversalRowWidthList[i]) >
                          0) {
                        c = _rowLength - i - 1;
                        break;
                      }
                    }
                  }
                  //计算纵向坐标
                  if (eventOffset.dy - widget.lockList[0] * _columnHeight < 0) {
                    //上
                    r = (eventOffset.dy).abs() ~/ _columnHeight;
                  } else if (eventOffset.dy -
                          (widget.height - widget.lockList[1] * _columnHeight) >
                      0) {
                    //下
                    r = _columnLength -
                        (widget.lockList[1] -
                            (eventOffset.dy -
                                        (widget.height -
                                            widget.lockList[1] * _columnHeight))
                                    .abs() ~/
                                _columnHeight);
                  } else {
                    //中间
                    r = (eventOffset.dy - _offsetDy).abs() ~/ _columnHeight;
                  }
                  //获取坐标对应的值
                  _operateTableData = widget.data[r][c];
    
                  /// 判断列宽度拖拽
                  //点击在第一行行高位置的row的边线上便认定为正在拖拽列宽度
                  _operateTotalWidth = 0;
                  totalWidth = 0;
                  for (int i = 0; i < _rowWidthList.length; i++) {
                    totalWidth += _rowWidthList[i][1];
                    if (((eventOffset.dx - _offsetDx).abs() - totalWidth).abs() <
                            _columnWidthOffset &&
                        (eventOffset.dy - _offsetDy).abs() < _columnHeight) {
                      _operateIsDrag = true;
                      _operateColumnLineIndex = i;
                      break;
                    }
                    _operateTotalWidth += _rowWidthList[i][1];
                  }
                },
                onPointerMove: (PointerMoveEvent event) {
                  _operateIsMove = true;
                  //事件点击的中心位置
                  Offset? eventOffset = event.localPosition;
                  if (!_operateIsDrag) {
                    //表格移动
                    setState(() {
                      _offsetDx = eventOffset.dx - _diffOffsetDx;
                      _offsetDy = eventOffset.dy - _diffOffsetDy;
                      // 边界处理
                      // 当有固定行时
                      // 上边限定
                      if (_offsetDy >= 0) {
                        _offsetDy = 0;
                      }
                      // 左边限定
                      if (_offsetDx >= 0) {
                        _offsetDx = 0;
                      }
                      // 右边限定
                      double rightOffset = 0;
                      for (int i = 0; i < widget.lockList[3]; i++) {
                        rightOffset +=
                            _rowWidthList[_rowWidthList.length - i - 1][1];
                      }
                      if (_offsetDx <= (widget.width + rightOffset) - _tableWidth) {
                        _offsetDx = (widget.width + rightOffset) - _tableWidth;
                      }
                      // 下边限定
                      if (_offsetDy <=
                          (widget.height + widget.lockList[1] * _columnHeight) -
                              _tableHeight) {
                        _offsetDy =
                            (widget.height + widget.lockList[1] * _columnHeight) -
                                _tableHeight;
                      }
                      //当表格宽度小于控件宽度，则不能水平移动
                      if (_tableWidth <= widget.width) {
                        _offsetDx = 0;
                      }
                      //当表格高度小于控件高度，则不能上下移动
                      if (_tableHeight <= widget.height) {
                        _offsetDy = 0;
                      }
                    });
                  } else {
                    //表格row拖拽
                    setState(() {
                      if (eventOffset.dx - _operateTotalWidth >=
                          _rowWidthList[_operateColumnLineIndex][0]) {
                        _rowWidthList[_operateColumnLineIndex][1] =
                            eventOffset.dx - _operateTotalWidth;
                      } else {
                        _rowWidthList[_operateColumnLineIndex][1] =
                            _rowWidthList[_operateColumnLineIndex][0];
                      }
                    });
                  }
                },
                onPointerUp: (PointerUpEvent event) {
                  //判定没有滑动则为点击
                  if (!_operateIsMove) {
                    widget.onTap?.call(_operateTableData 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 _rowLength;
    
      /// 列数
      final int _columnLength;
    
      /// 每列的行文本最大宽度列表
      final List<List<double>> _rowWidthList;
    
      /// 每行的文本高度
      final double _columnHeight;
    
      _TablePainter(
          this.state,
          this._offsetDx,
          this._offsetDy,
          this._data,
          this._rowLength,
          this._columnLength,
          this._rowWidthList,
          this._columnHeight);
    
      @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) {
        double totalColumnWidth = 0;
        double columnWidth = 0;
        List<double> totalReversalRowWidthList = [];
        double totalReversalRowWidth = 0;
        for (int i = _rowLength - 1; i >= 0; i--) {
          totalReversalRowWidth += _rowWidthList[i][1];
          totalReversalRowWidthList.add(totalReversalRowWidth);
        }
        for (int i = 0; i < _rowLength; i++) {
          totalColumnWidth += columnWidth;
          columnWidth = _rowWidthList[i][1];
          for (int j = 0; j < _columnLength; j++) {
            String str = _data![j][i] as String;
            if (j < state.widget.lockList[0]) {
              //上
              if (i < state.widget.lockList[2]) {
                //左上角
                drawTableAdd(str, totalColumnWidth, _columnHeight * j, columnWidth,
                    _columnHeight, j, i,
                    level: 2);
              } else if (i >= _rowLength - state.widget.lockList[3]) {
                //右上角
                drawTableAdd(
                    str,
                    state.widget.width -
                        totalReversalRowWidthList[_rowLength - i - 1],
                    _columnHeight * j,
                    columnWidth,
                    _columnHeight,
                    j,
                    i,
                    level: 2);
              } else {
                drawTableAdd(str, totalColumnWidth + _offsetDx, _columnHeight * j,
                    columnWidth, _columnHeight, j, i,
                    level: 1);
              }
            } else if (i < state.widget.lockList[2]) {
              //左
              if (j >= _columnLength - state.widget.lockList[1]) {
                //左下角
                drawTableAdd(
                    str,
                    totalColumnWidth,
                    state.widget.height - _columnHeight * (_columnLength - j),
                    columnWidth,
                    _columnHeight,
                    j,
                    i,
                    level: 2);
              } else {
                drawTableAdd(str, totalColumnWidth, _columnHeight * j + _offsetDy,
                    columnWidth, _columnHeight, j, i,
                    level: 1);
              }
            } else if (j >= _columnLength - state.widget.lockList[1]) {
              //下
              if (i >= _rowLength - state.widget.lockList[3]) {
                // 右下角
                drawTableAdd(
                    str,
                    state.widget.width -
                        totalReversalRowWidthList[_rowLength - i - 1],
                    state.widget.height - _columnHeight * (_columnLength - j),
                    columnWidth,
                    _columnHeight,
                    j,
                    i,
                    level: 2);
              } else {
                drawTableAdd(
                    str,
                    totalColumnWidth + _offsetDx,
                    state.widget.height - _columnHeight * (_columnLength - j),
                    columnWidth,
                    _columnHeight,
                    j,
                    i,
                    level: 1);
              }
            } else if (i >= _rowLength - state.widget.lockList[3]) {
              //右
              drawTableAdd(
                  str,
                  state.widget.width -
                      totalReversalRowWidthList[_rowLength - i - 1],
                  _columnHeight * j + _offsetDy,
                  columnWidth,
                  _columnHeight,
                  j,
                  i,
                  level: 1);
            } else {
              drawTableAdd(str, totalColumnWidth + _offsetDx,
                  _columnHeight * j + _offsetDy, columnWidth, _columnHeight, j, i);
            }
          }
        }
    
        drawTableReal(canvas, size, paint1, paint2);
      }
    
      /// 绘制对象缓存
      final List<_TempDrawData> tempDrawData = <_TempDrawData>[];
    
      /// 把需要绘制的数据先放入内存中
      void drawTableAdd(String text, double left, double top, double width,
          double height, int row, int column,
          {int? level}) {
        tempDrawData.add(
            _TempDrawData(text, left, top, width, height, row, column, level ?? 0));
      }
    
      /// 遍历存好的数据进行绘制
      void drawTableReal(Canvas canvas, Size size, Paint paint1, Paint paint2) {
        //绘制层级排序
        tempDrawData.sort((a, b) => a.level.compareTo(b.level));
        //绘制
        for (_TempDrawData data in tempDrawData) {
          //构建文字
          ui.ParagraphBuilder paragraphBuilder =
              ui.ParagraphBuilder(ui.ParagraphStyle())
                ..pushStyle(ui.TextStyle(
                    color: Colors.redAccent, 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.row) {
                paint2.color = tableColor.color;
              } else if (tableColor is ColumnColor &&
                  tableColor.index == data.column) {
                paint2.color = tableColor.color;
              }
            }
          }
          //画表格背景
          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;
      }
    }
    
    class _TempDrawData {
      String text;
      double left;
      double top;
      double width;
      double height;
      int row;
      int column;
      int level = 0;
    
      _TempDrawData(this.text, this.left, this.top, this.width, this.height,
          this.row, this.column, this.level);
    }
    
    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);
    }

代码拷贝下来可以直接使用，注释非常多，有看不明白的地方，可以讨论。

*  **使用**

构建测试数据：

List<List<String>> _getTableTestData() {
        //模拟数据
        List<List<String>> data = [];
        Random random = Random();
    
        for (int i = 0; i < 50; i++) {
          List<String> strList = [];
          for (int j = 0; j < 20; j++) {
            int seed = random.nextInt(100);
            strList.add(" $seed ");
          }
          data.add(strList);
        }
        return data;
      }

使用：

KqTable<String>(
        data: _getTableTestData(),
        onTap: (String data) {
            print(data);
        },
    ),

[icon-default.png_t_N176]: https://csdnimg.cn/release/blog_editor_html/release2.2.3/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=N176
[Flutter_700_KqTable_icon-default.png_t_N176_icon-default.png_t_N176_https_blog.csdn.net_u012800952_article_details_129549252_spm_1001.2014.3001.5502]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/ba83e22b5fbb4ca5b47b85e100196356.png
[b45bc4a4fb064b5e8e394d2547fead08.png]: https://img-blog.csdnimg.cn/b45bc4a4fb064b5e8e394d2547fead08.png
[8c14150776cf4f3abf0e0afd7321d160.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/501ee3e064874828b24e49a0459287ee.png