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界面遮罩内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • python GUI库图形界面开发之PyQt5中QMainWindow, QWidget以及QDialog的区别和选择

    PyQt中MainWindow, QWidget以及Dialog的区别和选择 1. Qt界面分类 在Qt Designer设计界面时,首先需要选择界面模板,主要分为三个类: Main Window Widget Dialog 2. 三种模板的区别(官方文档介绍) MainWindow QMainWindow类提供一个有菜单条.锚接窗口(例如工具条)和一个状态条的主应用程序窗口. 主窗口通常用在提供一个大的中央窗口部件(例如文本编辑或者绘制画布)以及周围菜单.工具条和一个状态条.QMainWind

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

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

  • 基于Qt实现驾校科目考试系统的示例代码

    目录 1.设置登录界面 2.登录功能实现 2.1验证邮箱地址 2.2账号密码登录 2.3密码隐藏 3.考试界面开发 3.1考试用时 3.2题目布局 3.3按钮布局 3.4提交分数 3.5窗口交互 4.发布项目 4.1更改编译路径 4.2设置图标 4.3通过dos进行项目打包 1.设置登录界面 LoginDialog::LoginDialog(QWidget *parent) : QDialog(parent), ui(new Ui::LoginDialog) { ui->setupUi(this

  • Qt编写地图实现闪烁点图的示例代码

    目录 一.前言 二.功能特点 三.体验地址 四.效果图 五.相关代码 一.前言 Qt作为一个超大型的一站式GUI超市开发集成环境,不仅集成了大量的可视化UI组件,还提供了网络库.数据库操作.文件操作等类库,封装的还是相当精彩一步到位,根据个人身边的一些程序员朋友了解,自从用了Qt以来发现越来越喜欢用Qt本身的类来处理,除非一些要求很高的应用场景比如并发网络才需要去使用第三方库,不然就是直接使用Qt封装好的类,用起来非常爽,尤其是类的名称和方法的名称,几乎很自然的就能打出来. Qt除了内置了各种U

  • Qt实现数据导出到xls的示例代码

    目录 一.前言 二.功能特点 三.体验地址 四.效果图 五.相关代码 一.前言 导入导出数据到csv由于语法简单,适用场景有限,于是乎还是必须再造一个轮子导出数据到xls,在经历过数十年的项目实战经验中不断调整和优化.尤其记得当初第一个版本v0.01大概在2011年左右完成的,当时是公司项目运行在嵌入式板子上,需要导出警情记录,拷贝到电脑上打印,由于嵌入式根本没有也不可能去安装excel等软件,硬着头皮去研究了xml格式的xls文件,按照那个规则组合成简单的导出数据,这个思路想法理论上比QtXl

  • 基于Qt实现简易GIF播放器的示例代码

    目录 一.项目介绍 二.项目基本配置 三.UI界面设计 四.主程序实现 4.1 mainwindow.h头文件 4.2 mainwindow.cpp源文件 五.效果演示 一.项目介绍 利用Qt设计一个简易GIF播放器,可以播放GIF动画.其基本功能有载入文件.播放.暂停.停止.快进和快退. 二.项目基本配置 新建一个Qt案例,项目名称为“GIFTest”,基类选择“QMainWindow”,创建UI界面复选框的选中状态,完成项目创建. 三.UI界面设计 UI界面如下: 界面中创建了8个控件,其名

  • Qt MQTT开发环境搭建的实现示例

    目录 1.概述 2.下载地址 3.编译 4.编译examples下的客户端 5.客户端运行界面 1.概述 由于MQTT的库没有加入到Qt的标准里面,所以,我们需要自己去下载MQTT的源码进行编译. Qt版本:5.10 编译器:mingw 在QtCreator上进行编译 2.下载地址 https://github.com/qt/qtmqtt​​​​​​​ 这里选择5.12的版本就行编译. 3.编译 下载完成后,解压文件,目录如下图所示. 双击qtmqtt.pro,在qtcreator中打开项目工程

  • java通过JFrame做一个登录系统的界面完整代码示例

    在java的JFrame内通过创建匿名对象的方式做登录界面 package com.sxt; import java.awt.Container; import java.awt.GridLayout; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import javax.swing.JButton; import javax.swing.JFrame; import javax.swing.J

  • python tkinter实现界面切换的示例代码

    跳转实现思路 主程序相当于桌子: import tkinter as tk root = tk.Tk() 而不同的Frame相当于不同的桌布: face1 = tk.Frame(root) face2 = tk.Frame(root) ... 每个界面采用类的方式定义各自的控件和函数,每个界面都建立在一个各自定义的Frame上,那么在实现跳转界面的效果时, 只需要调用tkinter.destroy()方法销毁旧界面,同时生成新界面的对象,即可实现切换. 而对于切换的过程中改变背景颜色和大小,可以

  • PyQt5多线程刷新界面防假死示例

    在做GUI界面时我们希望后台任务能够与UI分开,在PyQt中,主线程用来重绘界面.而子线程里边的实时处理结果需要反馈到界面,子线程里边不能执行界面更新操作. wxpython多线程刷新界面转到 https://www.jb51.net/article/176308.htm 下面给出类Python3+PyQt5多线程防假死动态刷新界面的模板 from PyQt5 import QtWidgets, QtCore import sys from PyQt5.QtCore import * impor

  • Python聊天室带界面实现的示例代码(tkinter,Mysql,Treading,socket)

    一.前言 我用的是面向对象写的,把界面功能模块封装成类,然后在客户端创建对象然后进行调用.好处就是方便我们维护代码以及把相应的信息封装起来,每一个实例都是各不相同的. 所有的界面按钮处理事件都在客户端,在创建界面对象是会把客户端的处理事件函数作为创建对象的参数,之后再按钮上绑定这个函数,当点击按钮时便会回调函数 二.登录界面实现 登录界面模块chat_login_panel.py from tkinter import * # 导入模块,用户创建GUI界面 # 登陆界面类 class Login

随机推荐