Qt——自定义控件温度计

sycmancia2026-08-12 9:28

QPainter实现一个温度计,如下图所示:

gif如下所示:

1.代码实现原理

首先实现一个外圆框，效果如下所示:

外圆框代码如下所示：

cpp 复制代码

void TempUI::drawControlBackColor(QPainter& paint)
{
    paint.save();

    int dy1 = (height() - _realHeight)/2;
    paint.translate(width()/2, height() - dy1 -_bootomCircleRadius);
    paint.setBrush(Qt::white);
    paint.drawEllipse(QPointF(0, 0), _bootomCircleRadius, _bootomCircleRadius);

    paint.drawRect(-_topProgressBarWidth/2, -_bootomCircleRadius-_topProgressBarHeight
                   , _topProgressBarWidth, _topProgressBarHeight + _bootomCircleRadius*0.3);


    paint.restore();
}

实现好后就可以在该外圆框下叠加绘图，这样就可以实现一个多色的温度计控。

2.控件示例实现

提供了一个setRange(int value, int min, int max)函数，可以设置温度计的最小值和最大值,当前值：

cpp 复制代码

TempUI::setRange(int value, int min, int max, int scaleTextCnt = 11);

比如设置：

cpp 复制代码

setRange(50 , -50 , 50, 11);        // 当前值50, 范围-50~50,刻度文本数量11

效果如下所示：