本人小白, 网罗各个网页与资源学习总结的内容, 设置界面无边框且留有阴影, 且鼠标左键可以拖动界面的方法.

首先我们寻找一个模板进行学习演示, 例如腾讯会议的界面:

本人会仿照这个界面进行演示说明, 包括各种样式(你看到就是赚到)

如若只想知道界面阴影与鼠标拖动的实现, 可以直接点击下方目录进行传送

目录

1、界面设计，包括样式表的实现

2、界面阴影的实现与鼠标拖动事件的实现

1、界面设计，包括样式表的实现

首先,在Qt Designer中拖入一些PushButton和Label与frame进行初始的部署, 类似于这样:

这个就是一个初始的模型, 本人将一步步教你如何将它变成像腾讯会议界面那般, 接下来我们设置一下按钮的大小和形状:

右上角的两个PushButton是最小化和关闭按钮, 宽度和高度设为25左右即可, 然后根据你的frame的宽度高度调整X和Y坐标的值, 使其移动到右上角; 之后双击文本框输入"-"和"×", 当然你也可以找图片进行替换, 但是输入文本比较方便. 对其他PushButton也进行大小调整, 之后你就会得到:

接着我们在最上面的TextLabel上输入"XX会议"或者你喜欢的任意文字作为标题, 可以适当的调整文字大小与文本框的位置使其赏心悦目.

接下来需要保存一下这个Ui文件, 因为要添加图片需要资源文件(你又赚到一个知识点), 在保存的文件夹内创建一个文本文件, 重命名为image.qrc, 之后双击通过文本打开, 输入以下:

<RCC><qresource prefix="/"><file>Logo.jpg</file></qresource>
</RCC>

<file>与</file>之间的文字为你图片的名称

之后添加图片可以在<file>Logo.jpg</file>下一行添加, 注意下一行与上一行需对齐

保存后关闭, 在中间的TextLabel点击右键, 选择改变样式表, 点击添加资源, 选择background-image, 在弹出的窗口中点击那个铅笔(编辑资源), 之后在弹出的窗口中点击左下角的打开资源文件, 然后选择我们创建的image.qrc即可, 点击OK之后, 双击表格中的<resource root>就可以看得右边出现我们添加的Logo.jpg了. 选择它点击OK, 之后再点击OK就即可.

将中间的Text Label边框拉大, 将文字删除得到一个Logo, 如图:

之后通过上述方法, 改变样式表的添加资源选择image对PushButton们进行图片添加, 如下:

现在文字与图像已经添加完, 开始进行样式表的修改了, 首先处理frame背景的样式表, 右击frame选择改变样式表, 进行样式表输入, 输入如下:

#frame{background-color: rgb(255, 255, 255);border: 5px, white;border-radius: 4px;margin: 5px;
}

其中#frame{ }表示样式表只作用于frame, 不会对于frame的子类进行继承;

background-color表示背景色, rgb(255, 255, 255)为白色;

border表示边框, 边框线为5px, 边框线为白色white;

border-radius表示边框角为圆角, 圆角半径为4px;

margin表示边框的空白, 空白的长度为5px;

上述的内容都可以根据自己对于界面的需求进行修改, 修改数值可以让你对样式表拥有更直观的感受, 其中margin所空出来的空白是用于之后阴影的添加.

添加完样式表, 并对PushButton和TextLabel文本进行修改, 如下:

接下来开始对PushButton进行样式表的添加, 上方的按键的样式表如下:

最小化按键样式表:

QPushButton{background-color: rgb(255, 255, 255);font: 15pt "宋体" ;border:none;border-radius:none;  color: gray;
}QPushButton:hover{background-color: rgb(218, 218, 218);
}QToolTip{background-color: rgb(255, 255, 255);
}

关闭按键样式表:

QPushButton{background-color: rgb(255, 255, 255);font: 10pt "宋体" ;border:none;border-top-right-radius:4px;border-top-left-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;color: gray;
}QPushButton:hover{background-color: rgb(218, 218, 218);
}QToolTip{background-color: rgb(255, 255, 255);
}

设置按键样式表:

QPushButton{image: url(:/Setup.png);border:none;border-radius:none;
}QPushButton:hover{image: url(:/Setup_1.png);
}QToolTip{background-color: rgb(255, 255, 255);
}

其中, QPushButton表示按键本身的样式, QPushButton:hover表示在鼠标移动到按键上时的样式, QToolTip表示鼠标移动到按键上时的提示的样式, 提示的内容可以在下图位置输入:

在toolTip输入最小化, 表示在鼠标移动到最小化按键时, 鼠标下方会出现提示的文字, 内容是"最小化".

在上述样式表中, 需要注意的有:

color表示的是字体颜色;

border-top-right-radius:4px;
        border-top-left-radius:0px;
        border-bottom-right-radius:0px;
        border-bottom-left-radius:0px;

表示边框的上右方为圆角, 上左方、下右方和下左方为方角

在设置样式表中显示按钮为图片Setup.png, 鼠标移动到该按钮时显示的是Setup_1.png, Setup_1.png是淡化了的Setup.png

将设置按键的大小设为35左右(可根据自己图案进行修改), 最小化和关闭按键坐标调整, 如下:

之后对剩下的按键的样式表进行添加:

微信登录按键样式表:

QPushButton{
background-color: rgb(25, 126, 249);
font: 10pt "宋体";
border:1px solid white;
border-radius:2px;
margin:1px;
qproperty-icon:url(:/WeC.png);
color: white;
padding:2px 2px;
}
QPushButton:hover{
background-color: rgb(26, 175, 255);
}
QPushButton:pressed{
background-color: rgb(255, 255, 255);
color: black;
}

加入会议按键样式表:

QPushButton{
background-color: white;
font: 10pt "宋体";
border:1px solid gray;
border-radius:2px;
margin:1px;
color: rgb(25, 126, 249);
padding:2px 2px;
}
QPushButton:hover{
border:1px solid rgb(25, 126, 249);
}
QPushButton:pressed{
background-color: rgb(255, 255, 255);
color: black;
}

下面三个图标的样式表:

QPushButton{
image: url(:/Phone.png);
background-color:#f8f8f7;
border:2px solid white;
border-radius:25px;
}
QPushButton:hover{
border:2px #b0b0b0;
background-color:#dfdfdf;
}
QPushButton:pressed{
background-color: rgb(255, 255, 255);
}

其中需要注意的有:

微信按键样式表中:

qproperty-icon:url(:/WeC.png)表示按键文字旁的图标;

padding:2px 2px表示按键容器内间距为上下2px, 左右2px;

QPushButton:pressed表示按键被按下时的样式;

下面三个图标的样式表:

image: url(:/Phone.png)三个图标的图片都不同, 需要修改各种图片名称;

background-color:#f8f8f7其中#f8f8f7为另一种颜色表示形式;

border-radius:25px在本人的设置中, 按键宽度与长度皆为50, 将边框半径设为25px, 则按键会变为正圆形;

最后"其他登录方式"的样式修改为color: rgb(171, 171, 171);

得到:

界面的设计到这里就已经完成了！

2、界面阴影的实现与鼠标拖动事件的实现

在界面完成之后需要对其进行.ui转.py的操作, 例:

pyuic5 .\untitled.ui -o .\untitled.py

由于使用了图像资源, 还需要进行.qrc转.py的操作, 例:

pyrcc5 .\image.qrc -o .\image_rc.py

首先因为界面可能需要经常修改, 所以不建议直接在转化后的.py文件上进行代码的编写, 因为一经转化, 之前修改的一切都会被重置, 所以创建一个新的.py文件用于修改和编辑界面. 新文件内容如下:

from PyQt5.QtGui import *
from PyQt5.QtCore import *
from PyQt5.QtWidgets import *
from PyQt5.QtWidgets import QApplication, QWidget
import sysimport untitled           #转化之后的.py文件名class Test(QWidget):def __init__(self, parent = None):super(Test, self).__init__(parent)self.UntitledUi = untitled.Ui_Form()  #转化之后的class的名字self.UntitledUi.setupUi(self)if __name__ == '__main__':app = QApplication(sys.argv)dialog = Test()dialog.show()app.exec_()

运行的结果如下:

在self.UntitledUi.setupUi(self)下方添加如下代码实现无边框和阴影效果:

self.setWindowFlag(Qt.FramelessWindowHint)       #将界面设置为无框
self.setAttribute(Qt.WA_TranslucentBackground)  #将界面属性设置为半透明
self.shadow = QGraphicsDropShadowEffect()      #设定一个阴影,半径为10,颜色为#444444,定位为0,0
self.shadow.setBlurRadius(10)
self.shadow.setColor(QColor("#444444"))
self.shadow.setOffset(0, 0)
self.UntitledUi.frame.setGraphicsEffect(self.shadow)    #为frame设定阴影效果

阴影的半径、颜色与定位皆可自行修改, 修改后运行看看效果, 能更好的理解这段代码.

运行效果如下:

但是这个时候界面还无法移动, 所以需要重写一下鼠标事件, 在下方另起一段函数开头:

def mousePressEvent(self, event):        #鼠标左键按下时获取鼠标坐标,按下右键取消if event.button() == Qt.LeftButton:self.m_flag = Trueself.m_Position = event.globalPos() - self.pos()event.accept()elif event.button() == Qt.RightButton:self.m_flag = Falsedef mouseMoveEvent(self, QMouseEvent):  #鼠标在按下左键的情况下移动时,根据坐标移动界面if Qt.LeftButton and self.m_flag:self.move(QMouseEvent.globalPos() - self.m_Position)QMouseEvent.accept()def mouseReleaseEvent(self, QMouseEvent):  #鼠标按键释放时,取消移动self.m_flag = False

此时运行后, 则可以通过长按鼠标左键进行界面的拖动了

整体的代码(添加了最小化按键和关闭按键的实现)如下:

from PyQt5.QtGui import *
from PyQt5.QtCore import *
from PyQt5.QtWidgets import *
from PyQt5.QtWidgets import QApplication, QWidget
import sysimport untitled           #转化之后的.py文件名class Test(QWidget):def __init__(self, parent = None):super(Test, self).__init__(parent)self.UntitledUi = untitled.Ui_Form()  #转化之后的class的名字self.UntitledUi.setupUi(self)self.setWindowFlag(Qt.FramelessWindowHint)       #将界面设置为无框self.setAttribute(Qt.WA_TranslucentBackground) #将界面属性设置为半透明self.shadow = QGraphicsDropShadowEffect()     #设定一个阴影,半径为10,颜色为#444444,定位为0,0self.shadow.setBlurRadius(10)self.shadow.setColor(QColor("#444444"))self.shadow.setOffset(0, 0)self.UntitledUi.frame.setGraphicsEffect(self.shadow) #为frame设定阴影效果self.UntitledUi.pushButton_3.clicked.connect(self.close)       #关闭按钮信号槽self.UntitledUi.pushButton_2.clicked.connect(self.showMinimized)#最小化按钮信号槽def mousePressEvent(self, event):      #鼠标左键按下时获取鼠标坐标,按下右键取消if event.button() == Qt.LeftButton:self.m_flag = Trueself.m_Position = event.globalPos() - self.pos()event.accept()elif event.button() == Qt.RightButton:self.m_flag = Falsedef mouseMoveEvent(self, QMouseEvent):  #鼠标在按下左键的情况下移动时,根据坐标移动界面if Qt.LeftButton and self.m_flag:self.move(QMouseEvent.globalPos() - self.m_Position)QMouseEvent.accept()def mouseReleaseEvent(self, QMouseEvent):  #鼠标按键释放时,取消移动self.m_flag = Falseif __name__ == '__main__':app = QApplication(sys.argv)dialog = Test()dialog.show()app.exec_()

PyQt5下界面设计, 无边框加阴影界面, 鼠标左键移动事件相关推荐

  1. 网站选择按钮点击无反应?_Win10系统电脑鼠标左键单击没有反应的解决办法

    Win10系统鼠标左键单击没有反应是怎么回事?最近一个用户在用电脑的时候,突然遇到鼠标左键单击没有反应的问题,是鼠标坏了吗?还是系统问题呢?今天就给大家分析Win10系统电脑鼠标左键单击没有反应的可能 ...

  2. python 图标字体_Python+PyQt：使用图标字体打造无边框通用导航界面

    Python是一种面向对象的高级动态编程语言,相比于其它如C/C++语言,具有上手快.代码少.开发效率高的特点,Qt是跨平台的C++图形用户界面应用程序开发框架,是当前主流的GUI开发工具之一,其在P ...

  3. 【C#】使用DWM实现无边框窗体阴影或全透窗体

    1.无边框窗体阴影,win7(需要开启Aero效果)及以上系统 public class LdwmForm : Form{public LdwmForm(){Initialize();}/// < ...

  4. Android学习之登陆界面设计（二）基本界面设计

    Android学习之登陆界面设计(二)基本界面设计 前提 绘图样式 - drawable bg_login_btn_submit.xml bg_login_panel_slide.xml bg_log ...

  5. 用户和计算机通信的界面设计,数据分析系统的交互界面设计

    摘要:针对位置敏感探测器件构成的数据分析系统,借助开发工具及MFC消息映射机制,实现系统交互界面的设计.界面通过对串口通信和USB通信方法的研究,利用按钮控件实现并控制上下位机数据通信:数据传输处理之 ...

  6. 无边框模式对话框,设置鼠标拖动

    无边框模式对话框,设置鼠标拖动 1. 对话框中创建成员变量 long _icur; 2. 响应对话框类消息 WM_NCHITTEST ScreenToClient(&point); RECT ...

  7. Windows 8/8.1 下，键盘长按键后，鼠标左键短暂失灵问题

    在Windows8.1系统下,玩FPS系列游戏(鬼泣5,剑灵等),键盘某按键长按的同时鼠标左键会暂时失灵. 以下是解决方法,转载自http://blog.csdn.net/maxsky/article ...

  8. Unity鼠标拖动物体、按下鼠标左键旋转观察物体、鼠标滚轮缩放视野

    如题目所示,本文实现这三个效果.所有代码都在pc端成功运行,移植到手机端改变相应的判断条件即可,核心算法没有问题. 一. 鼠标拖拽移动物体 效果演示 源代码 public class mousedra ...

  9. Javascript如何判断按下的是鼠标左键还是右键

    Javascript如何判断按下的是鼠标左键还是右键 一.需求:在页面上某个元素上点击鼠标右键,弹出二级悬窗(右键菜单). 二.解决技术问题:如何监听鼠标右键事件 三.解决方案:  1.使用jquer ...

最新文章

  1. python 的保留字
  2. android fm 耳机,Android杂谈:音频调试小计
  3. 简单工厂模式（详细）（举例饮料）
  4. 数据流重定向和管道命令, grep, tr,sort, wc, cut,split,tee,sleep(shell 02)
  5. MVC3快速搭建Web应用(二)
  6. （十四）面向对象之多态
  7. 总裁徐雷“接管”京东 但拍板的仍是刘强东
  8. pyqt怎么button怎么链接_SEO内部链接怎么优化
  9. matlab画圆函数
  10. 阿里云SLS日志服务
  11. 前端学习从入门到高级全程记录之43 （PHP基础Ⅵ）
  12. 19南大软院上岸学姐考研经验分享
  13. 转行做软件编程开发的经历
  14. bugku never give up
  15. ALSA子系统（一）------Frames Periods
  16. win7一直显示正在关机_win7系统一直卡在正在关机无法关机怎么解决
  17. 聚美优品CEO陈欧：“陈欧体”传奇式逆袭
  18. “骑驴找马”被上司发现了，怎么办？
  19. 《数据库原理与应用》（第三版）习题参考答案
  20. Tools - 视频编辑软件Vegas Pro

热门文章

  1. JS 进阶: 深入理解键盘事件 Keyboard Event
  2. SIGGRAPH2005!!!
  3. 颜色传感器TCS230及颜色识别电路（转）
  4. 主角连击敌人处理：连击特效的显示---2
  5. SEO教程，微信seo教程
  6. 顾客选择标准：顾客感知价值(CPV)
  7. swift 选中长按项_Swift TableView 的多选复选实现
  8. 商淘软件IM客服系统 即时对话客服系统 客服互动
  9. 碰撞检测算法之GJK算法
  10. 学术前沿丨大数据在劳动力市场研究中的应用与展望