Qt 常用控件指南写到第五篇我决定把按钮、输入框、布局这些东西放一放集中聊另一类很多人做项目到中后期才会真正重视的控件数据展示与可视化面板。这几类控件在平时的教学示例里出镜率不高但真正做桌面工具、上位机、看板类应用时绕不开痛点也最集中——表格数据一大就卡、图表不知道怎么集成、想画个自定义曲线无从下手。这篇文章主要解决四个实战问题QTableWidget 在大数据量下的卡顿换血方案、QChart 图表集成和导出、用 QPainter 自绘控件的基本套路以及列表拖动排序和对话框回传属性值这两个高频交互细节。如果你正在用 QTableWidget 做几千行数据已经觉得不对劲或者项目里要嵌曲线图又不想引入太重的第三方库再或者想摆脱只会堆标准控件的阶段那这一篇应该能给你不少直接可用的东西。代码部分我会以关键片段为主尽量不做无意义的粘贴方便你直接抄进自己的工程里验证。1. 数据表格从 QTableWidget 换到 QTableView 自定义模型没你想的那么难1.1 为什么卡顿从“每格一个对象”到“按需取数”先说一个很多人没意识到的问题QTableWidget 在官方文档里被定位为“方便版”的表格适合数据量小、临时展示、快速 Demo。你用setItem(row, col, new QTableWidgetItem(...))塞进去的每一个单元格本质上都是一个QTableWidgetItem对象。一万行五列就是五万个对象这些对象还得同时处理文字、图标、字体、对齐方式等一大堆属性。数据少的时候看不出来一旦到两三万行内存占用和滚动时的重绘开销立刻就会拖垮界面。这事的本质是 QTableWidget 把“数据”和“显示”强耦合在一起了。而 Qt 官方推荐的 Model/View 架构思路正好相反视图不持有任何业务数据它只负责“问模型要数据”。QTableView 在滚动时只会创建当前可见区域的绘制委托和单元格对象滚出屏幕的部分该销毁就销毁该复用就复用。你可以把这两者理解为印刷好的几百页书和图书馆的实时检索台——书的页数再多检索台前永远只摆着你现在需要的那一页。所以当你手头的表格数据量超过五千行、还要频繁滚动和排序时我强烈建议直接切到 QTableView 自定义模型。这套东西第一次接触会觉得有概念门槛一旦跨过去后面处理十万行、二十万行数据也只是改改模型内部逻辑的问题。1.2 自定义模型最小实现四个函数 dataChangedQAbstractTableModel 是个抽象类但你平时实际需要实现的东西并不多。对一个只读表格来说核心就是rowCount、columnCount、data这三个函数外加把数据变更通知给视图。下面这个最简模型我几乎每个项目里都会先用它打个底class BigTableModel : public QAbstractTableModel { Q_OBJECT public: explicit BigTableModel(QObject *parent nullptr) : QAbstractTableModel(parent) {} int rowCount(const QModelIndex parent QModelIndex()) const override { return parent.isValid() ? 0 : m_totalRows; } int columnCount(const QModelIndex parent QModelIndex()) const override { return parent.isValid() ? 0 : m_columns; } QVariant data(const QModelIndex index, int role Qt::DisplayRole) const override { if (!index.isValid()) return QVariant(); if (role Qt::DisplayRole) { const QVariantList row m_cache.object(index.row()); if (!row.isEmpty()) return row.at(index.column()); return QStringLiteral(…加载中…); } if (role Qt::TextAlignmentRole) return QVariant(Qt::AlignCenter); return QVariant(); } private: int m_totalRows 0; int m_columns 0; QCacheint, QVariantList m_cache; };用的时候只需要QTableView *view new QTableView(this); view-setModel(model);就完事了。注意data里我没有直接返回一个临时拼接的字符串而是先从QCache里取整行数据。这是大数据表格性能的关键点视图在绘制同一行不同列时会反复调用data如果每次都去解析、转运、拼接性能消耗会成倍放大。缓存整行一次解析多次使用能明显减少重复计算。还有个新手容易忽略的细节模型内部数据变了必须通知视图。要刷新某一行就用emit dataChanged(index, index, {Qt::DisplayRole})第三参数字段指定角色可以避免不必要的全面重绘。要插入或删除行则需要在操作前后调用beginInsertRows/endInsertRows这两行是界面的“数据契约”漏了它们视图根本不知道数据量变了这也是后面要说的“只显示几十行”问题的重要来源之一。1.3 懒加载与局部刷新数据量大也不卡的实践套路自定义模型本身已经解决了很多卡顿问题但如果你要面对的是几十上百 MB 的日志文件内存里不能全放那还需要进一步做按需加载。我常用的方案是这样的模型先知道总行数和每行的数据源位置但真正解析数据推迟到data被调用时。比如面向一个大文本文件后台线程只负责按行号定位文件偏移量然后把“这行的原始文本”读出来放进一个QCacheint, QString模型再从缓存里按分隔符拆成QVariantList。QCache有容量上限访问不频繁的行会被自动淘汰内存永远保持在一个可控范围。有人可能会问那滚动条滚动时瞬间会请求好多行会不会还是卡会。所以更稳的做法是加一个“可见区预取”逻辑监听视图的滚动条valueChanged信号计算出当前可见行的范围后把前后各多取几百行排队交给后台线程去加载。这样用户真正滚到那个位置时数据已经在缓存里了体验上几乎是秒开。后台线程和 UI 的数据交换我一般用信号槽加Qt::QueuedConnection。最简单的写法是后台线程解析完一批数据后发一个自定义信号主线程槽函数里往模型的缓存里放数据再dataChanged精确通知视图。核心原则只有一条模型里的缓存容器和后台线程不要直接共享所有写入都通过信号排队回到主线程完成。否则一旦两个线程同时碰QHash或QCache崩溃会来得又快又诡异。1.4 “视图只显示几十行”的排查记录搜索 Qt 相关问题时“QTableView 加自定义模型后只显示几十行”这个描述出现的频率极高我帮人调过几次归结下来基本是下面几种原因第一beginInsertRows/endInsertRows没写或者数据塞进模型时没有调用这些通知函数。视图最后一次拿到的行数是最初的空值等数据进来它根本不知道自然只画了几十行。正确做法是一次性插入十万行时在insertRows前调一次beginInsertRows(QModelIndex(), 0, rowCount-1)插完立刻endInsertRows视图只需一次全量布局反而比重多次局部通知更快。第二后台线程在疯狂往缓存里塞数据但主线程没有收到刷新信号界面停在旧状态。这个问题看起来像“只显示几十行”实际是“数据一直没被通知重绘”。排查时重点看dataChanged有没有在正确线程发出。第三rowCount函数里做了耗时操作。有人习惯在rowCount里去统计文件总行数但这函数会被视图高频调用一旦里面有磁盘 IO滚动条拖一下、窗口 resize 一下UI 线程就停顿。正确做法是启动时后台统计好总行数存成一个普通变量之后rowCount只做一次内存读取。还有一种情况是QCache容量设得太小用户滚远一点后缓存里根本没有对应行的数据data返回“加载中”看起来就像数据缺了一块。这个好解决容量设成可见行数的几十倍或者滚动停止后再触发一次预取。1.5 排序、列宽与委托的一些心得开启表格排序很简单view-setSortingEnabled(true)就行。但自定义模型要配合实现sort函数否则点了标头毫无反应。排序函数里要注意排完序后先layoutAboutToBeChanged数据改完再layoutChanged否则视图里的选区、滚动位置会错乱。大数据量排序是重活最好也丢到后台线程把结果集替回内存后通知模型刷新。列宽这里要特别提醒QHeaderView::ResizeToContents看起来省事内部会逐个单元格去取 sizeHint几千行可能不明显几万行就等着卡死吧。我个人的习惯是固定前几列宽度剩余列用Stretch拉伸或者直接Interactive让用户自己拖。如果你确实需要根据内容自适应列宽只在前几百行采样算一个平均宽度再手动resizeColumnToContents别让视图扫全表。如果单元格里不是纯文本比如要显示进度条、状态灯、迷你趋势图就需要上QStyledItemDelegate。delegate 的paint函数只在可见区域调用所以哪怕数据量很大额外绘制开销也可控。这块内容比较独立这次先不展开后续系列里可以单独开一篇专门讲委托与自绘单元格。2. QChart 图表控件嵌入看板、缩放与导出的完整套路2.1 从引入模块到画出第一条曲线的全过程Qt Charts 是 Qt 官方自带的图表模块不依赖第三方开源库做曲线图、柱状图、饼图都够用。如果你的项目用的是 qmake在.pro文件里加一句QT charts用 CMake 的话在find_package(Qt6 COMPONENTS Charts)Qt5 就是Qt5Charts之后链一下Qt::Charts。源码里别忘了#include QtCharts再QT_CHARTS_USE_NAMESPACE。下面是最小可运行的曲线代码画一条 200 个点的正弦曲线QT_CHARTS_USE_NAMESPACE QLineSeries *series new QLineSeries(); for (int i 0; i 200; i) series-append(i, qSin(i / 20.0)); QChart *chart new QChart(); chart-addSeries(series); chart-createDefaultAxes(); chart-legend()-hide(); chart-setTitle(QStringLiteral(正弦曲线)); QChartView *view new QChartView(chart); view-setRenderHint(QPainter::Antialiasing); ui-verticalLayout-addWidget(view);createDefaultAxes会根据 series 里的数据范围自动生成坐标轴省去手动设定的麻烦。需要注意QChart 继承自 QGraphicsWidget它自己不是一个普通 QWidget所以最常见的嵌入方式就是用 QChartView 包一层再加进布局。有人说能不能把 QChart 塞进 QGraphicsScene 里自己管理当然也可以但普通看板应用没必要增加复杂度QChartView 就是官方给你准备好的可视化容器。2.2 缩放、平移、还原让用户自由看细节QChartView 原生支持用橡皮筋框选放大view-setRubberBand(QChartView::RectangleRubberBand)。用户按住左键拖出一个矩形区域松手后图表自动放大到那个区域。这个交互很直观适合“看细节”的场景。只靠框选还不够因为用户想看全貌时得右键反复缩小很别扭。我一般还会在子类里重写wheelEvent让鼠标滚轮也能缩放。滚轮缩放的要点是缩放中心跟着鼠标位置走void ZoomChartView::wheelEvent(QWheelEvent *event) { if (event-angleDelta().y() 0) chart()-zoom(1.2); else chart()-zoom(1.0 / 1.2); event-accept(); }zoom默认围绕图表中心缩放你也可以调用chart()-scroll(dx, dy)辅助平移或者让用户按住空格键拖动画布。最容易踩的坑是缩放层级失控用户一顿操作图表不知道缩到哪去了。控制办法有两个一是限制chart-setZoomInFactor和setZoomOutFactor的步长比如默认 1.5二是在界面上放一个“重置视图”按钮点击后chart()-zoomReset()一键回到初始范围。2.3 图表导出 PNG离屏渲染的三种方式图表导出的需求经常在报告、截图功能里出现。我最初试过直接widget-grab()截图能出图但分辨率固定而且如果图表显示窗口太小导出来的图也小。更推荐的方式是离屏渲染出大图QImage image(chart-size().toSize(), QImage::Format_ARGB32); image.fill(Qt::transparent); QPainter painter(image); chart-scene()-render(painter); painter.end(); image.save(QStringLiteral(chart.png));原理是 QChart 挂在 QChartView 内部的 QGraphicsScene 上我们可以直接调scene()-render把整个场景画到一张自定义尺寸的 QImage 上。想导出高分辨率图就把 QImage 建得大一点再配合setDevicePixelRatio处理高 DPI导出的图片清晰度会好很多。另一种做法是用chart-paint()另传一个 QPainter但对新手来说容易漏掉背景填充和边界设置导致导出图背景是黑的。用scene()-render是更稳的路线。图像格式方面默认Format_ARGB32配合透明背景适合叠加到其他界面上如果业务方要求白底就在渲染前先用白色fillRect填充。另外别忘了导出前painter.setRenderHint(QPainter::Antialiasing)否则锯齿会很明显导出图显得特别粗糙。2.4 数据点上千过万时怎么做实时刷新实时波形图是最容易把 QChart 干趴下的场景。典型错误是每来一个新数据就append一个点点上万之后你会发现 QChart 每次重绘都在重复遍历所有点帧率骤降CPU 直接拉满。我的做法分三层第一层是控制点数总量。维护一个上限比如 5000 点新点来了先append(x, y)再把最老的旧点用removePoints(0, 1)移除。这两个操作放在同一批里QChart 会把它们合并为一次重绘减少闪烁。第二层是数据重采样。如果是传感器高频数据每秒上千个点其实根本展示不了那么多细节我会在后台线程里做抽稀保留每个时间窗口内的最大值和最小值其他点丢弃。这样画出来的波形能保留毛刺和峰谷但数据点数能降一个数量级。第三层是关动画。chart-setAnimationOptions(QChart::NoAnimation)是实时刷新的必选项。动画效果平时看着炫但实时数据每秒刷新几十次动画叠加只会让图表处理不过来。实时场景下流畅比美观重要得多。另外坐标轴的数值格式化是个容易被忽略的小细节。比如axisX-setLabelFormat(%.2f)可以把横轴标签保留两位小数避免出现一串意义不明的小数点。double 转字符串显示也常在这里用上QString::number(value, f, 2)比QVariant::toString更可控不会在千分位、科学计数法上闹笑话。3. 自制绘图控件用 QPainter 画出任何界面元素3.1 在 paintEvent 里规规矩矩地画Qt 的自绘控件本质就是一句话重写paintEvent在里面用 QPainter 画画。很多第一次接触的人会踩一个坑就是在其他函数里直接调用update()后立刻用 painter 画这是不对的。Qt 有一套“请求重绘—系统调度—统一绘制”的机制update()只是请求系统在合适的时机触发paintEvent绘图逻辑必须全部收敛在paintEvent里。QPainter 的基本用法无非是选画笔setPen、选画刷setBrush、然后画矩形、画线、画路径。有一个经验之谈先在构造 QPainter 时setRenderHint(QPainter::Antialiasing, true)打开抗锯齿否则画出来的曲线和圆形边缘全是锯齿。绘制一组元素前用painter.save()保存当前状态结束后painter.restore()防止后面代码拿到一个被改过的画笔状态。void CustomWidget::paintEvent(QPaintEvent *event) { Q_UNUSED(event); QPainter painter(this); painter.setRenderHint(QPainter::Antialiasing, true); painter.fillRect(rect(), QColor(18, 24, 38)); QPen pen(QColor(220, 220, 220), 1); painter.setPen(pen); painter.drawLine(0, height() / 2, width(), height() / 2); painter.drawLine(width() / 2, 0, width() / 2, height()); }3.2 逻辑坐标与像素不用再怕高 DPI自绘控件另一个常见坑是坐标系统。默认情况下QPainter 的坐标单位是“像素”窗口大小一变、高分屏 DPI 一调整画出来的图形就可能比例失调。两种情况我都遇到过一是把窗口从普通屏拖到高分屏图形显示尺寸直接缩小一半二是控件被布局拉伸后图形没有跟着缩放显得很死板。解决思路是建立“逻辑坐标—绘制坐标”的映射关系。最简单的办法是在paintEvent里根据当前width()和height()动态计算坐标。比如画一个波形图业务数据里 y 的真实范围是 -1.0 到 1.0映射到控件屏幕上的公式就是screenY (1.0 - value) * height() / 2.0。这样不管控件被拉大还是缩小曲线都能完整填充绘制区域。更进阶一点可以用 QPainter 自带的setWindow和setViewport把逻辑坐标范围映射到实际设备范围。我在自绘控件时更倾向于自己写映射函数因为逻辑更直观也方便处理三维投影这类复杂变换。遇到高分屏请一定记得检查devicePixelRatio()必要时创建离屏 QPixmap 时把setDevicePixelRatio(dpr)设好否则画出来的图在 200% 缩放下会模糊。3.3 一个示波器控件从数据到线条的完整实现光说不练假把式这里给一个简单的波形控件成品。它做的事情很简单外部调用setData塞入一组 QPointF 数据控件负责画背景网格和折线。class WaveformWidget : public QWidget { Q_OBJECT public: explicit WaveformWidget(QWidget *parent nullptr) : QWidget(parent) {} void setData(const QVectorQPointF points) { m_points points; update(); } protected: void paintEvent(QPaintEvent *event) override { Q_UNUSED(event); QPainter painter(this); painter.setRenderHint(QPainter::Antialiasing, true); painter.fillRect(rect(), QColor(16, 22, 34)); QPen gridPen(QColor(60, 70, 90), 1); painter.setPen(gridPen); for (int i 0; i 8; i) { double y i * height() / 8.0; painter.drawLine(QPointF(0, y), QPointF(width(), y)); } if (m_points.size() 2) return; QPen curvePen(QColor(64, 224, 208), 2); painter.setPen(curvePen); QPainterPath path; for (int i 0; i m_points.size(); i) { double x i * width() / double(m_points.size() - 1); double y (1.0 - m_points[i].y()) * height() / 2.0; if (i 0) path.moveTo(x, y); else path.lineTo(x, y); } painter.drawPath(path); } private: QVectorQPointF m_points; };这个控件的使用方式极其简单数据更新后调用一次setData即可。你可能会注意到外部线程可以直接往setData里塞数据吗不行跨线程更新 UI 属于典型的未定义行为轻则界面不刷新重则崩溃。正解是后台线程发信号主线程槽函数里接收数据后调用setData。需要更复杂的效果时可以在这个基础上加坐标轴文字、贴图、双缓冲缓存。如果绘制工作量特别大建议先在离屏 QPixmap 上画好再一次性drawPixmap到控件上避免绘制瞬间界面闪烁。3.4 三维曲线QOpenGLWidget 与第三方库的取舍热词里有“qt 绘制三维曲线”这个方向我也简单提一下。如果有三维曲线需求第一反应不应该是用 QPainter 硬扛因为 QPainter 本质是二维绘图引擎所有三维效果都要自己算投影矩阵工作量非常大。常用的路线有两条一是直接用 QOpenGLWidget 自己写顶点着色器和线段绘制灵活度最高但对 OpenGL 基础有要求二是用第三方库比如常见的QCustomPlot本身只支持二维三维要借助Qwt3D或自定义 OpenGL 包装。我的建议是除非项目要求特殊交互如旋转、剖切、点云选取否则尽量简化成一个二维曲线的多视角投影很多时候业务方要的只是“看上去是三维”而不是真正可交互的三维几何。自绘控件这件事到最后拼的不是 API 熟不熟练而是你把坐标变换、事件响应、性能优化串起来的能力。建议从小控件开始练比如仪表盘、信号灯、温度曲线等把这些东西都做过一遍再看到“我要一个自定义控件”的需求就不慌了。4. 拖动排序与对话框回传两个高频交互细节4.1 让列表项可以用鼠标拖动排序“拖动改变顺序栏”这类需求最典型的就是调整工具栏按钮顺序、设置页面的优先级列表。如果你用的是 QListWidget那实现成本低得超乎想象几行配置就能搞定listWidget-setDragDropMode(QAbstractItemView::InternalMove); listWidget-setDefaultDropAction(Qt::MoveAction); listWidget-setDragDropOverwriteMode(false);InternalMove告诉视图允许在内部拖动移动项目Qt::MoveAction把默认行为设为“移动而不是复制”setDragDropOverwriteMode(false)是为了避免拖到已有条目上时覆盖它而是插入到对应位置。很多人配置完之后发现能拖了但程序重启顺序又变回去了。这是因为你还没把新顺序持久化。监听 QAbstractItemModel 的rowsMoved信号在拖拽完成后把model-rowCount()循环一遍把所有文字取出来按顺序拼成一个 JSON 或 QSettings 写入本地下次启动恢复即可。这个信号携带的sourceParent、sourceRow、destinationParent、destinationRow参数可以帮你做更细粒度的业务处理比如拖动后刷新关联数据。4.2 对话框关闭后怎么把属性值带回主窗口“弹出窗体关闭后取回窗体的属性值”也是群里被反复问过的问题。很多人一开始的思路是“主窗口持有子窗口的指针关闭后通过指针访问成员变量”这个思路本身没错但用起来很危险——模态对话框 exec 返回后对象可能已经被销毁访问空指针的崩溃现场我见过不少。更稳的方案是分两种场景。第一种模态对话框在主窗口栈上创建对话框exec()阻塞等待结果关闭后直接读取对话框里的控件值顺序清晰、生命周期安全QDialog dlg(this); Ui::ConfigDlg uiDlg; uiDlg.setupUi(dlg); if (dlg.exec() QDialog::Accepted) { QString server uiDlg.serverEdit-text(); int port uiDlg.portSpin-value(); applyConfig(server, port); }第二种非模态对话框用户可能关掉窗口后才通知主窗口这时用信号最合适。子窗口在构造函数里定义好dataChanged(const QVariantMap )信号accept()或关闭窗口时把整页配置打包成QVariantMap发出来主窗口提前 connect 接收。这样主窗口完全不需要持有子窗口指针也不会出现悬垂指针问题。4.3 拖动操作背后的 mimeData 基础上面 QListWidget 的拖动排序看似简单其实底层走的是 Qt 的拖放协议。拖动开始时视图会把选中的数据编码成QMimeData放下时目标视图解码这些数据并决定插入位置。默认实现已经帮我们处理了文本数据所以InternalMove能直接工作。一旦你换成 QListView 配合自定义模型事情就变得稍微复杂一点。你需要在模型里重写mimeTypes、mimeData和dropMimeData三个函数。最简单的方式是沿用一个内置 MIME 类型比如application/x-qabstractitemmodeldatalist这是 QAbstractItemModel 自带的数据格式社区里的轮子也基本基于它。如果你要跨窗口拖放除了模型层的 MIME 编码还要在目标窗口设置setAcceptDrops(true)在dragEnterEvent里检查event-mimeData()-hasFormat(...)再决定接受还是拒绝。拖放这块看起来不起眼但稍微做复杂一点比如拖拽列表项到指定区域、拖拽后触发某个业务逻辑、跨应用拖文件进来调试起来非常折磨人。建议先把 QListWidget 的简单模式玩熟再逐层深入自定义模型不然一上来就啃dropMimeData很容易被各种event-ignore()和acceptProposedAction()搞晕。最后再分享一个小技巧不管是在表格、图表还是自绘控件的开发中遇到“界面卡顿但代码看不出问题”的情况先打开 Qt 自带的性能分析工具看看主线程调用栈通常你会发现瓶颈都集中在某几个高频函数里。表格的data、图表的append、自绘控件的paintEvent这三个函数是绝大多数性能问题的交汇点。把这三个地方的数据准备和绘制工作拆开该缓存的缓存该预取的预取Qt 控件的性能极限远比想象中高。