主窗体一般都含有菜单栏、工具栏、状态栏,我们先看看菜单栏的一些功能和属性。
1、菜单栏
所属类: QMenuBar()
打开 pycharm ----> Tools ----> Qt designer
没有配置 Qt Designer 去看 pyqt5 开发环境搭建
1.1、菜单栏以及子项的添加
-
选择 QMainWindow 模板,然后 双击 Type Here —> 输入标题 ----> Enter 确认
-
添加 子项目
比如为 file 添加 open 、close 、save
选中 file ----> 双击 Type Here —> 输入标题 ----> Enter 确认
其中 Add Separator 是添加分割线的
3) 界面预览
1.2 、菜单栏点击事件
菜单栏点击后回调的方法是 triggered()
1) 我们把我们做的上一步的ui 文件转化成 py 文件,并且编写一个main.py,作为整个程序的入口文件,且实现界面和逻辑的分离。
代码结构 如图:
这个时候我们尝试运行一下:
可以看到 open close save 按钮是没有任何反应的
2) 添加 按钮的点击事件
这就需要在代码中进行点击事件的回调函数。
运行实例:
我们看到我们已经能够捕获到,open 的点击事件
1.3、 菜单栏快捷方式添加
我们通过为菜单栏添加快捷键来通过键盘实现对他们的操作
1) 对于菜单栏快捷键的设置
通过在状态栏组件后输入 ( & + 快捷键)来实现。
以 File 为例,在setTitle()为其设置显示文字时 在后面添加“ (&F)”,
这样File 的快捷键就是 “alt + f”。而没有设置的 Edit 是没有快捷键的。
self.menuFile.setTitle(_translate("MainWindow", "File (&F)")) # 设置标题组件显示File 并且快捷键为 alt+f
self.menuEdie.setTitle(_translate("MainWindow", "Edie"))
2) 对于菜单栏下的action 的快捷键 通过 已有的方法实现
setShortcut()
以 open 为例 :
self.actionOpen.setShortcut(_translate("MainWindow", "Ctrl+O")) #设置open 的快捷键为
self.actionClose.setText(_translate("MainWindow", "close"))
我们看到 我并没有移动鼠标,通过电脑按键一样可以执行操作
3) 当然我们也可以在绘制Ui 文件的时候就对其进行添加。
这样新的 ui 文件转化成 py 文件的时候 ,我们会发现他会自动帮我们添加以上代码。
1.4 菜单栏展开项项添加图标
1) 我们在我们的项目里新建 imgs文件夹,并复制图片进去。
- 在代码里对他们进行图片的添加
以 open 为例
icon = QtGui.QIcon() #先创建一个 QIcon 对象
icon.addPixmap(QtGui.QPixmap("imgs/open.png"), QtGui.QIcon.Normal, QtGui.QIcon.On) #把图片加载给icon
self.actionOpen.setIcon(icon) # 将icon 设置给我们的 open 按钮
我么看到 打开 文件的图片已经被添加进来
3) 也可以在ui界面就对action open 进行设置
这样在我们新的ui 文件转 py中,也可以看到会有设置icon 的代码。
2、工具栏
2.1、工具栏的添加
Qt Designer -->右键 —> add tool bar
2.2、 为工具栏添加点击项
以 openfile 为例:
1)点击右下方 action 编辑区 ,新建 action,并且完成属性设置,然后拖动到工具栏
2.3、 工具栏点击事件监听
和 上面的 菜单栏一样也是通过 triggered 事件来出发点击操作的,我们只需要将对应的 action 的triggered 事件,绑定到我们想要执行的函数。
self.actionToolOpenFile.triggered.connect(self.openClick) #将自定义的具栏的 actionToolOpenFile 点击事件绑定到 openClick函数
self.actionToolSaveFile.triggered.connect(self.saveClick())
3、状态栏
状态栏一般位于窗口的最底部,用来显示一些提示信息,比如当前编辑状态,时间等。
3.1 、状态栏的创建和删除
默认的QManiWindow 是会自动创建状态栏的,
当然我们可以在Ui 文件编辑时,通过鼠标右键 —> 添加或者删除状态栏
我们 仔细看窗口下方的变化,可以发现当删除状态栏,窗口栅栏黑点是向下铺满的。
4、Label 组件
QLabel 组件可以显示文字、图片、gif、超链接。
Qlable 的继承关系:
QLabel —> QFram —> QWidget —> QPaintDevice —> QObject
4.1 Label 组件常用方法
方法名 | 主要功能 |
---|---|
setAlignment() | 按照固定方式对其文本 |
setIndent() | 设置文本缩进 |
setPixmap() | 设置QLab为一个Pixmap 图片 |
text() | 获取QLabel 显示的文本 |
setText() | 设置Qlabel显示的文本 |
setWordWrap() | 是否允许换行 |
setBuddy() | 设置QLabel的助记符及buddy(伙伴),及使用Qlabel设置快捷键,会在快捷键后将焦点设置到其buddy上,这里用到了Qlabel的交互控件功能 ,此外,buddy可以是任何一个widget控件,使用setBuddy(QWidget*)设置,其Qlabel必须是文本内容,并且使用“&”符号设置了助记符 |
Qlabel类中的常用信号
信号 | 描述 |
---|---|
linkActiveted | 当点击标签超链接时,希望在新窗口打开这个超链接,setOpenExternalLinks 特性必须设置为True,即 setOpenExternalLinks(True) |
linkHovered | 当指针划过标签中的超链接时,需要槽函数和这个信号绑定 |
4.2、Label 实例
下面我们做一个实例,label 显示文字、图片 超链接、以及 setBuddy 快捷焦点定位设置
4.2.1 Qlabel 显示文本
我们将ui 文件转化成 py 文件 并运行
主要代码:
self.label_text = QtWidgets.QLabel(self.centralwidget)
self.label_text.setGeometry(QtCore.QRect(30, 40, 141, 91))
self.label_text.setObjectName("label_text")
下面我们对文字进行一些美化
#美化文字颜色和字体
def beautifulWords(self):
self.label_2.setStyleSheet("QLabel{color:rgb(225,22,173,255);font-size:30px;font-family:Arial;background-color:gold;}")
color:rgb 字体颜色
font-size 字体大小
font-family 字体样式
background-color:gold 背景色
4.2.2 Qlabel 显示图片
1) 选中一个lab 拖到绘图区
2)更改 lab 标签名字,便于识别
3)去掉 标签默认文字
4) 属性筛选区 搜索 pixmap 为其设置背景图片
5) 属性区 搜索 scaledContents 让其自适应lab 尺寸大小
我们将Ui 文件转化成 py 文件打开看看效果
主要代码:
self.label_dog = QtWidgets.QLabel(self.centralwidget)
self.label_dog.setGeometry(QtCore.QRect(220, 20, 211, 181))
self.label_dog.setText("")
self.label_dog.setPixmap(QtGui.QPixmap("imgs/dog.jpg")) #通过setPixmap 添加背景图片
self.label_dog.setScaledContents(True)
self.label_dog.setObjectName("label_dog")
4.2.3 Qlabel 显示超链接
我们新建一个 lab 用来 作为超链接,点击访问百度页面
1) Qt degner 或者直接在代码里 新建一个 lab
2) 为lab 设置超链接 的样式文字和跳转属性
然后在代码 里对lab_link进行超链接设置
#设置lab 超链接
def setLabLink(self):
self.labe_link.setText("<A href='www.baidu.com'>百度</a>") #设置含超链接文本
# 允许 labe_link 控件访问超链接,默认不允许访问超链接,需要使用 setOpenExternalLinks(True) 允许
self.labe_link.setOpenExternalLinks(True)
另外我们也可以捕捉鼠标滑过超链接的信号
主要代码:
self.labe_link.linkHovered.connect(self.slipLab) #监听鼠标停放滑过在超链接的事件
def slipLab(self):
print("鼠标停放滑过超链接属性的 lab")
4.2.4 Qlabel 快速定位绑定组件
快捷键的使用,举例说明
我们有两个 lab 一个name setbaddy 一个 line Edit ,
那么我们对 lab name 设定的快捷键就作用到 lineEdit 上面,即使line Edit 没有设置快捷键,依然获得焦点。
我们先在Qt designet 之上绘制 布局,
并且在lab上“&+首字符大写的方式” 为其设置显示文字 ,这样lab 默认快捷键就是 ”alt + 首字符“
我们把ui 文件转化成 py 文件,并且 setbaddy 两个组件:
def labSetBaddy(self):
self.label_name.setBuddy(self.lineEdit_Name) # 将label_name 快捷键绑定到 lineEdit_Name
self.label_age.setBuddy(self.lineEdit_age)
我们可以看到,本来鼠标焦点实在 Age 那一行,但是,当我们按下 ”alt + N“ 的时候,鼠标的焦点就跳到了 name 输入框那里。
5、状态栏结合label显示状态信息
有的时候,我们需要在状态栏显示一些提示信息,比如发当前当前状态,当前时间等。
如下图:
这就需要用到 QStatusBar 状态栏上的两个方法:
方法 | 描述 |
---|---|
addPermanentWidget | 在状态栏中永久添加窗口组件对象 |
removeWidget | 从状态栏中移除指定的控件 |
主要代码实现:
def addStateBarView(self):
self.labState = QLabel()
self.labState.setText("State: busy")
self.labTime = QLabel()
self.labTime.setText("时间:11:00")
self.statusBar.addPermanentWidget(self.labState,stretch=3)
self.statusBar.addPermanentWidget(self.labTime, stretch=1)
stretch 表示拉伸因子,表示组件在statebar 中占有的空间比例。
6、项目整体代码和注释
代码架构:
6.1、 demoOneUi.ui 文件:
<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
<class>MainWindow</class>
<widget class="QMainWindow" name="MainWindow">
<property name="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>800</width>
<height>645</height>
</rect>
</property>
<property name="windowTitle">
<string>MainWindow</string>
</property>
<widget class="QWidget" name="centralwidget">
<widget class="QLabel" name="label_text">
<property name="geometry">
<rect>
<x>30</x>
<y>40</y>
<width>141</width>
<height>91</height>
</rect>
</property>
<property name="text">
<string>just s test</string>
</property>
</widget>
<widget class="QLabel" name="label_dog">
<property name="geometry">
<rect>
<x>220</x>
<y>20</y>
<width>211</width>
<height>181</height>
</rect>
</property>
<property name="text">
<string/>
</property>
<property name="pixmap">
<pixmap>imgs/dog.jpg</pixmap>
</property>
<property name="scaledContents">
<bool>true</bool>
</property>
</widget>
<widget class="QLabel" name="labe_link">
<property name="geometry">
<rect>
<x>80</x>
<y>300</y>
<width>72</width>
<height>15</height>
</rect>
</property>
<property name="text">
<string/>
</property>
</widget>
<widget class="QLabel" name="label_name">
<property name="geometry">
<rect>
<x>290</x>
<y>280</y>
<width>72</width>
<height>15</height>
</rect>
</property>
<property name="text">
<string>&Name</string>
</property>
</widget>
<widget class="QLabel" name="label_Age">
<property name="geometry">
<rect>
<x>290</x>
<y>310</y>
<width>72</width>
<height>15</height>
</rect>
</property>
<property name="text">
<string>&Age</string>
</property>
</widget>
<widget class="QLineEdit" name="lineEdit_Name">
<property name="geometry">
<rect>
<x>350</x>
<y>280</y>
<width>113</width>
<height>21</height>
</rect>
</property>
</widget>
<widget class="QLineEdit" name="lineEdit_Age">
<property name="geometry">
<rect>
<x>350</x>
<y>310</y>
<width>113</width>
<height>21</height>
</rect>
</property>
</widget>
</widget>
<widget class="QMenuBar" name="menubar">
<property name="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>800</width>
<height>26</height>
</rect>
</property>
<widget class="QMenu" name="menuFile">
<property name="title">
<string>File (&F)</string>
</property>
<addaction name="actionOpen"/>
<addaction name="separator"/>
<addaction name="actionClose"/>
<addaction name="separator"/>
<addaction name="actionsave"/>
</widget>
<widget class="QMenu" name="menuEdie">
<property name="title">
<string>Edie</string>
</property>
</widget>
<widget class="QMenu" name="menuHelp">
<property name="title">
<string>Help</string>
</property>
</widget>
<addaction name="menuFile"/>
<addaction name="menuEdie"/>
<addaction name="menuHelp"/>
</widget>
<widget class="QToolBar" name="toolBar">
<property name="windowTitle">
<string>toolBar</string>
</property>
<attribute name="toolBarArea">
<enum>TopToolBarArea</enum>
</attribute>
<attribute name="toolBarBreak">
<bool>false</bool>
</attribute>
<addaction name="actionToolOpenFile"/>
<addaction name="actionToolSaveFile"/>
</widget>
<widget class="QStatusBar" name="statusBar"/>
<action name="actionOpen">
<property name="icon">
<iconset>
<normaloff>imgs/open.png</normaloff>
<normalon>C:/Users/lum/.designer/backup/imgs/open.png</normalon>imgs/open.png</iconset>
</property>
<property name="text">
<string>Open</string>
</property>
<property name="shortcut">
<string>Ctrl+O</string>
</property>
</action>
<action name="actionClose">
<property name="text">
<string>close</string>
</property>
</action>
<action name="actionsave">
<property name="icon">
<iconset>
<normaloff>imgs/save.png</normaloff>imgs/save.png</iconset>
</property>
<property name="text">
<string>save</string>
</property>
<property name="shortcut">
<string>Ctrl+S</string>
</property>
</action>
<action name="actionToolOpenFile">
<property name="icon">
<iconset>
<normaloff>imgs/open.png</normaloff>imgs/open.png</iconset>
</property>
<property name="text">
<string>toolOpenFile</string>
</property>
<property name="shortcut">
<string>Ctrl+O</string>
</property>
</action>
<action name="actionToolSaveFile">
<property name="icon">
<iconset>
<normaloff>imgs/save.png</normaloff>imgs/save.png</iconset>
</property>
<property name="text">
<string>toolSaveFile</string>
</property>
<property name="shortcut">
<string>Ctrl+S</string>
</property>
</action>
</widget>
<resources/>
<connections/>
</ui>
6.2 、 demoOneUi.py 文件
# -*- coding: utf-8 -*-
# Form implementation generated from reading ui file 'demoOneUi.ui'
#
# Created by: PyQt5 UI code generator 5.15.0
#
# WARNING: Any manual changes made to this file will be lost when pyuic5 is
# run again. Do not edit this file unless you know what you are doing.
from PyQt5 import QtCore, QtGui, QtWidgets
class Ui_MainWindow(object):
def setupUi(self, MainWindow):
MainWindow.setObjectName("MainWindow")
MainWindow.resize(800, 645) # 整个 window 大小
self.centralwidget = QtWidgets.QWidget(MainWindow)
self.centralwidget.setObjectName("centralwidget")
self.label_text = QtWidgets.QLabel(self.centralwidget)
self.label_text.setGeometry(QtCore.QRect(30, 40, 141, 91)) # lab Text 起点x,y 坐标点, 长度 宽度
self.label_text.setObjectName("label_text")
self.label_dog = QtWidgets.QLabel(self.centralwidget)
self.label_dog.setGeometry(QtCore.QRect(220, 20, 211, 181))
self.label_dog.setText("")
self.label_dog.setPixmap(QtGui.QPixmap("imgs/dog.jpg")) # labPictuer 背景图片
self.label_dog.setScaledContents(True) # 图片自适应 lab Picture 大小
self.label_dog.setObjectName("label_dog")
self.labe_link = QtWidgets.QLabel(self.centralwidget)
self.labe_link.setGeometry(QtCore.QRect(80, 300, 72, 15))
self.labe_link.setText("")
self.labe_link.setObjectName("labe_link")
self.label_name = QtWidgets.QLabel(self.centralwidget)
self.label_name.setGeometry(QtCore.QRect(290, 280, 72, 15))
self.label_name.setObjectName("label_name")
self.label_Age = QtWidgets.QLabel(self.centralwidget)
self.label_Age.setGeometry(QtCore.QRect(290, 310, 72, 15))
self.label_Age.setObjectName("label_Age")
self.lineEdit_Name = QtWidgets.QLineEdit(self.centralwidget)
self.lineEdit_Name.setGeometry(QtCore.QRect(350, 280, 113, 21))
self.lineEdit_Name.setObjectName("lineEdit_Name")
self.lineEdit_Age = QtWidgets.QLineEdit(self.centralwidget)
self.lineEdit_Age.setGeometry(QtCore.QRect(350, 310, 113, 21))
self.lineEdit_Age.setObjectName("lineEdit_Age")
MainWindow.setCentralWidget(self.centralwidget)
self.menubar = QtWidgets.QMenuBar(MainWindow)
self.menubar.setGeometry(QtCore.QRect(0, 0, 800, 26)) # 菜单栏 起始 x,y 坐标,长度 宽度
self.menubar.setObjectName("menubar")
self.menuFile = QtWidgets.QMenu(self.menubar) #新建 menu File
self.menuFile.setObjectName("menuFile")
self.menuEdie = QtWidgets.QMenu(self.menubar) #新建 menu Edit
self.menuEdie.setObjectName("menuEdie")
self.menuHelp = QtWidgets.QMenu(self.menubar)
self.menuHelp.setObjectName("menuHelp")
MainWindow.setMenuBar(self.menubar)
self.toolBar = QtWidgets.QToolBar(MainWindow) # 新建 工具栏
self.toolBar.setObjectName("toolBar")
MainWindow.addToolBar(QtCore.Qt.TopToolBarArea, self.toolBar)
self.statusBar = QtWidgets.QStatusBar(MainWindow) #新建 状态栏
self.statusBar.setObjectName("statusBar")
MainWindow.setStatusBar(self.statusBar)
self.actionOpen = QtWidgets.QAction(MainWindow) #创建 action open
icon = QtGui.QIcon()
icon.addPixmap(QtGui.QPixmap("imgs/open.png"), QtGui.QIcon.Normal, QtGui.QIcon.Off) # 设置action open 图片
self.actionOpen.setIcon(icon)
self.actionOpen.setObjectName("actionOpen")
self.actionClose = QtWidgets.QAction(MainWindow)
self.actionClose.setObjectName("actionClose")
self.actionsave = QtWidgets.QAction(MainWindow)
icon1 = QtGui.QIcon()
icon1.addPixmap(QtGui.QPixmap("imgs/save.png"), QtGui.QIcon.Normal, QtGui.QIcon.Off)
self.actionsave.setIcon(icon1)
self.actionsave.setObjectName("actionsave")
self.actionToolOpenFile = QtWidgets.QAction(MainWindow)
icon2 = QtGui.QIcon()
icon2.addPixmap(QtGui.QPixmap("imgs/open.png"), QtGui.QIcon.Normal, QtGui.QIcon.Off)
self.actionToolOpenFile.setIcon(icon2)
self.actionToolOpenFile.setObjectName("actionToolOpenFile")
self.actionToolSaveFile = QtWidgets.QAction(MainWindow)
self.actionToolSaveFile.setIcon(icon1)
self.actionToolSaveFile.setObjectName("actionToolSaveFile")
self.menuFile.addAction(self.actionOpen)
self.menuFile.addSeparator()
self.menuFile.addAction(self.actionClose)
self.menuFile.addSeparator()
self.menuFile.addAction(self.actionsave)
self.menubar.addAction(self.menuFile.menuAction())
self.menubar.addAction(self.menuEdie.menuAction())
self.menubar.addAction(self.menuHelp.menuAction())
self.toolBar.addAction(self.actionToolOpenFile)
self.toolBar.addAction(self.actionToolSaveFile)
self.retranslateUi(MainWindow)
QtCore.QMetaObject.connectSlotsByName(MainWindow)
def retranslateUi(self, MainWindow):
_translate = QtCore.QCoreApplication.translate
MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow")) #设置窗口标题
self.label_text.setText(_translate("MainWindow", "just s test"))
self.label_name.setText(_translate("MainWindow", "&Name"))
self.label_Age.setText(_translate("MainWindow", "&Age"))
self.menuFile.setTitle(_translate("MainWindow", "File (&F)"))
self.menuEdie.setTitle(_translate("MainWindow", "Edie"))
self.menuHelp.setTitle(_translate("MainWindow", "Help"))
self.toolBar.setWindowTitle(_translate("MainWindow", "toolBar"))
self.actionOpen.setText(_translate("MainWindow", "Open"))
self.actionOpen.setShortcut(_translate("MainWindow", "Ctrl+O"))
self.actionClose.setText(_translate("MainWindow", "close"))
self.actionsave.setText(_translate("MainWindow", "save"))
self.actionsave.setShortcut(_translate("MainWindow", "Ctrl+S")) #设置快捷键
self.actionToolOpenFile.setText(_translate("MainWindow", "toolOpenFile"))
self.actionToolOpenFile.setShortcut(_translate("MainWindow", "Ctrl+O"))
self.actionToolSaveFile.setText(_translate("MainWindow", "toolSaveFile"))
self.actionToolSaveFile.setShortcut(_translate("MainWindow", "Ctrl+S"))
6.3 、main.py 文件
import sys
from PyQt5.QtWidgets import QApplication, QMainWindow, QLabel
from demoOneUi import Ui_MainWindow
class MainWindow(QMainWindow,Ui_MainWindow): #继承QMainWindow类和自己ui文件转化的py 类文件
def __init__(self):
super(MainWindow, self).__init__()
self.setupUi(self) #加载ui 布局
self.actionOpen.triggered.connect(self.openClick) # 绑定 actionOpen 按钮的trigger动作到openClick函数
self.actionClose.triggered.connect(self.closeClick)
self.actionsave.triggered.connect(self.saveClick)
self.actionToolOpenFile.triggered.connect(self.openClick) #将自定义的具栏的 actionToolOpenFile 点击事件绑定到 openClick函数
self.actionToolSaveFile.triggered.connect(self.saveClick)
self.beautifulWords() #美化文字
self.setLabLink() #设定 链接文字
self.labSetBaddy() #设定 lab 快捷绑定
self.addStateBarView() #添加状态栏提示
def openClick(self):
print("click open")
def closeClick(self):
print("close click")
def saveClick(self):
print("save click")
#美化文字颜色和字体
def beautifulWords(self):
self.label_text.setStyleSheet("QLabel{color:rgb(225,22,173,255);font-size:30px;font-family:Arial;"
"background-color:gold;}")
#设置lab 超链接
def setLabLink(self):
self.labe_link.setText("<A href='www.baidu.com'>百度</a>") #设置含超链接文本
#允许 labe_link 控件访问超链接,默认不允许访问超链接,需要使用 setOpenExternalLinks(True) 允许
self.labe_link.setOpenExternalLinks(True)
self.labe_link.linkHovered.connect(self.slipLab) #监听鼠标停放滑过在超链接的事件
# 鼠标停放超链接 lab 信号触发
def slipLab(self):
print("S鼠标停放滑过超链接属性的 lab")
#绑定组件快捷方式
def labSetBaddy(self):
self.label_name.setBuddy(self.lineEdit_Name)
self.label_Age.setBuddy(self.lineEdit_Age)
#设置状态栏显示
def addStateBarView(self):
self.labState = QLabel()
self.labState.setText("State: busy")
self.labTime = QLabel()
self.labTime.setText("时间:11:00")
self.statusBar.addPermanentWidget(self.labState,stretch=3)
self.statusBar.addPermanentWidget(self.labTime, stretch=1)
if __name__ == '__main__': #函数入口程序
app = QApplication(sys.argv) #创建了一个QApplication对象,对象名为app
win = MainWindow() # 实体化类
win.show() #显示
sys.exit(app.exec_())
7、 本章小结
本章主要讲了:
1) 菜单栏的创建和子项的创建
2)菜单栏子项的图标添加以及点击事件的触发
3)菜单栏快捷方式的添加
4)工具栏的创建和删除,以及背景图片和点击事件
5) 状态栏的创建和删除,以及怎样显示提示信息
6)Label view 怎样显示文字 图片 超链接 以及绑定组件快捷方式