将下载按钮更新为自绘按钮

src/mainwindow-dtk.cpp

@@ -21,7 +21,7 @@ MainWindow::MainWindow(QWidget *parent)
     WidgetAnimation::widgetOpacity(this,true);
 
     downloadlistwidget = new DownloadListWidget;
-    downloadButton = new QPushButton(ui->titlebar);
+    downloadButton = new ProgressButton(ui->titlebar);
     backButtom = new QPushButton(ui->titlebar);
     ui->appintopage->setDownloadWidget(downloadlistwidget);
     ui->stackedWidget->setCurrentIndex(0);
@@ -75,7 +75,9 @@ MainWindow::MainWindow(QWidget *parent)
                                 QLabel#cardtitle,QLabel#title,QLabel#title_1,QLabel#title_2,QLabel#title_3 {color:#FFFFFF}\
                                 ");
             backButtom->setIcon(QIcon(":/icon/dark/back.svg"));
-            downloadButton->setIcon(QIcon(":/icon/dark/download.svg"));
+            downloadButton->setIcon(":/icon/dark/download.svg");
+            downloadButton->setBackgroundColor(QColor("#444444"));
+            downloadButton->setColor(QColor("#66CCFF"));
             ui->pushButton_14->setIcon(QIcon(":/icon/dark/update.svg"));
             int i = 0;
             while (i < ui->buttonGroup->buttons().size()) {
@@ -98,7 +100,9 @@ MainWindow::MainWindow(QWidget *parent)
                                 QLabel#cardtitle,QLabel#title,QLabel#title_1,QLabel#title_2,QLabel#title_3 {color:#000000}\
                                 ");
             backButtom->setIcon(QIcon(":/icon/light/back.svg"));
-            downloadButton->setIcon(QIcon(":/icon/light/download.svg"));
+            downloadButton->setBackgroundColor(QColor("#e3e4e4"));
+            downloadButton->setColor(QColor("#66CCFF"));
+            downloadButton->setIcon(":/icon/light/download.svg");
             ui->pushButton_14->setIcon(QIcon(":/icon/light/update.svg"));
             int i = 0;
             while (i < ui->buttonGroup->buttons().size()) {
@@ -123,7 +127,7 @@ MainWindow::MainWindow(QWidget *parent)
     });
 
     //初始化标题栏控件
-    connect(downloadButton, &QPushButton::clicked, [=]() {
+    connect(downloadButton, &ProgressButton::clicked, [=]() {
         QPoint pos;
         pos.setX(downloadButton->mapToGlobal(QPoint(0, 0)).x() + downloadButton->width() / 2 - downloadlistwidget->width() / 2);
         pos.setY(downloadButton->mapToGlobal(QPoint(0, 0)).y() + downloadButton->height() + 5);
@@ -188,6 +192,9 @@ MainWindow::MainWindow(QWidget *parent)
         this->setFocus();
     });
 
+    connect(downloadlistwidget, &DownloadListWidget::downloadProgress, this, [=](int i) {
+        downloadButton->setProgress(i);
+    });
     // 列表点击事件
     connect(ui->applistpage, &AppListPage::clicked, this, [=](QUrl spk) {
         openUrl(spk);

src/mainwindow-dtk.h

@@ -13,6 +13,7 @@
 #include <QDesktopServices>
 
 #include "widgets/downloadlistwidget.h"
+#include "widgets/common/progressbutton.h"
 #include "utils/widgetanimation.h"
 #include "dbus/dbussparkstoreservice.h"
 
@@ -42,7 +43,7 @@ private:
     QList<int> pageHistory;
 
     DownloadListWidget *downloadlistwidget;
-    QPushButton *downloadButton;
+    ProgressButton *downloadButton;
     QPushButton *backButtom;
     DSearchEdit *searchEdit = new DSearchEdit;
     Ui::MainWindow *ui;

src/spark-store.pro

@@ -4,7 +4,7 @@
 #
 #-------------------------------------------------
 
-QT       += core gui network concurrent webenginewidgets dbus
+QT       += core gui network concurrent webenginewidgets dbus svg
 
 greaterThan(QT_MAJOR_VERSION, 4): QT += widgets
 
@@ -46,6 +46,7 @@ SOURCES += \
         pages/settingspage.cpp \
         utils/utils.cpp \
         utils/widgetanimation.cpp \
+        widgets/common/progressbutton.cpp \
         widgets/common/webenginepage.cpp \
         widgets/common/webengineview.cpp \
         widgets/downloadlistwidget.cpp \
@@ -66,6 +67,7 @@ HEADERS += \
         pages/settingspage.h \
         utils/utils.h \
         utils/widgetanimation.h \
+        widgets/common/progressbutton.h \
         widgets/common/webenginepage.h \
         widgets/common/webengineview.h \
         widgets/downloadlistwidget.h \

src/widgets/common/progressbutton.cpp

@@ -0,0 +1,201 @@
+#include "progressbutton.h"
+#include <QPainter>
+#include <QPainterPath>
+#include <QRect>
+#include <QConicalGradient>
+#include <QVariantAnimation>
+#include <QSvgRenderer>
+ProgressButton::ProgressButton(QWidget *parent)
+    : QWidget{parent}
+{
+    //this->setWindowFlags(Qt::FramelessWindowHint);
+    this->setAttribute(Qt::WA_TranslucentBackground, true);
+    setMinimumWidth(36);
+    setMinimumHeight(36);
+    svgPath="";
+    backColor=Qt::transparent;
+    setMouseTracking(true);
+
+    connect(this,&ProgressButton::startProcessing,this,&ProgressButton::operationProcessing,Qt::QueuedConnection);
+}
+
+ProgressButton::~ProgressButton()
+{
+}
+
+void ProgressButton::paintEvent(QPaintEvent *event)
+{
+    QPainter painter(this);
+    painter.setRenderHint(QPainter::Antialiasing,true);
+    auto rect = event->rect();
+
+    if(buttonState == state::normal || buttonState == state::hover)
+    {
+        auto radiu = (rect.height() - 6) / 2;
+        painter.translate(rect.center());
+        painter.setPen(Qt::transparent);
+        painter.setBrush(QColor(buttonState == state::normal ? color : color.darker()));
+        //painter.drawEllipse(QPoint(0,0),radiu,radiu);
+
+        //radiu -= 3;
+        painter.setBrush(backColor);
+        painter.drawEllipse(QPoint(0,0),radiu,radiu);
+
+        QSvgRenderer m_svgRender;
+        m_svgRender.load(svgPath);
+        m_svgRender.render(&painter ,QRectF(-radiu / 2,-radiu / 2,radiu,radiu));
+    }
+    else if(buttonState == state::openProgress)
+    {
+        painter.translate(rect.center());
+        auto radiu = (rect.height() - 6) / 2 -3;
+        painter.setBrush(backColor);
+        painter.setPen(QPen(backColor,3));
+        painter.drawEllipse(QPoint(0,0),radiu,radiu);
+
+        painter.setPen(QPen(backColor,3));
+
+        QSvgRenderer m_svgRender;
+        m_svgRender.load(svgPath);
+        m_svgRender.render(&painter ,QRectF(-radiu / 2,-radiu / 2,radiu,radiu));
+
+        QRect rect = QRect(-radiu, -radiu,
+                           radiu*2, radiu*2);
+
+        painter.setPen(QPen(color.darker(100),3));
+        auto angle = progress * 360 / 100;
+        painter.drawArc(rect.adjusted(-3,-3,3,3),90 * 16,-static_cast<int>(angle * 16));
+    }
+    else if(buttonState == state::closeProgress)
+    {
+        auto radiu = (rect.height() - 6) / 2;
+        painter.translate(rect.center());
+        painter.setPen(Qt::transparent);
+        painter.setBrush(QColor(0, 0, 0, 63));
+        painter.drawEllipse(QPoint(0,0),radiu,radiu);
+
+        radiu -= 3;
+        painter.setBrush(backColor);
+        painter.drawEllipse(QPoint(0,0),radiu,radiu);
+
+        painter.setPen(QPen(color,3,Qt::SolidLine,Qt::RoundCap,Qt::RoundJoin));
+        painter.drawLine(QPoint(-radiu / 3,0),
+                         QPoint(-radiu / 5,radiu / 3));
+        painter.drawLine(QPoint(-radiu / 5,radiu / 3),
+                         QPoint(radiu / 4,-radiu / 4));
+    }
+}
+
+void ProgressButton::setProgress(int progress)
+{
+    buttonState = state::openProgress;
+    ProgressButton::progress = progress;
+    if(progress == 100)
+    {
+        buttonState = state::closeProgress;
+        update();
+        auto waterDrop = new WaterDrop();
+        waterDrop->move(this->mapToGlobal(this->rect().center()));
+        waterDrop->show();
+    }
+    repaint();
+    update();
+}
+
+void ProgressButton::setIcon(QString svgPATH)
+{
+    svgPath = svgPATH;
+    update();
+}
+
+void ProgressButton::setBackgroundColor(QColor color)
+{
+    backColor = color;
+    update();
+}
+
+void ProgressButton::setColor(QColor color)
+{
+    ProgressButton::color = color;
+    update();
+}
+
+void ProgressButton::leaveEvent(QEvent *event)
+{
+    if(buttonState == state::hover)
+    {
+        buttonState = state::normal;
+        update();
+    }
+    QWidget::leaveEvent(event);
+}
+
+void ProgressButton::mousePressEvent(QMouseEvent *event)
+{
+    if(buttonState == state::hover || buttonState == state::normal)
+    {
+        widthChangeValue = (this->width() - 6) / 2;
+        update();
+    }
+    else if(buttonState == state::closeProgress)
+    {
+        update();
+    }
+    emit clicked();
+    QWidget::mousePressEvent(event);
+}
+
+void ProgressButton::operationProcessing()
+{
+
+}
+
+const int RADIUS = 60;
+WaterDrop::WaterDrop(QWidget *parent)
+    : QWidget(parent)
+    , m_waterDropAnimation(nullptr)
+    , m_animationRadius(0)
+{
+    this->setFixedSize(QSize(RADIUS * 2, RADIUS * 2));
+    this->setWindowFlags(Qt::FramelessWindowHint | Qt::Tool);
+    this->setAttribute(Qt::WA_TranslucentBackground);
+    this->setAttribute(Qt::WA_DeleteOnClose);
+    m_waterDropAnimation = new QVariantAnimation(this);
+//    m_waterDropAnimation->setEasingCurve(QEasingCurve(static_cast<QEasingCurve::Type>(QRandomGenerator::global()->bounded(40))));
+}
+
+//把鼠标点击的点转换为圆心点坐标
+void WaterDrop::move(const QPoint &point)
+{
+    QPoint translatePoint = point - QPoint(RADIUS, RADIUS);
+    QWidget::move(translatePoint);
+}
+
+void WaterDrop::show()
+{
+    m_waterDropAnimation->setStartValue(0);
+    m_waterDropAnimation->setEndValue(RADIUS);
+    m_waterDropAnimation->setDuration(350);
+
+    connect(m_waterDropAnimation, &QVariantAnimation::valueChanged, this, &WaterDrop::onRaduisChanged);
+    connect(m_waterDropAnimation, &QVariantAnimation::finished, this, &WaterDrop::close);
+    m_waterDropAnimation->start();
+    QWidget::show();
+}
+
+void WaterDrop::paintEvent(QPaintEvent *event)
+{
+    QPainter painter(this);
+    painter.setRenderHint(QPainter::Antialiasing);
+    QPen pen;
+    pen.setColor(QColor(0xffffff80));
+    pen.setWidth(5);
+    painter.setPen(pen);
+    painter.drawEllipse(event->rect().center(),m_animationRadius, m_animationRadius);
+}
+
+void WaterDrop::onRaduisChanged(QVariant value)
+{
+    m_animationRadius = value.toInt();
+    update();
+}

src/widgets/common/progressbutton.h

@@ -0,0 +1,74 @@
+#ifndef PROGRESSBUTTON_H
+#define PROGRESSBUTTON_H
+
+
+#include <QtWidgets/QWidget>
+
+#include <QPaintEvent>
+
+#include <QTimer>
+#include <QTimerEvent>
+#include<QColor>
+#include <QList>
+#include <QMouseEvent>
+
+
+class ProgressButton : public QWidget
+{
+    Q_OBJECT
+public:
+    ProgressButton(QWidget *parent = nullptr);
+    void setIcon(QString svgPATH);
+    void setBackgroundColor(QColor color);
+    void setColor(QColor color);
+    void setProgress(int progress);
+    ~ProgressButton();
+signals:
+    void startProcessing();
+    void clicked();
+
+protected:
+    void paintEvent(QPaintEvent *event)override;
+    void leaveEvent(QEvent *event)override;
+    void mousePressEvent(QMouseEvent *event)override;
+
+private:
+    enum class state
+    {
+        normal,
+        hover,
+        fromRoundedCornersToRounded,//从圆角变成圆形
+        openProgress,
+        closeProgress,
+        recovery
+    }
+    buttonState{state::normal};
+    QColor backColor;
+    QColor color;
+    QString svgPath;
+    int widthChangeValue{0};
+    void operationProcessing();
+    int progress{0};//处理百分比
+};
+
+class WaterDrop : public QWidget
+{
+    Q_OBJECT
+
+public:
+    WaterDrop(QWidget *parent = Q_NULLPTR);
+    void show();
+    void move(const QPoint &point);
+
+private:
+    void paintEvent(QPaintEvent *event);
+    void onRaduisChanged(QVariant value);
+
+private:
+    class QVariantAnimation* m_waterDropAnimation;
+    int m_animationRadius;
+};
+
+
+
+#endif // PROGRESSBUTTON_H

src/widgets/downloadlistwidget.cpp

@@ -168,6 +168,7 @@ void DownloadListWidget::updateDataReadProgress(QString speedInfo, qint64 bytesR
     theSpeed = speedInfo;
     downloaditemlist[nowDownload - 1]->setMax(10000);   // 最大值
     downloaditemlist[nowDownload - 1]->setValue(int(bytesRead * 100 / totalBytes) * 100);  // 当前值
+    emit downloadProgress(int(bytesRead * 100 / totalBytes));
     download_size = bytesRead;
     if(downloaditemlist[nowDownload - 1]->close)
     {

src/widgets/downloadlistwidget.h

@@ -54,6 +54,7 @@ private slots:
     void on_pushButton_clicked();
 signals:
     void downloadFinished();
+    void downloadProgress(int i);
 };
 
 #endif // DOWNLOADLISTWIDGET_H