一、效果展示
二、实现的功能
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>
四、结语
本文章只提供实现方法,具体要模糊化哪些按钮或器件、高亮闪烁哪个按钮以及点击下一步要做什么等功能需要根据自己的需求编写不同的逻辑。我只提供一个可以用的方法。
如有更好的方法或更炫酷有用的实现还望不吝赐教!