1.運行界面
2.步驟
其實很簡單。
2.1繪制底圖圓角矩形
2.2繪制播放進度圓角矩形
參考：painter繪圖
3.源碼
#pragma once#include <QWidget>
#include <QLabel>
#include <QHBoxLayout>
#include <QMouseEvent>
#include <QDebug>
#include <QShowEvent>
#include <QPainter>class WProgressBar : public QWidget
{Q_OBJECT
public:WProgressBar(QWidget *parent = nullptr);~WProgressBar();signals:void sigCustomSliderValueChanged(double pos);//自定義的鼠標單擊信號，用于捕獲并處理public://獲取posdouble getPos();public slots://設置0~1void slotSetValue(double pos);protected:void mousePressEvent(QMouseEvent *ev);void mouseMoveEvent(QMouseEvent *ev);void mouseReleaseEvent(QMouseEvent *ev);void paintEvent(QPaintEvent *);private:double m_pos = 0;
};#include "WProgressBar.h"WProgressBar::WProgressBar(QWidget *parent): QWidget(parent)
{this->setWindowFlags(Qt::FramelessWindowHint); //隱藏窗口this->setAttribute(Qt::WA_TranslucentBackground, true); //窗口透明
}WProgressBar::~WProgressBar()
{
}double WProgressBar::getPos()
{return m_pos;
}void WProgressBar::slotSetValue(double pos)
{m_pos = pos;update();
}void WProgressBar::mousePressEvent(QMouseEvent *ev)
{//double pos = (double)ev->pos().x() / (double)width();//if (pos >= 1)// pos = 1;//if (pos <= 0)// pos = 0;//m_pos = pos;//update();//qDebug() << "seek pos = " << pos;//emit sigCustomSliderValueChanged(pos);
}void WProgressBar::mouseMoveEvent(QMouseEvent *ev)
{double pos = (double)ev->pos().x() / (double)width();if (pos >= 1)pos = 1;if (pos <= 0)pos = 0;m_pos = pos;update();
}void WProgressBar::mouseReleaseEvent(QMouseEvent *ev)
{double pos = (double)ev->pos().x() / (double)width();emit sigCustomSliderValueChanged(pos);
}void WProgressBar::paintEvent(QPaintEvent *e)
{QWidget::paintEvent(e);QPainter painter(this);painter.setRenderHint(QPainter::Antialiasing);//繪制底圖矩形QBrush brush;brush.setColor(QColor(233,233,233));brush.setStyle(Qt::SolidPattern);painter.setBrush(brush);painter.drawRoundedRect(this->rect(), 5, 5);//繪制播放進度QLinearGradient radial;radial.setStart(0, 0);radial.setFinalStop(0, 1);//設置起始點顏色，0表示起始radial.setColorAt(0, QColor("#87CEFA"));//設置終點顏色 1表示終點radial.setColorAt(1, QColor("#1E90FF"));//設置延展方式radial.setSpread(QGradient::PadSpread);QPen pen(QBrush("#1E90FF"), 1, Qt::SolidLine, Qt::RoundCap, Qt::RoundJoin);painter.setPen(pen);//設置畫刷painter.setBrush(radial);QRect rect = this->rect();rect.setWidth(rect.width() * m_pos);//畫矩形painter.drawRoundedRect(rect, 5, 5);
}
4.應用截圖
一款自己做的播放器界面截圖
5.繪圖參考
1.圓形進度條實現
2.麥克風音量大小模擬
3.自定義時鐘
4.自定義圓形進度條
)
