QT C++制作引导式操作

最新推荐文章于 2024-06-13 21:12:59 发布

Hugury and foolish

最新推荐文章于 2024-06-13 21:12:59 发布

阅读量758

点赞数 10

文章标签： qt c++

本文链接：https://blog.csdn.net/m0_61778867/article/details/137350110

版权

一、效果展示

二、实现的功能

1）界面模糊化，高亮某个按钮或某个区域实现聚焦。

2）按钮闪烁和阴影效果，引导点击。类似微信接收到消息。

3）气泡式引导操作，文字提醒。

三、实现的代码

1、气泡式引导操作

需要有两个界面，我假设为A界面和B界面。A界面为你原来的界面，B界面为气泡式引导操作界面

B界面实现：

.h文件的实现

#ifndef GUIDEOPERATION_H
#define GUIDEOPERATION_H

#include <QWidget>
//#include "./languagehelper.h"
namespace Ui {
class CGuideOperation;
}

class CGuideOperation : public QWidget
{
    Q_OBJECT

public:
    explicit CGuideOperation(QWidget *parent = 0);
    ~CGuideOperation();

    void setLabelGuideText(QString qsInfo);

    void setLabelImage(QImage img);

    void finishGuide();

    void hideLabelImg();

    void setPushbuttonEnable(bool bFlag);

private slots:
    void on_pushButtonNext_clicked();

    void on_pushButtonNoLongerTip_clicked();

signals:
    void signalNextStep();

    void signalNoLongerTip();
private:
    Ui::CGuideOperation *ui;

    bool bFlag = false;
};

#endif // GUIDEOPERATION_H

.cpp的实现

#include "GuideOperation.h"
#include "ui_GuideOperation.h"
#include <QDebug>
#include <QGuiApplication>
#include <QScreen>

CGuideOperation::CGuideOperation(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::CGuideOperation)
{
    ui->setupUi(this);
    //ui->label->setStyleSheet("font-size: 10pt;");
    connect(CLanguageHelper::getInstance(),&CLanguageHelper::languageChaned,this,[=](){
        ui->retranslateUi(this);
    });
    QScreen *screen = QGuiApplication::primaryScreen();
    QRect screenSize = screen->geometry();
    this->setFixedSize(screenSize.width(), screenSize.height());    /*  设置大小为你电脑屏幕的大小，这个按照个人需求设置大小*/
    setWindowFlags(Qt::FramelessWindowHint);                        /*  创建一个无边框的窗口，即没有标题栏、边框和窗口装饰 */
    setAttribute(Qt::WA_TranslucentBackground);                     /*  使窗口具有半透明背景 */
    ui->widget->setAttribute(Qt::WA_TranslucentBackground);         /*  设置小部件的背景为半透明 */
    setAttribute(Qt::WA_TransparentForMouseEvents, false);          /*  设置鼠标穿透 */
    ui->labelImage->hide();
    //    ui->widget->setAttribute(Qt::WA_TransparentForMouseEvents, false);
    //    ui->pushButtonNext->setAttribute(Qt::WA_TransparentForMouseEvents, false);
    //    ui->pushButtonNoLongerTip->setAttribute(Qt::WA_TransparentForMouseEvents, false);

}

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


void CGuideOperation::setLabelGuideText(QString qsInfo){

    ui->label->setText(qsInfo);
}

void CGuideOperation::setLabelImage(QImage img){

    if(!img.isNull()){
        QSize labelSize = ui->labelImage->size();
        double widthScale = static_cast<double>(labelSize.width()) / img.width();
        double heightScale = static_cast<double>(labelSize.height()) / img.height();
        double scale = qMin(widthScale, heightScale);
        QImage scaledImage = img.scaledToWidth(static_cast<int>(img.width() * scale), Qt::SmoothTransformation);

        ui->labelImage->setPixmap(QPixmap::fromImage(scaledImage));
    }
    ui->labelImage->show();
}


void CGuideOperation::on_pushButtonNext_clicked(){

    emit signalNextStep();
}

void CGuideOperation::on_pushButtonNoLongerTip_clicked(){

    emit signalNoLongerTip();
}

void CGuideOperation::finishGuide(){

    ui->pushButtonNext->setText(tr("完成引导操作"));
}

void CGuideOperation::hideLabelImg()
{
    ui->labelImage->hide();
}

void CGuideOperation::setPushbuttonEnable(bool bFlag)
{
    ui->pushButtonNext->setEnabled(bFlag);
}

对于不需要的功能可以进行删除。

然后在A界面实例化B界面的类进行显示

        CGuideOperation *m_pGuideOperation = new CGuideOperation(this);
        m_pGuideOperation->show();
        m_pGuideOperation->raise(); /* 这个很重要设置气泡式的UI界面等级为最高 */
        m_pGuideOperation->setLabelGuideText(tr("跟着我的引导，我来告诉你如何使用这个软件\r\n"
                                                "你可以点击下方不在提示来结束引导."));

------------------------------------------------------------------------------------------------------------------

2、按钮闪烁和阴影效果

QTimer* timeFlashButton = new QTimer(this);
connect(timeFlashButton, &QTimer::timeout, this, &MainWindow::flashButoon);

QGraphicsDropShadowEffect *shadowEffect = new QGraphicsDropShadowEffect;
shadowEffect->setBlurRadius(10); // 设置阴影的模糊半径
shadowEffect->setColor(Qt::red); // 设置阴影的颜色
ui->toolButton_set->setGraphicsEffect(shadowEffect); // 将阴影效果应用到按钮上
timeFlashButton->start(500);

3、界面模糊化

    QGraphicsBlurEffect *blurEffect1 = new QGraphicsBlurEffect;
    QGraphicsBlurEffect *blurEffect2 = new QGraphicsBlurEffect;
    QGraphicsBlurEffect *blurEffect3 = new QGraphicsBlurEffect;
    QGraphicsBlurEffect *blurEffect4 = new QGraphicsBlurEffect;
    QGraphicsBlurEffect *blurEffect5 = new QGraphicsBlurEffect;
    QGraphicsBlurEffect *blurEffect6 = new QGraphicsBlurEffect;
    blurEffect1->setBlurRadius(8); // 设置模糊半径
    blurEffect2->setBlurRadius(8); // 设置模糊半径
    blurEffect3->setBlurRadius(8); // 设置模糊半径
    blurEffect4->setBlurRadius(8); // 设置模糊半径
    blurEffect5->setBlurRadius(8); // 设置模糊半径
    blurEffect6->setBlurRadius(8); // 设置模糊半径
    /* 以下是对你想要模糊化的按钮或Widget或其它器件进行模糊，不想要模糊的器件参数填nullptr */
    ui->infoWidget->setGraphicsEffect(blurEffect1);
    ui->wigBack->setGraphicsEffect(blurEffect2);
    ui->toolButton_exit->setGraphicsEffect(blurEffect3);
    ui->toolButton_image->setGraphicsEffect(blurEffect4);
    ui->toolButton_start->setGraphicsEffect(blurEffect5);
    ui->toolButton_stop->setGraphicsEffect(blurEffect6);
    ui->toolButton_set->setGraphicsEffect(nullptr);

记得包含 #include <QGraphicsBlurEffect>