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

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

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

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

目录

        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 sys

import 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 = True
		self.m_Position = event.globalPos() - self.pos()
		event.accept()
	elif event.button() == Qt.RightButton:
		self.m_flag = False

def 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 sys

import 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,0
		self.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 = True
			self.m_Position = event.globalPos() - self.pos()
			event.accept()
		elif event.button() == Qt.RightButton:
			self.m_flag = False

	def 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

if __name__ == '__main__':
	app = QApplication(sys.argv)
	dialog = Test()
	dialog.show()
	app.exec_()