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

《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,声明相关的槽函数,如下:

cpp 复制代码
class Widget : public QWidget
{
private slots:
    // 指针
    void onPointerStyleChanged();
    void onChkAnimationClicked(bool b);
    void onAnimationStepChanged(QString s);
}

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

cpp 复制代码
void Widget::onPointerStyleChanged()
{
    int index = cboPointerStyle->currentIndex();
    PointerStyle style = (PointerStyle)cboPointerStyle->itemData(index).toInt();
    
    gauge->setPointerStyle(style);
}

void Widget::onChkAnimationClicked(bool b)
{
    gauge->setAnimation(b);
    leAnimationStep->setEnabled(b);
}

void Widget::onAnimationStepChanged(QString s)
{
    gauge->setAnimationStep(s.toFloat());
}

最后,来到**widget.cpp**构造中,绑定槽函数,如下:

cpp 复制代码
Widget::Widget(QWidget* parent) : QWidget(parent)
{
    // 4. 绑定信号槽
    // 4.1 基础设置
    connect(leUnit, SIGNAL(textChanged(QString)), this, SLOT(onUnitChanged(QString)));
    connect(leTitle, SIGNAL(textChanged(QString)), this, SLOT(onTitleChanged(QString)));

    connect(leMinValue, SIGNAL(textChanged(QString)), this, SLOT(onMinValueChanged(QString)));
    connect(leMaxValue, SIGNAL(textChanged(QString)), this, SLOT(onMaxValueChanged(QString)));
    connect(lePrecision, SIGNAL(textChanged(QString)), this, SLOT(onPrecisionChanged(QString)));
}

此时,运行结果:

2. 事件过滤器

这里通过事件过滤器,点击颜色标签,通过弹出一个颜色对话框,来设置标题的颜色。

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

cpp 复制代码
Widget::Widget(QWidget* parent) : QWidget(parent)
{
    lblPointerColor->installEventFilter(this);
}

然后,修改**eventFilter()**函数,如下:

cpp 复制代码
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);
            } else if ( watched == lblPointerColor ) {
                gauge->setPointerColor(color);
            }
        }
    }
    return QWidget::eventFilter(watched, event);
}

此时,运行结果:

相关推荐
OpenC++3 分钟前
【C++QT】Buttons 按钮控件详解
c++·经验分享·qt·leetcode·microsoft
我真的不会C1 小时前
QT窗口相关控件及其属性
开发语言·qt
云小逸2 小时前
【QQMusic项目界面开发复习笔记】第二章
c++·qt
꧁坚持很酷꧂2 小时前
配置Ubuntu18.04中的Qt Creator为中文(图文详解)
开发语言·qt·ubuntu
sky_smile_Allen3 小时前
[Unity]-[UI]-[Prefab] 关于Unity UGUI 的布局及组件讲解
ui·unity·游戏引擎
快乐飒男3 小时前
Qt基础009(HTTP编程和QJSON)
qt
Python_金钱豹4 小时前
Text2SQL零代码实战!RAGFlow 实现自然语言转 SQL 的终极指南
前端·数据库·sql·安全·ui·langchain·机器人
此刻我在家里喂猪呢5 小时前
Qt指ModbusTcp协议的使用
qt
爱上解放晚晚5 小时前
QT 的.pro 转 vsproject 工程
开发语言·qt
Zfox_5 小时前
【Qt】文件
c++·qt·qt5·客户端开发