《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);
}

此时,运行结果:

相关推荐
SoraLuna6 小时前
「Mac畅玩鸿蒙与硬件28」UI互动应用篇5 - 滑动选择器实现
macos·ui·harmonyos
徒步僧9 小时前
ThingsBoard规则链节点:RPC Call Reply节点详解
qt·microsoft·rpc
可峰科技10 小时前
斗破QT编程入门系列之一:认识Qt:初步使用(四星斗师)
开发语言·qt
我喜欢就喜欢10 小时前
基于qt vs下的视频播放
开发语言·qt·音视频
CP-DD11 小时前
Qt的架构设计
qt
阿_旭11 小时前
基于YOLO11/v10/v8/v5深度学习的维修工具检测识别系统设计与实现【python源码+Pyqt5界面+数据集+训练代码】
人工智能·python·深度学习·qt·ai
Bruce小鬼16 小时前
QT创建按钮篇
开发语言·qt
martian66517 小时前
QT开发:掌握现代UI动画技术:深入解析QML和Qt Quick中的动画效果
开发语言·c++·qt·ui
初九之潜龙勿用19 小时前
C#结合JS解决Word添加无效位图导致进程停滞的问题
javascript·ui·c#·word·asp.net
墨染新瑞19 小时前
两个有趣的小东西(qt和类型转换)
开发语言·网络·qt