Qt——功能：使用QSlider实现音量条

最新推荐文章于 2024-05-29 09:52:43 发布
最新推荐文章于 2024-05-29 09:52:43 发布
阅读量4.3k 收藏 16
点赞数 5
分类专栏： Qt
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/piaoguo60/article/details/107581598
版权

测试环境：win10、Qt Creator 4.11.1、5.14.2版本SDK

github：https://github.com/coldfirehello/QtDemo.git

 

音量需求：

 

注意事项：

1.音量移动到0或100时，不能有剩余部分。

 

解决办法：剩余部分设置为背景色！

 

上代码：

volume.h
#ifndef VOLUME_H
#define VOLUME_H

#include <QWidget>
#include <QSlider>

class Volume : public QWidget
{
    Q_OBJECT
public:
    explicit Volume(QWidget *parent = nullptr);
    ~Volume();

    void setValue(int value);

signals:
    void signalVolumeChanged(int volume);

private:
    void initUI();
    void onVolumeChanged();

protected:
    void paintEvent(QPaintEvent *event) override;
    bool event(QEvent *e) override;

private:
    QSlider* m_slider;
};

#endif // VOLUME_H

volume.cpp
#include "volume.h"
#include <QApplication>
#include <QEvent>
#include <QPainter>
#include <QStyleOption>
#include <QVBoxLayout>

Volume::Volume(QWidget *parent) : QWidget(parent),
    m_slider(nullptr)
{
    setWindowFlags(Qt::Popup | Qt::FramelessWindowHint | Qt::NoDropShadowWindowHint);
    setAttribute(Qt::WA_TranslucentBackground, true);

    initUI();
}

Volume::~Volume()
{

}

void Volume::setValue(int value)
{
    if(m_slider != nullptr)
    {
        m_slider->setValue(value);
    }
}

void Volume::initUI()
{
    QWidget* backgroundWidget = new QWidget(this);
    backgroundWidget->resize(36, 153);
    backgroundWidget->setStyleSheet("QWidget{background-color:rgba(0, 0, 0, 0.8);border-radius:18px;}");

    m_slider = new QSlider();
    m_slider->resize(36, 121);
    m_slider->setMaximum(100);
    m_slider->setMinimum(0);
    m_slider->setValue(0);
    m_slider->setStyleSheet("QSlider{background:transparent;}"
                            "QSlider::add-page:vertical{background-color:#FFFFFF;width:4px;border-radius:2px;}"
                            "QSlider::sub-page:vertical{background-color:rgba(196, 196, 196, 0.5);width:4px;border-radius:2px;}"
                            "QSlider::groove:vertical{background:transparent;width:4px;border-radius:2px;}"
                            "QSlider::handle:vertical{height:20px;width:20px;border-image:url(:/images/handle.png);margin-top:0px;margin-bottom:0px;margin-left:-8px;margin-right:-8px;}"
                            "QSlider::handle:vertical:hover{height:20px;width:20px;border-image:url(:/images/plus.png);margin-top:0px;margin-bottom:0px;margin-left:-8px;margin-right:-8px;}"
                            "QSlider::handle:vertical:pressed{height:20px;width:20px;border-image:url(:/images/plus.png);margin-top:0px;margin-bottom:0px;margin-left:-8px;margin-right:-8px;}");

    connect(m_slider, &QSlider::valueChanged, this, &Volume::onVolumeChanged);

    QVBoxLayout* vLayout = new QVBoxLayout();
    vLayout->setContentsMargins(0, 16, 0, 16);
    vLayout->setAlignment(Qt::AlignCenter);
    vLayout->setSpacing(0);
    vLayout->addWidget(m_slider);

    backgroundWidget->setLayout(vLayout);

    setValue(10);
}

void Volume::onVolumeChanged()
{
    if(m_slider != nullptr)
    {
        int value = m_slider->value();

        if (value == 0)
        {
            m_slider->setStyleSheet("QSlider{background:transparent;}"
                                    "QSlider::add-page:vertical{background-color:rgba(0, 0, 0, 0.8);width:4px;border-radius:2px;}"
                                    "QSlider::sub-page:vertical{background-color:rgba(196, 196, 196, 0.5);width:4px;border-radius:2px;}"
                                    "QSlider::groove:vertical{background:transparent;width:4px;border-radius:2px;}"
                                    "QSlider::handle:vertical{height:20px;width:21px;border-image:url(:/images/handle.png);margin-top:0px;margin-bottom:0px;margin-left:-8px;margin-right:-8px;}"
                                    "QSlider::handle:vertical:hover{height:20px;width:21px;border-image:url(:/images/plus.png);margin-top:0px;margin-bottom:0px;margin-left:-8px;margin-right:-8px;}"
                                    "QSlider::handle:vertical:pressed{height:20px;width:21px;border-image:url(:/images/plus.png);margin-top:0px;margin-bottom:0px;margin-left:-8px;margin-right:-8px;}");
        }
        else if (value > 0 && value < 100)
        {
            m_slider->setStyleSheet("QSlider{background:transparent;}"
                                    "QSlider::add-page:vertical{background-color:#FFFFFF;width:4px;border-radius:2px;}"
                                    "QSlider::sub-page:vertical{background-color:rgba(196, 196, 196, 0.5);width:4px;border-radius:2px;}"
                                    "QSlider::groove:vertical{background:transparent;width:4px;border-radius:2px;}"
                                    "QSlider::handle:vertical{height:20px;width:21px;border-image:url(:/images/handle.png);margin-top:0px;margin-bottom:0px;margin-left:-8px;margin-right:-8px;}"
                                    "QSlider::handle:vertical:hover{height:20px;width:21px;border-image:url(:/images/plus.png);margin-top:0px;margin-bottom:0px;margin-left:-8px;margin-right:-8px;}"
                                    "QSlider::handle:vertical:pressed{height:20px;width:21px;border-image:url(:/images/plus.png);margin-top:0px;margin-bottom:0px;margin-left:-8px;margin-right:-8px;}");
        }
        else
        {
            m_slider->setStyleSheet("QSlider{background:transparent;}"
                                    "QSlider::add-page:vertical{background-color:#FFFFFF;width:4px;border-radius:2px;}"
                                    "QSlider::sub-page:vertical{background-color:rgba(0, 0, 0, 0.8);width:4px;border-radius:2px;}"
                                    "QSlider::groove:vertical{background:transparent;width:4px;border-radius:2px;}"
                                    "QSlider::handle:vertical{height:20px;width:21px;border-image:url(:/images/handle.png);margin-top:0px;margin-bottom:0px;margin-left:-8px;margin-right:-8px;}"
                                    "QSlider::handle:vertical:hover{height:20px;width:21px;border-image:url(:/images/plus.png);margin-top:0px;margin-bottom:0px;margin-left:-8px;margin-right:-8px;}"
                                    "QSlider::handle:vertical:pressed{height:20px;width:21px;border-image:url(:/images/plus.png);margin-top:0px;margin-bottom:0px;margin-left:-8px;margin-right:-8px;}");
        }

        emit signalVolumeChanged(value);
    }
}

void Volume::paintEvent(QPaintEvent *event)
{
    QStyleOption option;

    option.init(this);

    QPainter p(this);

    style()->drawPrimitive(QStyle::PE_Widget, &option, &p, this);
}

bool Volume::event(QEvent *e)
{
    if (e->type() == QEvent::ActivationChange)
    {
        if (QApplication::activeWindow() != this)
        {
            this->close();
        }
    }

    return QWidget::event(e);
}

测试代码：

#include "volume.h"
#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    Volume w;
    w.show();
    return a.exec();
}

 

注意：

因为使用了border-image这种样式，因此groove宽度+扩展宽度最好不小于图片宽度，否则会宽度会缩放。如果使用background-image样式，可能显示位置不对。

喂你的猴子跑了
关注
  • 5
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
09柱形控件-01柱状音量条-barvolume
Qt/C++视频监控/推流/物联网/大屏系统/自定义控件/UI定制/输入法
10-19 631
一、运行效果 二、功能特点 可设置范围值、当前值、步长、圆角角度。 可设置背景渐变颜色。 可设置柱状三种渐变颜色。 三、公共接口 public Q_SLOTS: //设置目标值 void setValue(int value); //设置步长 void setStep(int step); //设置间距 void setSpace(int space); //设置间隔 void setPadding(int padding); /
QT_StepByStep（2）--滑动杆的实现
weixin_30276935的博客
05-25 274
1、实现效果图： 2、代码清单：#include <QtGui/QApplication> #include <QtGui/QWidget> #include <QtGui/QSpinBox> #include <QtGui/QSlider> #include <QtGui/QHBoxLayout> int main(int ...
QT 实现播放器中音量控制
热门推荐
Jaster_wisdom的专栏
04-12 1万+
在视频播放器中，要实现拖动控制条来调节音量，是一件很必要也很简单的事情。下面具体来说一说。      首先，打开.ui文件，在合适的位置拖进去一个Slider,就像这样，看右下角。      为了形象一点，可以在其左边放置一个小喇叭，以示这是用来调节音量的。      然后，设置信号与槽。方法是，选中Slider,然后点击左上角的信号与槽。      接下来， 选中Slid
Qt编写栅格音柱，不同音量显示不同颜色
最新发布
weixin_41962759的博客
05-29 316
使用qt显示双通道栅格音频根据左右声道不同音量大小显示不同颜色，音量由低到高分别为绿色，黄色，红色。
Qt制作自定义音量条
weixin_40425059的博客
10-30 2084
Qt制作自定义音量条 一直希望自己做一个漂亮的音量进度条，今天做好了，拿出来记录一下。做出来的效果如下： 实现的本质就是两张图片，设置图片的显示范围。灰色的作为底图，根据进度条应该显示的长度，缩放上层高亮图片的显示范围。 废话不多说直接上代码： #ifndef PROGRESSBAR_H #define PROGRESSBAR_H #include <QObject> #include <QWidget> #include <QPixmap> class Progr
用Qt写一个简单的音乐播放器（三）：增加界面（播放跳转与音量控制）
LyRics1996的博客
07-26 7631
一、前言 在用Qt写一个简单的音乐播放器（一）：使用QMediaPlayer播放音乐中，我们已经知道如何去使用QMediaPlayer播放音乐。 在用Qt写一个简单的音乐播放器（二）：增加界面（开始和暂停音乐)中，我们增加了播放音乐/暂停音乐的按钮。 不论是音频还是视频的播放，都是有进度控制的，我们可以拖动滑动条，到指定位置播放，并且播放音频或者视频的音量我们也可以自由调节，第三篇我们就来说一说，播放控制和音量控制。 二、滑动条（Slider） 滑动条（Slider）是一个很常见的控件，我们可以看到在控件的
【基于QMediaPlayer的简易视频播放器】— 3、结合QSlider实现播放进度控制和音量控制
liutingxi0709的博客
07-21 1万+
对于播放器来说，其进度条应该有两种控制方式，一是拖动，二是点击。 其中我们需要用到sliderMoved()和sliderReleased()两种信号来实现拖动功能， 对于点击，QSlider的mousePressEvent()默认的方式是，点击之后跳跃一定的固定距离，无法实现“指哪打哪”，因此我们需要对mousePressEvent()进行重写。具体方法将在下一篇文章中介绍。
【Qt】自定义QSlider
09-13
总之，通过自定义QSlider类并重载相关事件处理函数，我们可以实现点击和拖动设置数值的功能，为用户提供更灵活的交互方式。这个过程涉及到对Qt事件机制的理解，以及如何有效地利用QSlider的属性和方法。通过这样的...
QT实现在滑动条的滑块上显示数值
07-18
connect(slider, &QSlider::valueChanged, this, &MainWindow::displayValue); ``` 在`displayValue`槽函数中，我们将获取滑动条的新值并更新显示的文本： ```cpp void MainWindow::displayValue(int value) { ...
qt creator项目使用原生Windows进行混声器音量设置（包括录音）
07-24
本人使用qt5.8,界面简单测试（录音和放音音量及静音设置），封装好了一个类（manager里有写），可以调节应用的混声器音量，或进行静音设置，本人测试没问题，如有问题愿深入交流及时更正。
Qt例程源代码QSlider.7z
07-19
connect(ui->slider, &QSlider::valueChanged, this, &MainWindow::onValueChanged); ``` **QSlider实例应用** 在实际的Qt项目中，QSlider通常结合其他组件如QLabel、QSpinBox等一起使用，以提供更丰富的交互体验...
Qt实现一个同QSlider一样可以控制任务进度的圆形滑块
03-12
本篇文章将详细介绍如何在Qt中实现一个与QSlider功能类似的圆形滑块。 首先，我们需要创建一个新的QGraphicsView派生类，这个类将承载我们的圆形滑块。QGraphicsView是Qt图形视图框架的一部分，它允许我们创建复杂...
Qt实现范围滑动条SuperSlider.rar
04-13
"Qt实现范围滑动条SuperSlider.rar"是一个与Qt相关的项目压缩包，包含了一个实现范围滑动条功能的应用实例。这个滑动条，也被称为SuperSlider，具有简单、方便和实用的特点，用户可以根据自己的需求进行修改。 在Qt...
Qt 实现Windows系统Win10 c++音量调节
我是唐
08-28 3784
1.简述 Qt原生是不支持系统音量调节的，需要用到windows的API，效果如下 2.代码 头文件 #ifdef Q_OS_WIN bool setSysVolume(int level); int sysVolume(); #endif //Q_OS_WIN 源文件 #ifdef Q_OS_WIN #include <windows.h> #include <mmdeviceapi.h> #include <endpointvolume.h> #i
qt调节linux系统音量,QTwindows 7调整系统主音量方法
weixin_42361237的博客
05-12 272
#include bool MainWindow::SetVolumeLevel(int level){HRESULT hr;IMMDeviceEnumerator* pDeviceEnumerator = 0;IMMDevice* pDevice = 0;IAudioEndpointVolume* pAudioEndpointVolume = 0;IAudioClient* pAudioClie...
PyQt5 QSlider滑动条
SongYuLong
11-21 398
【代码】PyQt5 Slider滑动条。
Qt/C++音视频开发20-vlc内核动态保存录像文件（不需要重新编译源码）
Qt/C++视频监控/推流/物联网/大屏系统/自定义控件/UI定制/输入法
03-06 1753
在vlc默认提供的保存文件方式中，通过打开的时候传入指定的参数来保存文件，直到关闭播放生成文件，这种方式简单暴力，但是不适用大部分的场景，大部分时候需要的是提供开始录制和停止录制的功能，也就是在播放过程中能够动态录制多个文件，想录制的时候就录制，要结束的时候就结束录制，很遗憾vlc并没有提供这样的函数接口。
Qt——QFontMetrics计算字符串宽度那点坑
第一大剑豪——索隆
10-16 5642
突然收到测试小姐姐一条消息：有bug，课程名称显示不全，而且也没有“...”。 我：不可能吧，是不是你电脑有问题。 测试小姐姐：丢过来一张截图，显示的课程名称确实不全。 用相同数据在自己电脑上再次测试了一遍，仍然没有问题。带着疑问去测试那里又看了一遍，果然还是显示不全。查看了下电脑分辨率相关信息，发现“显示大小为100%”，脑袋里突然有了点想法。windows系统提示：修改“显示大小”会更改文本大小。看到这句话突然想到了DPI。 DPI是什么？ DPI全称D...
QT 自定义QSlider滑动条，QSlider滑块圆形
09-26
### 回答1： 可以通过继承QSlider类并重写paintEvent()函数来自定义QSlider滑动条，同时可以通过设置QStyleOptionSlider中的subControls属性来设置滑块的形状为圆形。具体实现可以参考以下代码： ``` class CustomSlider : public QSlider { public: CustomSlider(QWidget *parent = nullptr) : QSlider(parent) { setStyleSheet("QSlider::groove:horizontal { height: 10px; background: #ddd; }" "QSlider::handle:horizontal { width: 20px; border-radius: 10px; background: #333; }"); } protected: void paintEvent(QPaintEvent *event) override { QSlider::paintEvent(event); QPainter painter(this); painter.setRenderHint(QPainter::Antialiasing); QStyleOptionSlider opt; initStyleOption(&opt); QRect grooveRect = style()->subControlRect(QStyle::CC_Slider, &opt, QStyle::SC_SliderGroove, this); QRect handleRect = style()->subControlRect(QStyle::CC_Slider, &opt, QStyle::SC_SliderHandle, this); QPoint center = handleRect.center(); painter.setPen(Qt::NoPen); painter.setBrush(QColor("#333")); painter.drawEllipse(center, handleRect.width() / 2, handleRect.height() / 2); } }; ``` 在上述代码中，我们通过设置QSlider的样式表来设置滑动条的样式，其中groove表示滑动条的轨道，handle表示滑块。在paintEvent()函数中，我们首先调用QSlider的paintEvent()函数来绘制默认的滑动条，然后获取滑动条的轨道和滑块的矩形区域，并计算出滑块的中心点。最后，我们使用QPainter绘制一个圆形，将其填充为黑色，并以滑块的中心点为圆心，滑块宽度的一半为半径进行绘制，从而实现了圆形滑块的效果。 ### 回答2： QT是一款跨平台的C++图形用户界面应用程序开发框架。在QT中，我们可以自定义QSlider滑动条以及滑块的形状。 要自定义QSlider滑动条，首先我们需要创建一个自定义的滑动条类，继承QSlider。在该类中，我们可以重写一些QSlider的虚函数，如paintEvent()、sliderChange()等，以实现自定义的滑动条样式和功能。 要实现圆形的滑块，我们可以通过设置滑块样式表来实现。在QSlider的子类中，通过重写paintEvent()函数，我们可以在滑动条上绘制自定义的滑块。 以下是一个自定义的QSlider滑动条，滑块为圆形的示例代码： ```cpp class CustomSlider : public QSlider { Q_OBJECT public: CustomSlider(QWidget *parent = nullptr) : QSlider(parent) { setStyleSheet("QSlider::handle {" " background: green;" " border-radius: 8px;" " width: 16px;" " height: 16px;" "}"); } protected: void paintEvent(QPaintEvent *event) override { QSlider::paintEvent(event); QPainter painter(this); painter.setRenderHint(QPainter::Antialiasing, true); QRect grooveRect = style()->subControlRect(QStyle::CC_Slider, this, QStyle::SC_SliderGroove, this); int x = grooveRect.x() + grooveRect.height() / 2 - 8; int y = grooveRect.y() + grooveRect.height() / 2 - 8; painter.setBrush(QColor(51, 153, 255)); painter.setPen(Qt::NoPen); painter.drawEllipse(QRect(x, y, 16, 16)); } }; ``` 在上述代码中，我们重写了CustomSlider的构造函数和paintEvent()函数。构造函数中通过设置样式表，将滑块的背景设为绿色，圆角半径设为8px，并设置滑块的大小为16x16px。paintEvent()函数中，我们通过获取滑动条的轨道区域，计算滑块的位置，然后绘制一个蓝色圆形作为滑块。 我们可以在应用程序中使用CustomSlider类来替代QSlider类，从而实现自定义的滑动条和圆形滑块。 ### 回答3： 要自定义QSlider滑动条，使滑块圆形，可以通过重写QStyle类的drawComplexControl方法来实现。具体步骤如下： 1. 创建一个继承自QStyle的自定义样式类，并重写drawComplexControl方法。 2. 在drawComplexControl方法中，首先调用父类的drawComplexControl方法，这样可以绘制默认样式的滑块。 3. 获取滑块的矩形区域，并将其设置为圆形。 4. 根据滑块的圆形矩形区域，绘制一个圆形。 5. 最后，将自定义样式类应用到QSlider控件上。 下面是实现上述步骤的示例代码： ```C++ #include <QtWidgets> class CustomSliderStyle : public QStyle { public: using QStyle::QStyle; void drawComplexControl(ComplexControl control, const QStyleOptionComplex* option, QPainter* painter, const QWidget* widget = nullptr) const override { if (control == CC_Slider && option->subControls == SC_SliderHandle) { QStyleOptionSlider opt = *qstyleoption_cast<const QStyleOptionSlider*>(option); // 绘制默认样式的滑块 QStyle::drawComplexControl(control, option, painter, widget); // 获取滑块的矩形区域 QRect grooveRect = subControlRect(CC_Slider, option, SC_SliderHandle, widget); QRect handleRect = opt.rect; // 将滑块的矩形区域设置为圆形 handleRect.setSize(QSize(handleRect.width(), handleRect.width())); handleRect.moveCenter(grooveRect.center()); // 绘制圆形滑块 painter->save(); painter->setRenderHint(QPainter::Antialiasing, true); painter->setPen(Qt::NoPen); painter->setBrush(opt.palette.buttonText()); painter->drawEllipse(handleRect); painter->restore(); } else { QStyle::drawComplexControl(control, option, painter, widget); } } }; int main(int argc, char *argv[]) { QApplication app(argc, argv); QSlider slider; CustomSliderStyle customStyle; slider.setStyle(&customStyle); slider.show(); return app.exec(); } ``` 通过以上代码，可以自定义QSlider滑动条，使滑块变为圆形。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值