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

目录

一、效果图

界面中有一个Label,一个Button

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

二、Loading

loadingwidget.h

cpp 复制代码
#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

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

cpp 复制代码
#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

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());  // 设置窗口大小
}
相关推荐
转世成为计算机大神10 分钟前
易考八股文之Java中的设计模式?
java·开发语言·设计模式
宅小海28 分钟前
scala String
大数据·开发语言·scala
qq_3273427331 分钟前
Java实现离线身份证号码OCR识别
java·开发语言
锅包肉的九珍32 分钟前
Scala的Array数组
开发语言·后端·scala
心仪悦悦35 分钟前
Scala的Array(2)
开发语言·后端·scala
yqcoder1 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
baivfhpwxf20231 小时前
C# 5000 转16进制 字节(激光器串口通讯生成指定格式命令)
开发语言·c#
许嵩661 小时前
IC脚本之perl
开发语言·perl
长亭外的少年1 小时前
Kotlin 编译失败问题及解决方案:从守护进程到 Gradle 配置
android·开发语言·kotlin
直裾1 小时前
Scala全文单词统计
开发语言·c#·scala