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

 《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.h，声明相关的槽函数，如下：

class Widget : public QWidget
{
private slots:
    // 刻度
    void onMajorScaleChanged(QString s);
    void onMinorScaleChanged(QString s);
    void onScalePositionChanged();
}

然后，来到 widget.cpp，实现这些槽函数，如下：

void Widget::onMajorScaleChanged(QString s)
{
    gauge->setMajorScale(s.toInt());
}

void Widget::onMinorScaleChanged(QString s)
{
    gauge->setMinorScale(s.toInt());
}

void Widget::onScalePositionChanged()
{
    int index = cboScalePos->currentIndex();
    ScalePosition pos = (ScalePosition)cboScalePos->itemData(index).toInt();
    
    gauge->setScalePosition(pos);
}

最后，来到 widget.cpp构造中，绑定槽函数，如下：

Widget::Widget(QWidget* parent) : QWidget(parent)
{
    // 4.3 刻度
    connect(leMajorScale, SIGNAL(textChanged(QString)), this, SLOT(onMajorScaleChanged(QString)));
    connect(leMinorScale, SIGNAL(textChanged(QString)), this, SLOT(onMinorScaleChanged(QString)));
    connect(cboScalePos, SIGNAL(activated(QString)), this, SLOT(onScalePositionChanged()));  // 槽的参数可以比信号少
}

此时，运行结果：

2. 事件过滤器

这里通过事件过滤器，点击颜色标签，通过弹出一个颜色对话框，来设置刻度线、刻度值的颜色。

首先，来到 widget.cpp，为 lblTitleColor 标签绑定事件过滤器，如下：

Widget::Widget(QWidget* parent) : QWidget(parent)
{
    lblScaleColor->installEventFilter(this);
    lblScaleValuesColor->installEventFilter(this);
}

然后，修改eventFilter() 函数，如下：

bool Widget::eventFilter(QObject* watched, QEvent* event)
{
    if ( event->type() == QEvent::MouseButtonPress ) {
        QColor color = QColorDialog::getColor(QColor(255, 0, 0), this, "画刷颜色");
        if ( color.isValid() ) {
            //...
            if ( watched == lblTitleColor ) {
                gauge->setTitleColor(color);
            } else if ( watched == lblRingColor ) {
                gauge->setRingColor(color);
            } else if ( watched == lblCurrentRingColor ) {
                gauge->setCurrentRingColor(color);
            } else if ( watched == lblScaleColor ) {
                gauge->setScaleColor(color);
            } else if ( watched == lblScaleValuesColor ) {
                gauge->setScaleValuesColor(color);
            }
        }
    }
    return QWidget::eventFilter(watched, event);
}

此时，运行结果：