《Qt/UI美化实战课程》| 第五章自定义仪表盘（美观/高度定制/自适应大小）| 3. 使用仪表盘(2) 初始化数据

原创已于 2024-04-26 09:22:10 修改 · 655 阅读

12 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

《Qt/UI美化实战课程》

于 2024-04-26 09:11:28 首次发布

本文介绍了《Qt/UI美化实战课程》中的关键内容，包括无边框窗口、图标字体、官方图表QChart和QCustomPlot的使用，以及如何创建自定义仪表盘，实现监控日志高亮、动画效果和滑块与仪表盘联动。课程覆盖超过120讲，适合系统学习Qt界面设计的开发者。

《Qt/UI美化实战课程》新课首发

（1）无边框窗口（11讲）

（2）图标字体（10讲）

（3）官方图表QChart：曲线、柱状图、饼图（20+讲）

（4）第三方图表QCustomPlot：曲线、柱状图、饼图（20+讲）

（5）监控日志高亮（共 14 讲）

（6）仪表盘（16讲）

（7）天气预报（11+讲）

（8）基础控件（15+讲）

（9）高级控件（12+讲）

（10）精美换肤（15+讲）

详情参见个人主页的置顶视频（明王出品，必属精品）

需要系统跟明王学习的小伙伴：coding4096

（1）总课时：超 120+ 讲，每日更新

（2）讲课风格：从零新建项目，从零一行行写代码

（3）提供资料：视频教程+配套源码+详细笔记

本章将会从零实现一个自定义控件-仪表盘，它支持：

✅ 自定义起始角度、圆弧跨度

✅ 自定义圆环宽度、颜色、样式

✅ 支持背景圆环、当前值圆环

✅ 自定义刻度线的颜色、位置、大小刻度的数目

✅ 自定义刻度值的颜色、位置、最大最小值、精度（小数位数）

✅ 自定义显示标题：温度、湿度、电流、电压等（标题完美地显示在缺口处）

✅ 支持动画特性：从一个值变为另一个值，指针会平滑旋转

✅ 支持仪表盘自适应大小（仪表盘缩放时，圆环宽度、刻度线、刻度值、标题大小等，自适应地缩放）

本章会从零开始，自定义实现一个仪表盘控件。会实现的2个效果：

本节来实现：

初始化控件
回显仪表盘数据到控件上
滑块和仪表盘联动

1. 回显数据

来到 widget.cpp，修改构造函数，如下：

Widget::Widget(QWidget* parent) : QWidget(parent)
{
    // 2. 初始化数据
    sbRingWidth->setRange(1, 20);  // 设置圆环宽度的范围
    cboRingStyle->addItem("直角", Qt::FlatCap);
    cboRingStyle->addItem("圆角", Qt::RoundCap);

    cboScalePos->addItem("圆环内侧", Inside);
    cboScalePos->addItem("圆环外侧", Outside);
    cboScalePos->addItem("圆环外侧(空隙)", OutsideGap);
    cboScalePos->addItem("圆环上", On);

    cboPointerStyle->addItem("圆形", Circle);
    cboPointerStyle->addItem("尖形", Sharp);

    // 3. 回显仪表盘属性
    // 3.1 回显基础属性
    // 回显范围
    leMinValue->setText(QString::number(gauge->getMinValue()));
    leMaxValue->setText(QString::number(gauge->getMaxValue()));

    // 回显小数精度
    lePrecision->setText(QString::number(gauge->getPrecision()));

    // 回显单位
    leUnit->setText(gauge->getUnit());

    // 回显标题
    leTitle->setText(gauge->getTitle());

    // 回显文本颜色
    QColor titleColor = gauge->getTitleColor();
    QString titleStyle = QString("background-color: rgb(%1,%2,%3);").arg(titleColor.red()).arg(titleColor.green()).arg(titleColor.blue());
    lblTitleColor->setStyleSheet(titleStyle);

    // 3.2 回显圆环
    // 回显圆环的起始角度、跨越角度
    int startAngle = gauge->getStartAngle();
    int spanAngle = gauge->getSpanAngle();
    leStartAngle->setText(QString::number(startAngle));
    leSpanAngle->setText(QString::number(spanAngle));

    // 回显圆环宽度
    sbRingWidth->setValue(gauge->getRingWidth());

    // 回显圆环背景颜色
    QColor ringColor = gauge->getRingColor();
    QString ringColorStyle = QString("background-color: rgb(%1,%2,%3);").arg(ringColor.red()).arg(ringColor.green()).arg(ringColor.blue());
    lblRingColor->setStyleSheet(ringColorStyle);

    // 回显圆环当前颜色
    QColor currentRingColor = gauge->getCurrentRingColor();
    QString currentRingColorStyle =
        QString("background-color: rgb(%1,%2,%3);").arg(currentRingColor.red()).arg(currentRingColor.green()).arg(currentRingColor.blue());
    lblCurrentRingColor->setStyleSheet(currentRingColorStyle);

    // 回显圆环宽度
    sbRingWidth->setValue(gauge->getRingWidth());

    // 回显圆环样式
    Qt::PenCapStyle ringStyle = gauge->getRingStyle();
    if ( ringStyle == Qt::FlatCap ) {
        cboRingStyle->setCurrentIndex(0);
    } else if ( ringStyle == Qt::RoundCap ) {
        cboRingStyle->setCurrentIndex(1);
    }

    // 3.3 回显刻度
    // 回显大刻度、小刻度
    int majorScale = gauge->getMajorScale();
    int minorScale = gauge->getMinorScale();
    leMajorScale->setText(QString::number(majorScale));
    leMinorScale->setText(QString::number(minorScale));

    // 回显刻度线颜色
    QColor scaleColor = gauge->getScaleColor();
    QString scaleColorStyle = QString("background-color: rgb(%1,%2,%3);").arg(scaleColor.red()).arg(scaleColor.green()).arg(scaleColor.blue());
    lblScaleColor->setStyleSheet(scaleColorStyle);

    // 回显刻度值颜色
    QColor scaleValuesColor = gauge->getScaleValuesColor();
    QString scaleValuesColorStyle =
        QString("background-color: rgb(%1,%2,%3);").arg(scaleValuesColor.red()).arg(scaleValuesColor.green()).arg(scaleValuesColor.blue());
    lblScaleValuesColor->setStyleSheet(scaleValuesColorStyle);

    // 回显刻度位置
    ScalePosition scalePos = gauge->getScalePosition();
    if ( scalePos == Inside ) {
        cboScalePos->setCurrentIndex(0);
    } else if ( scalePos == Outside ) {
        cboScalePos->setCurrentIndex(1);
    } else if ( scalePos == OutsideGap ) {
        cboScalePos->setCurrentIndex(2);
    } else if ( scalePos == OutsideGap ) {
        cboScalePos->setCurrentIndex(3);
    }

    // 3.4 回显指针
    // 回显指针颜色
    QColor pointerColor = gauge->getPointerColor();
    QString pointerColorStyle = QString("background-color: rgb(%1,%2,%3);").arg(pointerColor.red()).arg(pointerColor.green()).arg(pointerColor.blue());
    lblPointerColor->setStyleSheet(pointerColorStyle);

    // 回显指针样式
    PointerStyle pointerStyle = gauge->getPointerStyle();
    if ( pointerStyle == Circle ) {
        cboPointerStyle->setCurrentIndex(0);
    } else if ( pointerStyle == Sharp ) {
        cboPointerStyle->setCurrentIndex(1);
    }

    // 动画
    bool animation = gauge->getAnimation();
    chkAnimation->setChecked(animation);
    if ( animation ) {
        leAnimationStep->setEnabled(true);
        leAnimationStep->setText(QString::number(gauge->getAnimationStep()));
    } else {
        leAnimationStep->setEnabled(false);
    }
}

此时，运行效果：

2. 滑块和仪表盘联动

实现滑块移动时，修改仪表盘的值；仪表盘数值改变时，让滑块移动

首先，来到 widget.h中，声明滑块值改变时要调用的槽函数，如下：

class Widget : public QWidget
{
private slots:
    // 滑动条
    void onSliderValueChanged(int value);
}

然后，来到 widget.cpp中，实现 onSliderValueChanged() 槽函数，如下：

void Widget::onSliderValueChanged(int value)
{
    float gaugeValue =
        (float)(value - slider->minimum()) / (slider->maximum() - slider->minimum()) * (gauge->getMaxValue() - gauge->getMinValue()) + gauge->getMinValue();

    gauge->setValue(gaugeValue);
}

最后，来到 widget.cpp的构造中，绑定信号槽，如下：

Widget::Widget(QWidget* parent) : QWidget(parent)
{
    // 滑块与仪表盘联动
    connect(slider, SIGNAL(valueChanged(int)), this, SLOT(onSliderValueChanged(int)));
}

此时，运行效果：