Qt QWidget Loading界面并覆盖在其他控件上面

目录

• 一、效果图
• 二、Loading
• 三、使用

一、效果图

界面中有一个Label，一个Button

点击Buttion，显示Loading的界面，并覆盖到Label和Button上面

二、Loading

loadingwidget.h

#ifndef LOADINGWIDGET_H
#define LOADINGWIDGET_H

#include <QTimer>
#include <QWidget>

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

signals:

// QWidget interface
protected:
void paintEvent(QPaintEvent *event) override;
void timerEvent(QTimerEvent *event) override;
void showEvent(QShowEvent *event) override;
void hideEvent(QHideEvent *event) override;

private slots:
void startUpdateTimer();
void stopUpdateTimer();


private:
QTimer *timer;
int m_timerID = -1;
const int UPDATE_INTERVAL_TIME = 60; //ms

int m_angle = 0;  // 旋转的角度

};

#endif // LOADINGWIDGET_H

loadingwidget.cpp

#include "loadingwidget.h"

#include <QPainter>
#include <QDebug>

LoadingWidget::LoadingWidget(QWidget *parent)
    : QWidget{parent}
{
    setAttribute(Qt::WA_StyledBackground);
    setStyleSheet("QWidget{background-color: rgba(0, 0, 0, 127);}");
}


void LoadingWidget::paintEvent(QPaintEvent *event)
{
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing);

    // 定义旋转中心和旋转角度
    painter.translate(width() / 2, height() / 2);
    painter.rotate(m_angle);

    // 设置笔的宽度和颜色，并画圆
    int radius = width() / 20;    // 圆的半径
    QPen pen;
    pen.setWidth(radius / 5);
    pen.setColor(QColor(0, 0, 0, 127));
    painter.setPen(pen);
    painter.drawEllipse(-radius, -radius, 2*radius, 2*radius);

    // 在圆上画一个定义好颜色的扇形外边框
    pen.setColor(QColor(0, 160, 230));
    painter.setPen(pen);
    painter.drawArc(-radius, -radius, 2*radius, 2*radius, 0 * 16, 90 * 16);

}


void LoadingWidget::timerEvent(QTimerEvent *event)
{
    m_angle = (m_angle + 10) % 360; // 每次旋转10度
    update();
    qDebug() << "update " << m_angle;
}


void LoadingWidget::showEvent(QShowEvent *event)
{
    QMetaObject::invokeMethod(this, "startUpdateTimer");
}

void LoadingWidget::hideEvent(QHideEvent *event)
{
    QMetaObject::invokeMethod(this, "stopUpdateTimer");
}

void LoadingWidget::startUpdateTimer()
{
    if(m_timerID == -1){
        // 每 UPDATE_INTERVAL_TIME 毫秒触发定时器，执行timerEvent，更新UI
        m_timerID = startTimer(UPDATE_INTERVAL_TIME);
    }
}

void LoadingWidget::stopUpdateTimer()
{
    if (m_timerID != -1) {
        killTimer(m_timerID);
        m_timerID = -1;
    }
}

三、使用

mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include "loadingwidget.h"

#include <QMainWindow>

QT_BEGIN_NAMESPACE
namespace Ui {
class MainWindow;
}
QT_END_NAMESPACE

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

private slots:
    void on_pushButton_clicked();

private:
    Ui::MainWindow *ui;

    LoadingWidget* loadingWidget;

    // QWidget interface
protected:
    void resizeEvent(QResizeEvent *event) override;

};
#endif // MAINWINDOW_H

mainwindow.cpp

#include "loadingwidget.h"
#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    loadingWidget = new LoadingWidget(this);
    loadingWidget->setFixedSize(width(), height());  // 设置窗口大小
    loadingWidget->hide();
}

MainWindow::~MainWindow()
{
    delete ui;
}

void MainWindow::on_pushButton_clicked()
{
    loadingWidget->show();

    // 点击按钮显示Loading界面后，10秒结束显示
    QTimer::singleShot(10000, [this](){
        loadingWidget->hide();
    });
}

// Loading界面的大小随父窗口的大小而改变
void MainWindow::resizeEvent(QResizeEvent *event)
{
    loadingWidget->setFixedSize(width(), height());  // 设置窗口大小
}