Qt 使用QDialog实现界面遮罩的示例(蒙版)

更新时间：2022年04月29日 11:43:25 作者：slowlytalk

界面遮罩在很多时候都可以用到，例如弹窗，本文主要介绍了Qt 使用QDialog实现界面遮罩的示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

写应用程序的过程中，弹窗是个避免不了的功能，显示中，假设弹窗背景色和主窗口背景色相差不多，甚至是一样的时候，就会存在一个比较严重的人机交互和UI显示的问题，找到弹窗的边界是比较麻烦的一件事。但是如果我们能在弹窗显示的时候被主窗口其他的部位增加一个背景色，这个背景色与弹窗的背景色形成比较大的色差，那么是不是就能够很容易的找到弹窗的边界。因此，我们实现一个自定义组件，可随便设置需要遮罩的主窗口，并且能够让其跟随主窗口的移动而移动。

先来看下效果：

根据需求功能，我们需要提供设置主窗口的接口，同样的，并不是说所有的窗口都需要进行遮罩，那么我们也同样需要知道哪些窗口是需要遮罩的，因此，还需要提供一个判断的标准，在一个工程里面，每个UI文件的objectName是独一份的，因此我们可以通过这些objectName来判断哪些dialog需要遮罩。
该类是在需要被遮罩的dialog显示出来的时候自动调用显示，而不需要手动调用，因此需要检测全局的事件循环。

以上，我们来看下该组件的头文件定义：

#ifndef MASK_WIDGET_H
#define MASK_WIDGET_H

#include <QDialog>

namespace Ui {
    class MaskWidget;
}
class MaskWidget : public QDialog
{
    Q_OBJECT
    Q_PROPERTY(QStringList names READ names WRITE setNames DESIGNABLE true)

public:

    static MaskWidget *instance();

    void setMainWidget(QWidget* pWidget);
    
    QStringList names() const;
 	void setNames(const QStringList& names);


protected:
    bool eventFilter(QObject *obj, QEvent *event);

private:
    explicit MaskWidget(QWidget *parent = Q_NULLPTR);
    ~MaskWidget();

private:
    Ui::MaskWidget* ui;
   
    QStringList m_listName{ QStringList() };

    QWidget* m_pMainWidget{ Q_NULLPTR };

    static MaskWidget* m_pSelf;
};

#endif // MASK_WIDGET_H

由上面的类定义也能够看出来，这个组件还是比较简单的，简单到只有两个接口和一个事件过滤函数，所以下面，我们来具体看下其中的实现。

首先是千篇一律的单例实现，该组件在整个工程中独一份就好，多了可能就会出现你想不到的情况（多层覆盖或者冲突了）：

MaskWidget * MaskWidget::m_pSelf = Q_NULLPTR;

MaskWidget * MaskWidget::instance()
{
	if (m_pSelf == Q_NULLPTR)
	{
		m_pSelf = new MaskWidget;
	}
	return m_pSelf;
}

在其构造中，我们需要设置一些window相关的属性，并且将该窗口先隐藏起来，要不然程序一打开就会看到整个上面有一层灰蒙蒙的遮罩。其实最主要的是需要在其构造函数里面注册事件过滤。

MaskWidget::MaskWidget(QWidget *parent) : QDialog(parent), ui(new Ui::MaskWidget)
{
    ui->setupUi(this);
    hide();
    setWindowFlags(Qt::FramelessWindowHint | Qt::Tool |  Qt::WindowDoesNotAcceptFocus);
    qApp->installEventFilter(this);
}

在主程序启动之后，我们还要做两件事，也就是我们前面说的两个接口需要调用实现，一个是设置需要遮罩的主窗口，一个是需要设置弹出需要遮罩的窗口的名称，先看下设置主窗口。

void MaskWidget::setMainWidget(QWidget *pWidget)
{
    this->setFixedSize(QSize(pWidget->width(), pWidget->height()));
    this->setParent(pWidget);
    this->move(pWidget->x(), pWidget->y());
}

由上面可以看出，设置主窗口之后，我们将该组件的父类也设置为了主窗口，这样就能保证该组件显示出来的时候一定是以设置的主窗口为父节点进行显示，并且能够铺满整个主窗口。

显示窗口的设置也是比较简单的属性的操作方式，如下：

void MaskWidget::setNames(const QStringList& names)
{
     if(m_listName == names)
     {
         return;
     }
     m_listName = names;
 }

 QStringList MaskWidget::names() const
 {
     return names;
 }

在整个过程中，其实最主要的是事件过滤函数的实现，该函数基本包含了该组件的基本功能，下面我们看下该函数的实现。

bool MaskWidget::eventFilter(QObject *obj, QEvent *event)
{
    if(event->type() == QEvent::Hide)
    {
        if(m_listName.contains(obj->objectName()))
        {
            hide();
        }
        return QObject::eventFilter(obj, event);
    }

    if (event->type() == QEvent::Show) 
    {
        if (!m_listName.contains(obj->objectName()))
        {
            return QObject::eventFilter(obj, event);
        }

        show();

        auto pWidget = dynamic_cast<QWidget*>(obj);     //将object转换为普通QWidget
        if (Q_NULLPTR == pWidget)
        {
            return QObject::eventFilter(obj, event);
        }
        pWidget->activateWindow();
        pWidget->setFocus(Qt::ActiveWindowFocusReason);
        stackUnder(pWidget);    //将该窗口设置放到弹窗的下面

        if(Q_NULLPTR == m_pMainWidget)
        {
            return QObject::eventFilter(obj, event);
        }

        m_pMainWidget->stackUnder(this);    //将主窗口设置放到该组件界面下方，就能够有一个比较清晰的层次关系

        //下面是实现将弹窗的位置移动到主程序的正中间，在这边实现的目的是为了减少代码量，毕竟写代码能偷的懒还是一定要偷的
        QRect screenGeometry = m_pMainWidget->geometry();
        int x = screenGeometry.x() + (screenGeometry.width() - pWidget->width()) / 2;
        int y = screenGeometry.y() + (screenGeometry.height() - pWidget->height()) / 2;
        pWidget->move(x, y);
    } 

    return QObject::eventFilter(obj, event);
}

以上，该组件的全部功能介绍完了。

使用的过程中了，直接包含文件就能够使用，需要注意的是，弹出的dialog窗口的基类必须QDialog，并且在调用时使用QDialog::exec()函数实现模态。如果不实现模态的话，会出现一些意外，当然这些意外并不影响使用，只是交互上面会比较不友好。假设你的主程序不能移动，那么就会很不友好。

TestDialog dlg;
if(QDialog::Accept == dlg.exec())
{

}

测试代码链接：https://gitee.com/Gqian_com/customcomponent/tree/master/maskwidget

到此这篇关于Qt 使用QDialog实现界面遮罩的示例(蒙版)的文章就介绍到这了,更多相关Qt QDialog界面遮罩内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Qt控件之QDialog使用及技巧小结

C/C++ 监控磁盘与目录操作的示例
这篇文章主要介绍了C/C++ 监控磁盘与目录操作的示例，帮助大家更好的理解和学习C/C++编程，感兴趣的朋友可以了解下
2020-10-10
C++ LeetCode1775通过最少操作次数使数组和相等
这篇文章主要为大家介绍了C++ LeetCode1775通过最少操作次数使数组和相等，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
C++实现LeetCode(50.求x的n次方)
这篇文章主要介绍了C++实现LeetCode(50.求x的n次方),本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
2021-07-07
使用Qt实现旋转动画效果
这篇文章主要为大家详细介绍了如何使用Qt实现旋转动画效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2024-11-11
C++ 逗号运算符的具体使用
本文主要介绍了C++ 逗号运算符的具体使用,使用逗号运算符是为了把几个表达式放在一起,具有一定的参考价值,感兴趣的可以了解一下
2023-08-08
一文详解C语言中的switch语句和while循环
这篇文章主要给大家详细介绍了C语言中的switch语句和while循环，文中通过代码示例给大家介绍的非常详细，对大家的学习或工作有一定的帮助,需要的朋友可以参考下
2023-12-12
二叉树先根（先序）遍历的改进
这篇文章主要介绍了二叉树先根（先序）遍历的改进，有需要的朋友可以参考一下
2014-01-01
C语言编程数据结构的栈和队列
本篇文章是C语言编程篇，主要为大家介绍C语言编程中的数据结构，详细的讲解了数据结构的栈和队列有需要的朋友可以借鉴参考下，希望可以有所帮助
2021-09-09
C++ pair的基本用法总结整理
这篇文章主要介绍了C++ pair的基本用法总结整理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-07-07
vscode终端中打不开conda虚拟包管理的解决
本文主要介绍了vscode终端中打不开conda虚拟包管理的解决,文中通过图文介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2023-09-09

Qt 使用QDialog实现界面遮罩的示例(蒙版)

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具