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

大轮明王讲QT

已于 2024-04-29 16:11:31 修改

阅读量442

点赞数 6

分类专栏：《Qt/UI美化实战课程》文章标签： qt ui c++ 自定义仪表盘汽车仪表盘样式表

于 2024-04-29 16:09:48 首次发布

本文链接：https://blog.youkuaiyun.com/bili_mingwang/article/details/138316348

版权

《Qt/UI美化实战课程》专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了一门关于QtUI设计的实战课程，涵盖无边框窗口、图标字体、官方图表QChart和QCustomPlot的使用，以及如何实现监控日志高亮、仪表盘设计（包括自定义属性和动画效果）、基础和高级控件，以及精美换肤。课程以从零开始实现自定义仪表盘控件为核心，包括圆环设置、信号槽绑定和事件过滤器的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

《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 onStartAngleChanged(QString s);
    void onSpanAngleChanged(QString s);
    void onRingWidthChanged(int w);
    void onRingStyleChanged();
}

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

void Widget::onStartAngleChanged(QString s)
{
    gauge->setStartAngle(s.toInt());
}

void Widget::onSpanAngleChanged(QString s)
{
    gauge->setSpanAngle(s.toInt());
}

void Widget::onRingWidthChanged(int w)
{
    gauge->setRingWidth(w);
}

void Widget::onRingStyleChanged()
{
    int index = cboRingStyle->currentIndex();
    Qt::PenCapStyle style = (Qt::PenCapStyle)cboRingStyle->itemData(index).toInt();

    gauge->setRingStyle(style);
}

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

Widget::Widget(QWidget* parent) : QWidget(parent)
{
    // 4.2 圆环
    connect(leStartAngle, SIGNAL(textChanged(QString)), this, SLOT(onStartAngleChanged(QString)));
    connect(leSpanAngle, SIGNAL(textChanged(QString)), this, SLOT(onSpanAngleChanged(QString)));
    connect(sbRingWidth, SIGNAL(valueChanged(int)), this, SLOT(onRingWidthChanged(int)));
    connect(cboRingStyle, SIGNAL(activated(QString)), this, SLOT(onRingStyleChanged()));  // 槽的参数可以比信号少
}

此时，运行结果：

2. 事件过滤器

这里通过事件过滤器，点击颜色标签，通过弹出一个颜色对话框，来设置当前圆环、背景圆环的颜色。

首先，来到 widget.cpp，为当前圆环、背景圆环标签，绑定事件过滤器，如下：

Widget::Widget(QWidget* parent) : QWidget(parent)
{
    lblRingColor->installEventFilter(this);
    lblCurrentRingColor->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);
            }
        }
    }
    return QWidget::eventFilter(watched, event);
}

此时，运行结果：