devbox
我家自动化
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

PyQt5中文开发文档及样例_pyqt5中文手册

作者：我家自动化 | 2024-02-11 17:36:01

赞

踩

pyqt5中文手册

本文档来源：PyQt5中文开发文档

环境安装

本文环境安装于Win10，Vscode，Anaconda4.13.0。安装前请注意保持网络畅通，并且关闭VPN。

  1. conda create -n PyQt5 python=3.8
  2. conda activate PyQt5 
  3. pip install PyQt5

安装完成后请将vscode的解释器改为此环境的解释器。所有代码的调试均用vscode 

目录

环境安装

HelloWorld 

Ex1.1简单的窗口绘制

执行结果

Ex1.2带窗口图标

执行结果

Ex1.3提示框

执行结果

Ex1.4关闭窗口

执行结果

Ex1.5消息盒子 

执行结果

​Ex1.6窗口居中

执行结果

菜单和工具栏

Ex2.1状态栏

执行结果

Ex2.2菜单栏

执行结果

Ex2.3子菜单

执行结果 

Ex2.4勾选菜单

执行结果

Ex2.5右键菜单

执行结果

Ex2.6工具栏 

执行结果

Ex2.7主窗口

执行结果

布局管理

Ex3.1绝对定位

执行结果

Ex3.2盒布局

执行结果

Ex3.3栅格布局

执行结果 

Ex3.4制作提交反馈信息的布局

执行结果

事件和信号

事件

Ex4.1Signals & slots

执行结果

Ex4.2重构事件处理器

 执行结果

Ex4.3事件对象 

执行结果

Ex4.4事件发送 

执行结果 

Ex4.5信号发送

执行结果 

对话框

Ex5.1输入文字

执行结果

Ex5.2选取颜色 

执行结果

Ex5.3选择字体  

执行结果  

Ex5.4选择文件 

执行结果 

控件(1) 

Ex6.1QCheckBox

执行结果

Ex6.2切换按钮 

执行结果

Ex6.3滑块 

执行结果 

Ex6.4进度条

执行结果

Ex6.5日历 

执行结果

控件(2)

Ex7.1图片

执行结果

Ex7.2行编辑 

执行结果

Ex7.3QSplitter 

执行结果

Ex7.4下拉选框 

执行结果

拖拽

Ex8.1简单的拖放

执行结果

Ex8.2拖放按钮组件 

执行结果

绘图

Ex9.1文本涂鸦

执行结果

Ex9.2点的绘画 

执行结果

Ex9.3颜色

执行结果

Ex9.4QPen 

执行结果

Ex9.5QBrush

执行结果

Ex9.6贝塞尔曲线 

执行结果

自定义组件

Ex10.1Burning widget

执行结果

HelloWorld 

Ex1.1简单的窗口绘制

 这个简单的小例子展示的是一个小窗口。但是我们可以在这个小窗口上面做很多事情，改变大小，最大化，最小化等，这需要很多代码才能实现。这在很多应用中很常见，没必要每次都要重写这部分代码，Qt已经提供了这些功能。PyQt5是一个高级的工具集合，相比使用低级的工具，能省略上百行代码。

  1. #引入PyQt5.QtWidgets模块，这个模块包含基本的组件
  2. import sys
  3. from PyQt5.QtWidgets import QApplication, QWidget
  4.  
  5.  
  6. if __name__ == '__main__':
  7.  
  8.     #每个PyQt5应用都必须创建一个应用对象。sys.argv是一组命令行参数的列表。使得Python脚本可以在shell里运行，这个参数提供对脚本控制的功能。
  9.     app = QApplication(sys.argv)
  10.  
  11.     #QWidge控件是一个用户界面的基本控件，也被称为窗口（window）控件。
  12.     w = QWidget()
  13.     #resize()方法表示鼠标能改变控件的大小，这里的意思是窗口默认大小为宽250px，高150px。
  14.     w.resize(250, 150)
  15.     #move()方法表示鼠标能改变控件的位置，这里的意思是窗口默认位置在(300, 300)。注：屏幕坐标系的原点是屏幕的左上角。
  16.     w.move(300, 300)
  17.     #给窗口添加标题
  18.     w.setWindowTitle('Simple')
  19.     #show()能让控件在桌面上显示出来
  20.     w.show()
  21.  
  22.     #最后，我们进入了应用的主循环中，事件处理器这个时候开始工作。主循环从窗口上接收事件，并把事件派发到应用控件里。
  23.     #当调用exit()方法或直接销毁主控件时，主循环就会结束。sys.exit()方法能确保主循环安全退出。外部环境会收到主控件如何结束的信息。
  24.     sys.exit(app.exec_())

执行结果

Ex1.2带窗口图标

窗口图标通常是显示在窗口的左上角，标题栏的最左边。下面的例子就是怎么用PyQt5创建一个这样的窗口。

  1. import sys
  2. from PyQt5.QtWidgets import QApplication, QWidget
  3. from PyQt5.QtGui import QIcon
  4.  
  5. #这个类继承自QWidget
  6. class Example(QWidget):
  7.  
  8.     def __init__(self):
  9.         #继承类的初始化写法
  10.         super().__init__()
  11.         #使用initUI()方法创建一个GUI。
  12.         self.initUI()
  13.  
  14.  
  15.     def initUI(self):
  16.         #下面的三个方法都继承自QWidget类。
  17.         # setGeometry()有两个作用：把窗口放到屏幕上并且设置窗口大小。参数分别代表屏幕坐标的x、y和窗口大小的宽、高。也就是说这个方法是resize()和move()的合体。
  18.         # 第二个方法还是给窗口添加标题
  19.         # 最后一个方法是给窗口添加了图标。先创建一个QIcon对象，然后接受一个路径作为参数显示图标。
  20.         self.setGeometry(300, 300, 300, 220)
  21.         self.setWindowTitle('Icon')
  22.         self.setWindowIcon(QIcon('Ex2.jpg'))        
  23.  
  24.         self.show()
  25.  
  26.  
  27. if __name__ == '__main__':
  28.  
  29.     app = QApplication(sys.argv)
  30.     ex = Example()
  31.     sys.exit(app.exec_())

执行结果

Ex1.3提示框

  1. import sys
  2. from PyQt5.QtWidgets import (QWidget, QToolTip, 
  3.     QPushButton, QApplication)
  4. from PyQt5.QtGui import QFont    
  5.  
  6.  
  7. class Example(QWidget):
  8.  
  9.     def __init__(self):
  10.         super().__init__()
  11.  
  12.         self.initUI()
  13.  
  14.  
  15.     def initUI(self):
  16.         #设置了提示框的字体，我们使用了10px的SansSerif字体。    
  17.         QToolTip.setFont(QFont('SansSerif', 10))
  18.         #setTooltip()创建提示框，鼠标悬停在相应控件时会显示提示信息
  19.         self.setToolTip('This is a <b>QWidget</b> widget')
  20.         #创建一个按钮，并且为按钮添加了一个提示框
  21.         btn = QPushButton('Button', self)
  22.         btn.setToolTip('This is a <b>QPushButton</b> widget')
  23.         #调整按钮大小，并让按钮在屏幕上显示出来，sizeHint()方法提供了一个默认的按钮大小。
  24.         btn.resize(btn.sizeHint())
  25.         btn.move(50, 50)       
  26.  
  27.         self.setGeometry(300, 300, 300, 200)
  28.         self.setWindowTitle('Tooltips')    
  29.         self.show()
  30.  
  31.  
  32. if __name__ == '__main__':
  33.  
  34.     app = QApplication(sys.argv)
  35.     ex = Example()
  36.     sys.exit(app.exec_())

执行结果

 

 

Ex1.4关闭窗口

关闭一个窗口最直观的方式就是点击标题栏的那个叉，这个例子里，我们展示的是如何用程序关闭一个窗口。这里我们将接触到一点single和slots的知识。

本例使用的是QPushButton组件类。创建了一个点击之后就退出窗口的按钮。

QPushButton(string text, QWidget parent = None)

text参数是想要显示的按钮名称，parent参数是放在按钮上的组件，在我们的例子里，这个参数是QWidget。应用中的组件都是一层一层继承而来的，在这个层里，大部分的组件都有自己的父级，没有父级的组件，是顶级的窗口。 

  1. import sys
  2. from PyQt5.QtWidgets import QWidget, QPushButton, QApplication
  3. from PyQt5.QtCore import QCoreApplication#程序需要QtCore对象
  4.  
  5.  
  6. class Example(QWidget):
  7.  
  8.     def __init__(self):
  9.         super().__init__()
  10.  
  11.         self.initUI()
  12.  
  13.  
  14.     def initUI(self):               
  15.         #创建一个继承自QPushButton的按钮。第一个参数是按钮的文本('Quit')，第二个参数是按钮的父级组件(按钮需要操作的组件)，这个例子中，父级组件就是我们创建的继承自Qwidget的Example类。
  16.         #这样就能实现Quit按钮对Example组件的操作
  17.         qbtn = QPushButton('Quit', self)
  18.         #事件传递系统在PyQt5内建的single和slot机制里面。
  19.         # 点击按钮之后，信号会被捕捉并给出既定的反应。本例是点击后，会直接链接QCore的quit方法，实现对父级组件的退出
  20.         # QCoreApplication包含了事件的主循环，它能添加和删除所有的事件，instance()创建了一个它的实例。
  21.         # QCoreApplication是在QApplication里创建的。 点击事件和能终止进程并退出应用的quit函数绑定在了一起。在发送者和接受者之间建立了通讯，发送者就是按钮，接受者就是应用对象。
  22.         qbtn.clicked.connect(QCoreApplication.instance().quit)
  23.         qbtn.resize(qbtn.sizeHint())
  24.         qbtn.move(50, 50)       
  25.  
  26.         self.setGeometry(300, 300, 250, 150)
  27.         self.setWindowTitle('Quit button')    
  28.         self.show()
  29.  
  30.  
  31. if __name__ == '__main__':
  32.  
  33.     app = QApplication(sys.argv)
  34.     ex = Example()
  35.     sys.exit(app.exec_())

执行结果

Ex1.5消息盒子 

默认情况下，我们点击标题栏的×按钮，QWidget就会关闭。但是有时候，我们修改默认行为。比如，如果我们打开的是一个文本编辑器，并且做了一些修改，我们就会想在关闭按钮的时候让用户进一步确认操作。

  1. import sys
  2. from PyQt5.QtWidgets import QWidget, QMessageBox, QApplication
  3.  
  4.  
  5. class Example(QWidget):
  6.  
  7.     def __init__(self):
  8.         super().__init__()
  9.  
  10.         self.initUI()
  11.  
  12.  
  13.     def initUI(self):               
  14.  
  15.         self.setGeometry(300, 300, 250, 150)        
  16.         self.setWindowTitle('Message box')    
  17.         self.show()
  18.  
  19.     #如果关闭QWidget，就会产生一个QCloseEvent，并且把它传入到closeEvent函数的event参数中。改变控件的默认行为，就是替换掉默认的事件处理。
  20.     def closeEvent(self, event):
  21.         #我们创建了一个消息框，上面有俩按钮：Yes和No.
  22.         # 第一个字符串显示在消息框的标题栏，第二个字符串显示在对话框，第三个参数是消息框的俩按钮，最后一个参数是默认按钮，这个按钮是默认选中的。返回值在变量reply里。
  23.         reply = QMessageBox.question(
  24.             self, 
  25.             'Message',
  26.             "Are you sure to quit?", 
  27.             QMessageBox.Yes | QMessageBox.No, 
  28.             QMessageBox.No)
  29.  
  30.         if reply == QMessageBox.Yes:
  31.             event.accept()
  32.         else:
  33.             event.ignore()        
  34.  
  35.  
  36. if __name__ == '__main__':
  37.  
  38.     app = QApplication(sys.argv)
  39.     ex = Example()
  40.     sys.exit(app.exec_())

执行结果

Ex1.6窗口居中

  1. import sys
  2. from PyQt5.QtWidgets import QWidget, QDesktopWidget, QApplication
  3.  
  4.  
  5. class Example(QWidget):
  6.  
  7.     def __init__(self):
  8.         super().__init__()
  9.  
  10.         self.initUI()
  11.  
  12.  
  13.     def initUI(self):               
  14.  
  15.         self.resize(500, 500)
  16.         self.center()#这个方法是调用我们下面写的，实现对话框居中的方法。
  17.  
  18.         self.setWindowTitle('Center')    
  19.         self.show()
  20.  
  21.  
  22.     def center(self):
  23.         #获得主窗口所在的框架
  24.         qr = self.frameGeometry()
  25.         #获取显示器的分辨率，然后得到屏幕中间点的位置。
  26.         cp = QDesktopWidget().availableGeometry().center()
  27.         #然后把主窗口框架的中心点放置到屏幕的中心位置
  28.         qr.moveCenter(cp)
  29.         #然后通过move函数把主窗口的左上角移动到其框架的左上角，这样就把窗口居中了。
  30.         self.move(qr.topLeft())
  31.  
  32.  
  33. if __name__ == '__main__':
  34.  
  35.     app = QApplication(sys.argv)
  36.     ex = Example()
  37.     sys.exit(app.exec_())

执行结果

菜单和工具栏

这个章节，我们会创建状态栏、菜单和工具栏。菜单是一组位于菜单栏的命令。工具栏是应用的一些常用工具按钮。状态栏显示一些状态信息，通常在应用的底部。

Ex2.1状态栏

状态栏是用来显示应用的状态信息的组件。

  1. import sys
  2. from PyQt5.QtWidgets import QMainWindow, QApplication
  3.  
  4.  
  5. class Example(QMainWindow):
  6.  
  7.     def __init__(self):
  8.         super().__init__()
  9.  
  10.         self.initUI()
  11.  
  12.  
  13.     def initUI(self):               
  14.         #调用QtGui.QMainWindow类的statusBar()方法，创建状态栏。第一次调用会创建一个状态栏，而再次调用会返回一个状态栏对象。showMessage()方法在状态栏上显示一条信息。
  15.         self.statusBar().showMessage('Ready')
  16.  
  17.         self.setGeometry(300, 300, 250, 150)
  18.         self.setWindowTitle('Statusbar')    
  19.         self.show()
  20.  
  21.  
  22. if __name__ == '__main__':
  23.  
  24.     app = QApplication(sys.argv)
  25.     ex = Example()
  26.     sys.exit(app.exec_())

执行结果

Ex2.2菜单栏

菜单栏是非常常用的。是一组命令的集合（Mac OS下状态栏的显示不一样，为得到最相似的外观，我们可以增加一行语句menubar.setNativeMenuBar(False))。

 在下面的示例中，我们创建了只有一个命令的菜单栏，这个命令就是终止应用。同时也创建了一个状态栏。而且还能使用快捷键Ctrl+Q退出应用。

  1.  
  2. import sys
  3. from PyQt5.QtWidgets import QMainWindow, QAction, qApp, QApplication
  4. from PyQt5.QtGui import QIcon
  5.  
  6.  
  7. class Example(QMainWindow):
  8.  
  9.     def __init__(self):
  10.         super().__init__()
  11.  
  12.         self.initUI()
  13.  
  14.  
  15.     def initUI(self):               
  16.         #QAction是菜单栏、工具栏或者快捷键的动作的组合。
  17.         # 上面三行中，前两行创建了一个图标、一个exit的标签和一个快捷键组合，都执行了一个动作；
  18.         # 第三行，创建了一个状态栏，当鼠标悬停在菜单栏的时候，能显示当前状态。
  19.         exitAct = QAction(QIcon('Ex2.2.jpg'), '&Exit', self)        
  20.         exitAct.setShortcut('Ctrl+Q')
  21.         exitAct.setStatusTip('Exit application')
  22.         #当执行这个指定的动作时，就触发了一个事件。这个事件跟QApplication的quit()行为相关联，所以这个动作就能终止这个应用。
  23.         exitAct.triggered.connect(qApp.quit)
  24.         #创建状态栏
  25.         self.statusBar()
  26.         #创建菜单栏
  27.         #menuBar()创建菜单栏。这里创建了一个菜单栏，并用addMenu()在上面添加了一个File菜单，用addAction()关联了点击退出应用的事件。
  28.         menubar = self.menuBar()
  29.         fileMenu = menubar.addMenu('&File')
  30.         fileMenu.addAction(exitAct)
  31.  
  32.         self.setGeometry(300, 300, 300, 200)
  33.         self.setWindowTitle('Simple menu')    
  34.         self.show()
  35.  
  36.  
  37. if __name__ == '__main__':
  38.  
  39.     app = QApplication(sys.argv)
  40.     ex = Example()
  41.     sys.exit(app.exec_())

执行结果

Ex2.3子菜单

子菜单是嵌套在菜单里面的二级或者三级等的菜单。

  1.  
  2. import sys
  3. from PyQt5.QtWidgets import QMainWindow, QAction, QMenu, QApplication
  4.  
  5. class Example(QMainWindow):
  6.  
  7.     def __init__(self):
  8.         super().__init__()
  9.  
  10.         self.initUI()
  11.  
  12.  
  13.     def initUI(self):         
  14.  
  15.         menubar = self.menuBar()
  16.         fileMenu = menubar.addMenu('File')
  17.         #使用QMenu创建一个新菜单
  18.         impMenu = QMenu('Import', self)
  19.         #使用addAction()添加一个动作。
  20.         impAct = QAction('Import mail', self) 
  21.         impMenu.addAction(impAct)
  22.  
  23.         newAct = QAction('New', self)        
  24.  
  25.         fileMenu.addAction(newAct)
  26.         fileMenu.addMenu(impMenu)
  27.  
  28.         self.setGeometry(300, 300, 300, 200)
  29.         self.setWindowTitle('Submenu')    
  30.         self.show()
  31.  
  32.  
  33. if __name__ == '__main__':
  34.  
  35.     app = QApplication(sys.argv)
  36.     ex = Example()
  37.     sys.exit(app.exec_())

执行结果 

 这个例子里，有两个子菜单，一个在File菜单下面，一个在File的Import下面。

Ex2.4勾选菜单

本例创建了一个行为菜单。这个行为／动作能切换状态栏显示或者隐藏。

  1. import sys
  2. from PyQt5.QtWidgets import QMainWindow, QAction, QApplication
  3.  
  4. class Example(QMainWindow):
  5.  
  6.     def __init__(self):
  7.         super().__init__()
  8.  
  9.         self.initUI()
  10.  
  11.  
  12.     def initUI(self):         
  13.  
  14.         self.statusbar = self.statusBar()
  15.         self.statusbar.showMessage('Ready')
  16.  
  17.         menubar = self.menuBar()
  18.         viewMenu = menubar.addMenu('View')
  19.         # 用checkable选项创建一个能选中的菜单。
  20.         viewStatAct = QAction('View statusbar', self, checkable=True)
  21.         viewStatAct.setStatusTip('View statusbar')
  22.         #默认设置为选中状态。
  23.         viewStatAct.setChecked(True)
  24.         viewStatAct.triggered.connect(self.toggleMenu)
  25.  
  26.         viewMenu.addAction(viewStatAct)
  27.  
  28.         self.setGeometry(300, 300, 300, 200)
  29.         self.setWindowTitle('Check menu')    
  30.         self.show()
  31.     # 依据选中状态切换状态栏的显示与否
  32.     def toggleMenu(self, state):
  33.  
  34.         if state:
  35.             self.statusbar.show()
  36.         else:
  37.             self.statusbar.hide()
  38.  
  39.  
  40. if __name__ == '__main__':
  41.  
  42.     app = QApplication(sys.argv)
  43.     ex = Example()
  44.     sys.exit(app.exec_())

执行结果

Ex2.5右键菜单

 右键菜单也叫弹出框，是在某些场合下显示的一组命令。例如，Opera浏览器里，网页上的右键菜单里会有刷新，返回或者查看页面源代码。如果在工具栏上右键，会得到一个不同的用来管理工具栏的菜单。

  1. import sys
  2. from PyQt5.QtWidgets import QMainWindow, qApp, QMenu, QApplication
  3.  
  4. class Example(QMainWindow):
  5.  
  6.     def __init__(self):
  7.         super().__init__()
  8.  
  9.         self.initUI()
  10.  
  11.  
  12.     def initUI(self):         
  13.  
  14.         self.setGeometry(300, 300, 300, 200)
  15.         self.setWindowTitle('Context menu')    
  16.         self.show()
  17.  
  18.  
  19.     def contextMenuEvent(self, event):
  20.  
  21.            cmenu = QMenu(self)
  22.            #使用exec_()方法显示菜单。从鼠标右键事件对象中获得当前坐标。mapToGlobal()方法把当前组件的相对坐标转换为窗口（window）的绝对坐标。
  23.            newAct = cmenu.addAction("New")
  24.            opnAct = cmenu.addAction("Open")
  25.            quitAct = cmenu.addAction("Quit")
  26.            action = cmenu.exec_(self.mapToGlobal(event.pos()))
  27.            # 如果右键菜单里触发了事件，也就触发了退出事件，执行关闭菜单行为。
  28.            if action == quitAct:
  29.                qApp.quit()
  30.  
  31.  
  32. if __name__ == '__main__':
  33.  
  34.     app = QApplication(sys.argv)
  35.     ex = Example()
  36.     sys.exit(app.exec_())

执行结果

Ex2.6工具栏 

菜单栏包含了所有的命令，工具栏就是常用的命令的集合。

  1. import sys
  2. from PyQt5.QtWidgets import QMainWindow, QAction, qApp, QApplication
  3. from PyQt5.QtGui import QIcon
  4.  
  5. class Example(QMainWindow):
  6.  
  7.     def __init__(self):
  8.         super().__init__()
  9.  
  10.         self.initUI()
  11.  
  12.  
  13.     def initUI(self):               
  14.         #和上面的菜单栏差不多，这里使用了一个行为对象，这个对象绑定了一个标签，一个图标和一个快捷键。这些行为被触发的时候，会调用QtGui.QMainWindow的quit方法退出应用。
  15.         exitAct = QAction(QIcon('Ex2.6.jpg'), 'Exit', self)
  16.         exitAct.setShortcut('Ctrl+Q')
  17.         exitAct.triggered.connect(qApp.quit)
  18.         #用addToolBar()创建工具栏，并用addAction()将动作对象添加到工具栏。
  19.         self.toolbar = self.addToolBar('Exit')
  20.         self.toolbar.addAction(exitAct)
  21.  
  22.         self.setGeometry(300, 300, 300, 200)
  23.         self.setWindowTitle('Toolbar')    
  24.         self.show()
  25.  
  26.  
  27. if __name__ == '__main__':
  28.  
  29.     app = QApplication(sys.argv)
  30.     ex = Example()
  31.     sys.exit(app.exec_())

执行结果

创建了一个工具栏。这个工具栏只有一个退出应用的动作

Ex2.7主窗口

主窗口就是上面三种栏目的总称，现在我们把上面的三种栏在一个应用里展示出来。

上面的代码创建了一个很经典的菜单框架，有右键菜单，工具栏和状态栏。

  1. import sys
  2. from PyQt5.QtWidgets import QMainWindow, QTextEdit, QAction, QApplication
  3. from PyQt5.QtGui import QIcon
  4.  
  5.  
  6. class Example(QMainWindow):
  7.  
  8.     def __init__(self):
  9.         super().__init__()
  10.  
  11.         self.initUI()
  12.  
  13.  
  14.     def initUI(self):               
  15.         # 这里创建了一个文本编辑区域，并把它放在QMainWindow的中间区域。这个组件会占满所有剩余的区域。
  16.         textEdit = QTextEdit()
  17.         self.setCentralWidget(textEdit)
  18.  
  19.         exitAct = QAction(QIcon('Ex2.6.jpg'), 'Exit', self)
  20.         exitAct.setShortcut('Ctrl+Q')
  21.         exitAct.setStatusTip('Exit application')
  22.         exitAct.triggered.connect(self.close)
  23.  
  24.         self.statusBar()
  25.  
  26.         menubar = self.menuBar()
  27.         fileMenu = menubar.addMenu('&File')
  28.         fileMenu.addAction(exitAct)
  29.  
  30.         toolbar = self.addToolBar('Exit')
  31.         toolbar.addAction(exitAct)
  32.  
  33.         self.setGeometry(300, 300, 350, 250)
  34.         self.setWindowTitle('Main window')    
  35.         self.show()
  36.  
  37.  
  38. if __name__ == '__main__':
  39.  
  40.     app = QApplication(sys.argv)
  41.     ex = Example()
  42.     sys.exit(app.exec_())

执行结果

布局管理

在一个GUI程序里，布局是一个很重要的方面。布局就是如何管理应用中的元素和窗口。有两种方式可以搞定：绝对定位和PyQt5的layout类 

Ex3.1绝对定位

每个程序都是以像素为单位区分元素的位置，衡量元素的大小。所以我们完全可以使用绝对定位搞定每个元素和窗口的位置。但是这也有局限性：

  • 元素不会随着我们更改窗口的位置和大小而变化。

  • 不能适用于不同的平台和不同分辨率的显示器

  • 更改应用字体大小会破坏布局

  • 如果我们决定重构这个应用，需要全部计算一下每个元素的位置和大小

  1. import sys
  2. from PyQt5.QtWidgets import QWidget, QLabel, QApplication
  3.  
  4. class Example(QWidget):
  5.  
  6.     def __init__(self):
  7.         super().__init__()
  8.  
  9.         self.initUI()
  10.  
  11.  
  12.     def initUI(self):
  13.         # 这个元素的左上角就在这个程序的左上角开始的(15, 10)的位置。
  14.         lbl1 = QLabel('Zetcode', self)
  15.         lbl1.move(15, 10)
  16.  
  17.         lbl2 = QLabel('tutorials', self)
  18.         lbl2.move(35, 40)
  19.  
  20.         lbl3 = QLabel('for programmers', self)
  21.         lbl3.move(55, 70)        
  22.  
  23.         self.setGeometry(300, 300, 250, 150)
  24.         self.setWindowTitle('Absolute')    
  25.         self.show()
  26.  
  27.  
  28. if __name__ == '__main__':
  29.  
  30.     app = QApplication(sys.argv)
  31.     ex = Example()
  32.     sys.exit(app.exec_())

执行结果

我们使用move()方法定位了每一个元素，使用x、y坐标。x、y坐标的原点是程序的左上角。

Ex3.2盒布局

使用盒布局能让程序具有更强的适应性。这个才是布局一个应用的更合适的方式。QHBoxLayout和QVBoxLayout是基本的布局类，分别是水平布局和垂直布局。

如果我们需要把两个按钮放在程序的右下角，创建这样的布局，我们只需要一个水平布局加一个垂直布局的盒子就可以了。再用弹性布局增加一点间隙。

  1. import sys
  2. from PyQt5.QtWidgets import (QWidget, QPushButton, 
  3.     QHBoxLayout, QVBoxLayout, QApplication)
  4.  
  5.  
  6. class Example(QWidget):
  7.  
  8.     def __init__(self):
  9.         super().__init__()
  10.  
  11.         self.initUI()
  12.  
  13.  
  14.     def initUI(self):
  15.         # 创建了两个按钮
  16.         okButton = QPushButton("OK")
  17.         cancelButton = QPushButton("Cancel")
  18.         # 创建一个水平布局，并增加弹性空间和两个按钮。stretch函数在两个按钮前面增加了一块弹性空间，它会将按钮挤到窗口的右边
  19.         hbox = QHBoxLayout()
  20.         hbox.addStretch(1)
  21.         hbox.addWidget(okButton)
  22.         hbox.addWidget(cancelButton)
  23.         # 为了布局需要，我们把这个水平布局放到了一个垂直布局盒里面。弹性元素会把水平布局挤到窗口的下边。
  24.         vbox = QVBoxLayout()
  25.         vbox.addStretch(1)
  26.         vbox.addLayout(hbox)
  27.  
  28.         self.setLayout(vbox)    
  29.  
  30.         self.setGeometry(300, 300, 300, 150)
  31.         self.setWindowTitle('Buttons')    
  32.         self.show()
  33.  
  34.  
  35. if __name__ == '__main__':
  36.  
  37.     app = QApplication(sys.argv)
  38.     ex = Example()
  39.     sys.exit(app.exec_())

执行结果

完成了在应用的右下角放了两个按钮的需求。当改变窗口大小的时候，它们能依然保持在相对的位置。我们同时使用了QHBoxLayout和QVBoxLayout。

Ex3.3栅格布局

最常用的还是栅格布局了。这种布局是把窗口分为行和列。创建和使用栅格布局，需要使用QGridLayout模块。

  1. import sys
  2. from PyQt5.QtWidgets import (QWidget, QGridLayout, 
  3.     QPushButton, QApplication)
  4.  
  5.  
  6. class Example(QWidget):
  7.  
  8.     def __init__(self):
  9.         super().__init__()
  10.  
  11.         self.initUI()
  12.  
  13.  
  14.     def initUI(self):
  15.         # 创建一个QGridLayout实例，并把它放到程序窗口里
  16.         grid = QGridLayout()
  17.         self.setLayout(grid)
  18.         # 我们将要使用的按钮的名称。
  19.         names = ['Cls', 'Bck', '', 'Close',
  20.                  '7', '8', '9', '/',
  21.                 '4', '5', '6', '*',
  22.                  '1', '2', '3', '-',
  23.                 '0', '.', '=', '+']
  24.         # 创建按钮位置列表
  25.         positions = [(i,j) for i in range(5) for j in range(4)]
  26.         # 创建按钮，并使用addWidget()方法把按钮放到布局里面。
  27.         for position, name in zip(positions, names):
  28.  
  29.             if name == '':
  30.                 continue
  31.             button = QPushButton(name)
  32.             grid.addWidget(button, *position)
  33.  
  34.         self.move(300, 150)
  35.         self.setWindowTitle('Calculator')
  36.         self.show()
  37.  
  38.  
  39. if __name__ == '__main__':
  40.  
  41.     app = QApplication(sys.argv)
  42.     ex = Example()
  43.     sys.exit(app.exec_())

执行结果 

创建了栅格化的按钮。

Ex3.4制作提交反馈信息的布局

组件能跨列和跨行展示，这个例子里，我们就试试这个功能。

  1. import sys
  2. from PyQt5.QtWidgets import (QWidget, QLabel, QLineEdit, 
  3.     QTextEdit, QGridLayout, QApplication)
  4.  
  5. class Example(QWidget):
  6.  
  7.     def __init__(self):
  8.         super().__init__()
  9.  
  10.         self.initUI()
  11.  
  12.  
  13.     def initUI(self):
  14.  
  15.         title = QLabel('Title')
  16.         author = QLabel('Author')
  17.         review = QLabel('Review')
  18.  
  19.         titleEdit = QLineEdit()
  20.         authorEdit = QLineEdit()
  21.         reviewEdit = QTextEdit()
  22.         #创建标签之间的空间
  23.         grid = QGridLayout()
  24.         grid.setSpacing(10)
  25.  
  26.         grid.addWidget(title, 1, 0)
  27.         grid.addWidget(titleEdit, 1, 1)
  28.  
  29.         grid.addWidget(author, 2, 0)
  30.         grid.addWidget(authorEdit, 2, 1)
  31.         # 指定组件的跨行和跨列的大小。这里我们指定这个元素跨5行显示
  32.         grid.addWidget(review, 3, 0)
  33.         grid.addWidget(reviewEdit, 3, 1, 5, 1)
  34.  
  35.         self.setLayout(grid) 
  36.  
  37.         self.setGeometry(300, 300, 350, 300)
  38.         self.setWindowTitle('Review')    
  39.         self.show()
  40.  
  41.  
  42. if __name__ == '__main__':
  43.  
  44.     app = QApplication(sys.argv)
  45.     ex = Example()
  46.     sys.exit(app.exec_())

执行结果

我们创建了一个有三个标签的窗口。两个行编辑和一个文版编辑，这是用QGridLayout模块搞定的。

事件和信号

事件

signals and slots 被其他人翻译成信号和槽机制，(⊙o⊙)…我这里还是不翻译好了。

所有的应用都是事件驱动的。事件大部分都是由用户的行为产生的，当然也有其他的事件产生方式，比如网络的连接，窗口管理器或者定时器等。调用应用的exec_()方法时，应用会进入主循环，主循环会监听和分发事件。

在事件模型中，有三个角色：

  • 事件源

  • 事件

  • 事件目标

事件源就是发生了状态改变的对象。事件是这个对象状态改变的内容。事件目标是事件想作用的目标。事件源绑定事件处理函数，然后作用于事件目标身上。

PyQt5处理事件方面有个signal and slot机制。Signals and slots用于对象间的通讯。事件触发的时候，发生一个signal，slot是用来被Python调用的（相当于一个句柄？这个词也好恶心，就是相当于事件的绑定函数）slot只有在事件触发的时候才能调用。

Ex4.1Signals & slots

  1. import sys
  2. from PyQt5.QtCore import Qt
  3. from PyQt5.QtWidgets import (QWidget, QLCDNumber, QSlider, 
  4.     QVBoxLayout, QApplication)
  5.  
  6.  
  7. class Example(QWidget):
  8.  
  9.     def __init__(self):
  10.         super().__init__()
  11.  
  12.         self.initUI()
  13.  
  14.  
  15.     def initUI(self):
  16.         # QtGui.QLCDNumber和QtGui.QSlider模块
  17.         lcd = QLCDNumber(self)
  18.         sld = QSlider(Qt.Horizontal, self)
  19.  
  20.         vbox = QVBoxLayout()
  21.         vbox.addWidget(lcd)
  22.         vbox.addWidget(sld)
  23.  
  24.         self.setLayout(vbox)
  25.         #这里是把滑块的变化和数字的变化绑定在一起。
  26.         sld.valueChanged.connect(lcd.display)
  27.  
  28.         self.setGeometry(300, 300, 250, 150)
  29.         self.setWindowTitle('Signal and slot')
  30.         self.show()
  31.  
  32.  
  33. if __name__ == '__main__':
  34.  
  35.     app = QApplication(sys.argv)
  36.     ex = Example()
  37.     sys.exit(app.exec_())

执行结果

下面的例子中，显示了QtGui.QLCDNumber和QtGui.QSlider模块，我们能拖动滑块让数字跟着发生改变。

  • 事件源：滑块sender

  • 事件：改变数字slot

  • 事件目标：LCD数字变化receiver

sender是信号的发送者，receiver是信号的接收者，slot是对这个信号应该做出的反应。

Ex4.2重构事件处理器

在PyQt5中，事件处理器经常被重写（也就是用自己的覆盖库自带的）

  1. import sys
  2. from PyQt5.QtCore import Qt
  3. from PyQt5.QtWidgets import QWidget, QApplication
  4.  
  5. class Example(QWidget):
  6.  
  7.     def __init__(self):
  8.         super().__init__()
  9.  
  10.         self.initUI()
  11.  
  12.  
  13.     def initUI(self):      
  14.  
  15.         self.setGeometry(300, 300, 250, 150)
  16.         self.setWindowTitle('Event handler')
  17.         self.show()
  18.  
  19.     # 此时如果按下ESC键程序就会退出。
  20.     def keyPressEvent(self, e):
  21.  
  22.         if e.key() == Qt.Key_Escape:
  23.             self.close()
  24.  
  25.  
  26. if __name__ == '__main__':
  27.  
  28.     app = QApplication(sys.argv)
  29.     ex = Example()
  30.     sys.exit(app.exec_())

 执行结果

这个例子中，我们替换了事件处理器函数keyPressEvent()此时如果按下ESC键程序就会退出。

Ex4.3事件对象 

事件对象是用python来描述一系列的事件自身属性的对象。

  1. import sys
  2. from PyQt5.QtCore import Qt
  3. from PyQt5.QtWidgets import QWidget, QApplication, QGridLayout, QLabel
  4.  
  5. class Example(QWidget):
  6.  
  7.     def __init__(self):
  8.         super().__init__()
  9.  
  10.         self.initUI()
  11.  
  12.  
  13.     def initUI(self):      
  14.  
  15.         grid = QGridLayout()
  16.         grid.setSpacing(10)
  17.  
  18.         x = 0
  19.         y = 0
  20.         # X Y坐标显示在QLabel组件里
  21.         self.text = "x: {0},  y: {1}".format(x, y)
  22.  
  23.         self.label = QLabel(self.text, self)
  24.         grid.addWidget(self.label, 0, 0, Qt.AlignTop)
  25.         # 事件追踪默认没有开启，当开启后才会追踪鼠标的点击事件。
  26.         self.setMouseTracking(True)
  27.  
  28.         self.setLayout(grid)
  29.  
  30.         self.setGeometry(300, 300, 350, 200)
  31.         self.setWindowTitle('Event object')
  32.         self.show()
  33.  
  34.     #e代表了事件对象。里面有我们触发事件（鼠标移动）的事件对象。x()和y()方法得到鼠标的x和y坐标点，然后拼成字符串输出到QLabel组件里。
  35.     def mouseMoveEvent(self, e):
  36.  
  37.         x = e.x()
  38.         y = e.y()
  39.  
  40.         text = "x: {0},  y: {1}".format(x, y)
  41.         self.label.setText(text)
  42.  
  43.  
  44. if __name__ == '__main__':
  45.  
  46.     app = QApplication(sys.argv)
  47.     ex = Example()
  48.     sys.exit(app.exec_())

执行结果

我们在一个组件里显示鼠标的X和Y坐标

Ex4.4事件发送 

 有时候我们会想知道是哪个组件发出了一个信号，PyQt5里的sender()方法能搞定这件事。

  1. import sys
  2. from PyQt5.QtWidgets import QMainWindow, QPushButton, QApplication
  3.  
  4.  
  5. class Example(QMainWindow):
  6.  
  7.     def __init__(self):
  8.         super().__init__()
  9.  
  10.         self.initUI()
  11.  
  12.  
  13.     def initUI(self):      
  14.  
  15.         btn1 = QPushButton("Button 1", self)
  16.         btn1.move(30, 50)
  17.  
  18.         btn2 = QPushButton("Button 2", self)
  19.         btn2.move(150, 50)
  20.         #两个按钮都和同一个slot绑定。
  21.         btn1.clicked.connect(self.buttonClicked)            
  22.         btn2.clicked.connect(self.buttonClicked)
  23.  
  24.         self.statusBar()
  25.  
  26.         self.setGeometry(300, 300, 290, 150)
  27.         self.setWindowTitle('Event sender')
  28.         self.show()
  29.  
  30.     #我们用调用sender()方法的方式决定了事件源。状态栏显示了被点击的按钮。
  31.     def buttonClicked(self):
  32.  
  33.         sender = self.sender()
  34.         self.statusBar().showMessage(sender.text() + ' was pressed')
  35.  
  36.  
  37. if __name__ == '__main__':
  38.  
  39.     app = QApplication(sys.argv)
  40.     ex = Example()
  41.     sys.exit(app.exec_())

执行结果 

 这个例子里有俩按钮，buttonClicked()方法决定了是哪个按钮能调用sender()方法。

Ex4.5信号发送

QObject实例能发送事件信号。下面的例子是发送自定义的信号

  1. import sys
  2. from PyQt5.QtCore import pyqtSignal, QObject
  3. from PyQt5.QtWidgets import QMainWindow, QApplication
  4.  
  5. #Communicate类创建了一个pyqtSignal()属性的信号。
  6. class Communicate(QObject):
  7.  
  8.     closeApp = pyqtSignal() 
  9.  
  10.  
  11. class Example(QMainWindow):
  12.  
  13.     def __init__(self):
  14.         super().__init__()
  15.  
  16.         self.initUI()
  17.  
  18.  
  19.     def initUI(self):      
  20.         ##closeApp信号QMainWindow的close()方法绑定
  21.         self.c = Communicate()
  22.         self.c.closeApp.connect(self.close)       
  23.  
  24.         self.setGeometry(300, 300, 290, 150)
  25.         self.setWindowTitle('Emit signal')
  26.         self.show()
  27.  
  28.     #点击窗口的时候，发送closeApp信号，程序终止
  29.     def mousePressEvent(self, event):
  30.  
  31.         self.c.closeApp.emit()
  32.  
  33.  
  34. if __name__ == '__main__':
  35.  
  36.     app = QApplication(sys.argv)
  37.     ex = Example()
  38.     sys.exit(app.exec_())

执行结果 

我们创建了一个叫closeApp的信号，这个信号会在鼠标按下的时候触发，事件与QMainWindow绑定。

对话框

对话框是一个现代GUI应用不可或缺的一部分。对话是两个人之间的交流，对话框就是人与电脑之间的对话。对话框用来输入数据，修改数据，修改应用设置等等。

Ex5.1输入文字

 QInputDialog提供了一个简单方便的对话框，可以输入字符串，数字或列表。

  1. from PyQt5.QtWidgets import (QWidget, QPushButton, QLineEdit, 
  2.     QInputDialog, QApplication)
  3. import sys
  4.  
  5. class Example(QWidget):
  6.  
  7.     def __init__(self):
  8.         super().__init__()
  9.  
  10.         self.initUI()
  11.  
  12.  
  13.     def initUI(self):
  14.  
  15.         self.btn = QPushButton('Dialog', self)
  16.         self.btn.move(20, 20)
  17.         self.btn.clicked.connect(self.showDialog)
  18.  
  19.         self.le = QLineEdit(self)
  20.         self.le.move(130, 22)
  21.  
  22.         self.setGeometry(300, 300, 290, 150)
  23.         self.setWindowTitle('Input dialog')
  24.         self.show()
  25.  
  26.  
  27.     def showDialog(self):
  28.         #这是显示一个输入框的代码。第一个参数是输入框的标题，第二个参数是输入框的占位符。对话框返回输入内容和一个布尔值，如果点击的是OK按钮，布尔值就返回True
  29.         text, ok = QInputDialog.getText(self, 'Input Dialog', 
  30.             'Enter your name:')
  31.         #把得到的字符串放到输入框里
  32.         if ok:
  33.             self.le.setText(str(text))
  34.  
  35.  
  36. if __name__ == '__main__':
  37.  
  38.     app = QApplication(sys.argv)
  39.     ex = Example()
  40.     sys.exit(app.exec_())

执行结果

这个示例有一个按钮和一个输入框，点击按钮显示对话框，输入的文本会显示在输入框里。 

Ex5.2选取颜色 

QColorDialog提供颜色的选择。

  1. from PyQt5.QtWidgets import (QWidget, QPushButton, QFrame, 
  2.     QColorDialog, QApplication)
  3. from PyQt5.QtGui import QColor
  4. import sys
  5.  
  6. class Example(QWidget):
  7.  
  8.     def __init__(self):
  9.         super().__init__()
  10.  
  11.         self.initUI()
  12.  
  13.  
  14.     def initUI(self):      
  15.         #初始化QtGui.QFrame的背景颜色
  16.         col = QColor(0, 0, 0) 
  17.  
  18.         self.btn = QPushButton('Dialog', self)
  19.         self.btn.move(20, 20)
  20.  
  21.         self.btn.clicked.connect(self.showDialog)
  22.  
  23.         self.frm = QFrame(self)
  24.         self.frm.setStyleSheet("QWidget { background-color: %s }" 
  25.             % col.name())
  26.         self.frm.setGeometry(130, 22, 100, 100)            
  27.  
  28.         self.setGeometry(300, 300, 250, 180)
  29.         self.setWindowTitle('Color dialog')
  30.         self.show()
  31.  
  32.  
  33.     def showDialog(self):
  34.         #弹出一个QColorDialog对话框。
  35.         col = QColorDialog.getColor()
  36.         #我们可以预览颜色，如果点击取消按钮，没有颜色值返回，如果颜色是我们想要的，就从取色框里选择这个颜色。
  37.         if col.isValid():
  38.             self.frm.setStyleSheet("QWidget { background-color: %s }"
  39.                 % col.name())
  40.  
  41.  
  42. if __name__ == '__main__':
  43.  
  44.     app = QApplication(sys.argv)
  45.     ex = Example()
  46.     sys.exit(app.exec_())

执行结果

例子里有一个按钮和一个QFrame，默认的背景颜色为黑色，我们可以使用QColorDialog改变背景颜色

Ex5.3选择字体  

QFontDialog能做字体的选择。 

  1. from PyQt5.QtWidgets import (QWidget, QVBoxLayout, QPushButton, 
  2.     QSizePolicy, QLabel, QFontDialog, QApplication)
  3. import sys
  4.  
  5. class Example(QWidget):
  6.  
  7.     def __init__(self):
  8.         super().__init__()
  9.  
  10.         self.initUI()
  11.  
  12.  
  13.     def initUI(self):      
  14.  
  15.         vbox = QVBoxLayout()
  16.  
  17.         btn = QPushButton('Dialog', self)
  18.         btn.setSizePolicy(QSizePolicy.Fixed,
  19.             QSizePolicy.Fixed)
  20.  
  21.         btn.move(20, 20)
  22.  
  23.         vbox.addWidget(btn)
  24.  
  25.         btn.clicked.connect(self.showDialog)
  26.  
  27.         self.lbl = QLabel('Knowledge only matters', self)
  28.         self.lbl.move(130, 20)
  29.  
  30.         vbox.addWidget(self.lbl)
  31.         self.setLayout(vbox)          
  32.  
  33.         self.setGeometry(300, 300, 250, 180)
  34.         self.setWindowTitle('Font dialog')
  35.         self.show()
  36.  
  37.  
  38.     def showDialog(self):
  39.         #弹出一个字体选择对话框。getFont()方法返回一个字体名称和状态信息。状态信息有OK和其他两种。
  40.         font, ok = QFontDialog.getFont()
  41.         #如果点击OK，标签的字体就会随之更改
  42.         if ok:
  43.             self.lbl.setFont(font)
  44.  
  45.  
  46. if __name__ == '__main__':
  47.  
  48.     app = QApplication(sys.argv)
  49.     ex = Example()
  50.     sys.exit(app.exec_())

执行结果  

创建了一个有一个按钮和一个标签的QFontDialog的对话框，我们可以使用这个功能修改字体样式。

Ex5.4选择文件 

QFileDialog给用户提供文件或者文件夹选择的功能。能打开和保存文件。

  1. from PyQt5.QtWidgets import (QMainWindow, QTextEdit, 
  2.     QAction, QFileDialog, QApplication)
  3. from PyQt5.QtGui import QIcon
  4. import sys
  5. #这里设置了一个文本编辑框，文本编辑框是基于QMainWindow组件的。
  6. class Example(QMainWindow):
  7.  
  8.     def __init__(self):
  9.         super().__init__()
  10.  
  11.         self.initUI()
  12.  
  13.  
  14.     def initUI(self):      
  15.  
  16.         self.textEdit = QTextEdit()
  17.         self.setCentralWidget(self.textEdit)
  18.         self.statusBar()
  19.  
  20.         openFile = QAction(QIcon('Ex5.4.jpg'), 'Open', self)
  21.         openFile.setShortcut('Ctrl+O')
  22.         openFile.setStatusTip('Open new File')
  23.         openFile.triggered.connect(self.showDialog)
  24.  
  25.         menubar = self.menuBar()
  26.         fileMenu = menubar.addMenu('&File')
  27.         fileMenu.addAction(openFile)       
  28.  
  29.         self.setGeometry(300, 300, 350, 300)
  30.         self.setWindowTitle('File dialog')
  31.         self.show()
  32.  
  33.  
  34.     def showDialog(self):
  35.         #弹出QFileDialog窗口。getOpenFileName()方法的第一个参数是说明文字，第二个参数是默认打开的文件夹路径。默认情况下显示所有类型的文件。
  36.         fname = QFileDialog.getOpenFileName(self, 'Open file', '.\\')
  37.         #读取选中的文件，并显示在文本编辑框内（但是打开HTML文件时，是渲染后的结果，汗）。
  38.         if fname[0]:
  39.             f = open(fname[0], 'r')
  40.  
  41.             with f:
  42.                 data = f.read()
  43.                 self.textEdit.setText(data)        
  44.  
  45. if __name__ == '__main__':
  46.  
  47.     app = QApplication(sys.argv)
  48.     ex = Example()
  49.     sys.exit(app.exec_())

执行结果 

本例中有一个菜单栏，一个置中的文本编辑框，一个状态栏。点击菜单栏选项会弹出一个QtGui.QFileDialog对话框，在这个对话框里，你能选择文件，然后文件的内容就会显示在文本编辑框里。 

控件(1) 

控件就像是应用这座房子的一块块砖。PyQt5有很多的控件，比如按钮，单选框，滑动条，复选框等等。在本章，我们将介绍一些很有用的控件：QCheckBox，ToggleButton，QSlider，QProgressBar 和 QCalendarWidget。

Ex6.1QCheckBox

QCheckBox 组件有俩状态：开和关。通常跟标签一起使用，用在激活和关闭一些选项的场景。

  1. from PyQt5.QtWidgets import QWidget, QCheckBox, QApplication
  2. from PyQt5.QtCore import Qt
  3. import sys
  4.  
  5. class Example(QWidget):
  6.  
  7.     def __init__(self):
  8.         super().__init__()
  9.  
  10.         self.initUI()
  11.  
  12.  
  13.     def initUI(self):      
  14.         # 这个是QCheckBox的构造器
  15.         cb = QCheckBox('Show title', self)
  16.         cb.move(20, 20)
  17.         # 要设置窗口标题，我们就要检查单选框的状态。默认情况下，窗口没有标题，单选框未选中
  18.         cb.toggle()
  19.         # 把changeTitle()方法和stateChanged信号关联起来。这样，changeTitle()就能切换窗口标题了
  20.         cb.stateChanged.connect(self.changeTitle)
  21.  
  22.         self.setGeometry(300, 300, 250, 150)
  23.         self.setWindowTitle('QCheckBox')
  24.         self.show()
  25.  
  26.     # 控件的状态是由changeTitle()方法控制的，如果空间被选中，我们就给窗口添加一个标题，如果没被选中，就清空标题。
  27.     def changeTitle(self, state):
  28.  
  29.         if state == Qt.Checked:
  30.             self.setWindowTitle('QCheckBox')
  31.         else:
  32.             self.setWindowTitle(' ')
  33.  
  34.  
  35. if __name__ == '__main__':
  36.  
  37.     app = QApplication(sys.argv)
  38.     ex = Example()
  39.     sys.exit(app.exec_())

执行结果

这个例子中，有一个能切换窗口标题的单选框

Ex6.2切换按钮 

 切换按钮就是QPushButton的一种特殊模式。 它只有两种状态：按下和未按下。我们在点击的时候切换两种状态，有很多场景会使用到这个功能

  1. from PyQt5.QtWidgets import (QWidget, QPushButton, 
  2.     QFrame, QApplication)
  3. from PyQt5.QtGui import QColor
  4. import sys
  5.  
  6. class Example(QWidget):
  7.  
  8.     def __init__(self):
  9.         super().__init__()
  10.  
  11.         self.initUI()
  12.  
  13.  
  14.     def initUI(self):      
  15.         # 设置颜色为黑色
  16.         self.col = QColor(0, 0, 0)       
  17.         # 创建一个QPushButton，然后调用它的setCheckable()的方法就把这个按钮编程了切换按钮
  18.         redb = QPushButton('Red', self)
  19.         redb.setCheckable(True)
  20.         redb.move(10, 10)
  21.         # 把点击信号和我们定义好的函数关联起来，这里是把点击事件转换成布尔值
  22.         redb.clicked[bool].connect(self.setColor)
  23.  
  24.         greenb = QPushButton('Green', self)
  25.         greenb.setCheckable(True)
  26.         greenb.move(10, 60)
  27.  
  28.         greenb.clicked[bool].connect(self.setColor)
  29.  
  30.         blueb = QPushButton('Blue', self)
  31.         blueb.setCheckable(True)
  32.         blueb.move(10, 110)
  33.  
  34.         blueb.clicked[bool].connect(self.setColor)
  35.  
  36.         self.square = QFrame(self)
  37.         self.square.setGeometry(150, 20, 100, 100)
  38.         self.square.setStyleSheet("QWidget { background-color: %s }" %  
  39.             self.col.name())
  40.  
  41.         self.setGeometry(300, 300, 280, 170)
  42.         self.setWindowTitle('Toggle button')
  43.         self.show()
  44.  
  45.  
  46.     def setColor(self, pressed):
  47.         # 获取被点击的按钮
  48.         source = self.sender()
  49.  
  50.         if pressed:
  51.             val = 255
  52.         else: val = 0
  53.         # 如果是标签为“red”的按钮被点击，就把颜色更改为预设好的对应颜色。
  54.         if source.text() == "Red":
  55.             self.col.setRed(val)                
  56.         elif source.text() == "Green":
  57.             self.col.setGreen(val)             
  58.         else:
  59.             self.col.setBlue(val) 
  60.         # 使用样式表（就是CSS的SS）改变背景色
  61.         self.square.setStyleSheet("QFrame { background-color: %s }" %
  62.             self.col.name())  
  63.  
  64.  
  65. if __name__ == '__main__':
  66.  
  67.     app = QApplication(sys.argv)
  68.     ex = Example()
  69.     sys.exit(app.exec_())

执行结果

 我们创建了一个切换按钮和一个QWidget，并把QWidget的背景设置为黑色。点击不同的切换按钮，背景色会在红、绿、蓝之间切换（而且能看到颜色合成的效果，而不是单纯的颜色覆盖）

Ex6.3滑块 

QSlider是个有一个小滑块的组件，这个小滑块能拖着前后滑动，这个经常用于修改一些具有范围的数值，比文本框或者点击增加减少的文本框（spin box）方便多了。

本例用一个滑块和一个标签展示。标签为一个图片，滑块控制标签（的值）。

先准备四个分别表示静音、小音量、中音量、大音量的图标，文件名分别叫Ex6.3.1.jpg, Ex6.3.2.jpg, Ex6.3.3.jpg, Ex6.3.4.jpg。

  1. from PyQt5.QtWidgets import (QWidget, QSlider, 
  2.     QLabel, QApplication)
  3. from PyQt5.QtCore import Qt
  4. from PyQt5.QtGui import QPixmap
  5. import sys
  6.  
  7. class Example(QWidget):
  8.  
  9.     def __init__(self):
  10.         super().__init__()
  11.  
  12.         self.initUI()
  13.  
  14.  
  15.     def initUI(self):      
  16.         # 创建一个水平的QSlider
  17.         sld = QSlider(Qt.Horizontal, self)
  18.         sld.setFocusPolicy(Qt.NoFocus)
  19.         sld.setGeometry(30, 40, 100, 30)
  20.         # 把valueChanged信号跟changeValue()方法关联起来
  21.         sld.valueChanged[int].connect(self.changeValue)
  22.         #创建一个QLabel组件并给它设置一个静音图标。
  23.         self.label = QLabel(self)
  24.         self.label.setPixmap(QPixmap('mute.png'))
  25.         self.label.setGeometry(160, 40, 80, 30)
  26.  
  27.         self.setGeometry(300, 300, 280, 170)
  28.         self.setWindowTitle('QSlider')
  29.         self.show()
  30.  
  31.  
  32.     def changeValue(self, value):
  33.         # 根据音量值的大小更换标签位置的图片。这段代码是：如果音量为0，就把图片换成 Ex6.3.1.jpg
  34.         if value == 0:
  35.             self.label.setPixmap(QPixmap('Ex6.3.1.jpg'))
  36.         elif value > 0 and value <= 30:
  37.             self.label.setPixmap(QPixmap('Ex6.3.2.jpg'))
  38.         elif value > 30 and value < 80:
  39.             self.label.setPixmap(QPixmap('Ex6.3.3.jpg'))
  40.         else:
  41.             self.label.setPixmap(QPixmap('Ex6.3.4.jpg'))
  42.  
  43.  
  44. if __name__ == '__main__':
  45.  
  46.     app = QApplication(sys.argv)
  47.     ex = Example()
  48.     sys.exit(app.exec_())

执行结果 

这里是模拟的音量控制器。拖动滑块，能改变标签位置的图片。

  

Ex6.4进度条

进度条是用来展示任务进度的（我也不想这样说话）。它的滚动能让用户了解到任务的进度。QProgressBar组件提供了水平和垂直两种进度条，进度条可以设置最大值和最小值，默认情况是0~99。

  1. from PyQt5.QtWidgets import (QWidget, QProgressBar, 
  2.     QPushButton, QApplication)
  3. from PyQt5.QtCore import QBasicTimer
  4. import sys
  5.  
  6. class Example(QWidget):
  7.  
  8.     def __init__(self):
  9.         super().__init__()
  10.  
  11.         self.initUI()
  12.  
  13.  
  14.     def initUI(self):      
  15.         # 新建一个QProgressBar构造器。
  16.         self.pbar = QProgressBar(self)
  17.         self.pbar.setGeometry(30, 40, 200, 25)
  18.  
  19.         self.btn = QPushButton('Start', self)
  20.         self.btn.move(40, 80)
  21.         self.btn.clicked.connect(self.doAction)
  22.         # 用时间控制进度条。
  23.         self.timer = QBasicTimer()
  24.         self.step = 0
  25.  
  26.         self.setGeometry(300, 300, 280, 170)
  27.         self.setWindowTitle('QProgressBar')
  28.         self.show()
  29.  
  30.     # 每个QObject和又它继承而来的对象都有一个timerEvent()事件处理函数。为了触发事件，我们重载了这个方法。
  31.     def timerEvent(self, e):
  32.  
  33.         if self.step >= 100:
  34.             self.timer.stop()
  35.             self.btn.setText('Finished')
  36.             return
  37.  
  38.         self.step = self.step + 1
  39.         self.pbar.setValue(self.step)
  40.  
  41.     # 里面的doAction()方法是用来控制开始和停止的。
  42.     def doAction(self):
  43.  
  44.         if self.timer.isActive():
  45.             self.timer.stop()
  46.             self.btn.setText('Start')
  47.         else:
  48.             # 调用start()方法加载一个时间事件。这个方法有两个参数：过期时间和事件接收者。
  49.             self.timer.start(100, self)
  50.             self.btn.setText('Stop')
  51.  
  52.  
  53. if __name__ == '__main__':
  54.  
  55.     app = QApplication(sys.argv)
  56.     ex = Example()
  57.     sys.exit(app.exec_())

执行结果

Ex6.5日历 

QCalendarWidget提供了基于月份的日历插件，十分简易而且直观。 

  1. from PyQt5.QtWidgets import (QWidget, QCalendarWidget, 
  2.     QLabel, QApplication, QVBoxLayout)
  3. from PyQt5.QtCore import QDate
  4. import sys
  5.  
  6. class Example(QWidget):
  7.  
  8.     def __init__(self):
  9.         super().__init__()
  10.  
  11.         self.initUI()
  12.  
  13.  
  14.     def initUI(self):      
  15.  
  16.         vbox = QVBoxLayout(self)
  17.         # 创建一个QCalendarWidget
  18.         cal = QCalendarWidget(self)
  19.         cal.setGridVisible(True)
  20.         # 选择一个日期时，QDate的点击信号就触发了，把这个信号和我们自己定义的showDate()方法关联起来。
  21.         cal.clicked[QDate].connect(self.showDate)
  22.  
  23.         vbox.addWidget(cal)
  24.  
  25.         self.lbl = QLabel(self)
  26.         date = cal.selectedDate()
  27.         self.lbl.setText(date.toString())
  28.  
  29.         vbox.addWidget(self.lbl)
  30.  
  31.         self.setLayout(vbox)
  32.  
  33.         self.setGeometry(300, 300, 350, 300)
  34.         self.setWindowTitle('Calendar')
  35.         self.show()
  36.  
  37.  
  38.     def showDate(self, date):     
  39.         #使用selectedDate()方法获取选中的日期，然后把日期对象转成字符串，在标签里面显示出来。
  40.         self.lbl.setText(date.toString())
  41.  
  42.  
  43. if __name__ == '__main__':
  44.  
  45.     app = QApplication(sys.argv)
  46.     ex = Example()
  47.     sys.exit(app.exec_())

执行结果

这个例子有日期组件和标签组件组成，标签显示被选中的日期。

控件(2)

本章我们继续介绍PyQt5控件。这次的有QPixmap，QLineEdit，QSplitter，和QComboBox。

Ex7.1图片

QPixmap是处理图片的组件。本例中，我们使用QPixmap在窗口里显示一张图片。

  1. from PyQt5.QtWidgets import (QWidget, QHBoxLayout, 
  2.     QLabel, QApplication)
  3. from PyQt5.QtGui import QPixmap
  4. import sys
  5.  
  6. class Example(QWidget):
  7.  
  8.     def __init__(self):
  9.         super().__init__()
  10.  
  11.         self.initUI()
  12.  
  13.  
  14.     def initUI(self):      
  15.  
  16.         hbox = QHBoxLayout(self)
  17.         #创建一个QPixmap对象，接收一个文件作为参数。
  18.         pixmap = QPixmap("Ex7.1.jpg")
  19.         #把QPixmap实例放到QLabel组件里。
  20.         lbl = QLabel(self)
  21.         lbl.setPixmap(pixmap)
  22.  
  23.         hbox.addWidget(lbl)
  24.         self.setLayout(hbox)
  25.  
  26.         self.move(300, 200)
  27.         self.setWindowTitle('Red Rock')
  28.         self.show()        
  29.  
  30.  
  31. if __name__ == '__main__':
  32.  
  33.     app = QApplication(sys.argv)
  34.     ex = Example()
  35.     sys.exit(app.exec_())

执行结果

Ex7.2行编辑 

QLineEdit组件提供了编辑文本的功能，自带了撤销、重做、剪切、粘贴、拖拽等功能。

  1. import sys
  2. from PyQt5.QtWidgets import (QWidget, QLabel, 
  3.     QLineEdit, QApplication)
  4.  
  5.  
  6. class Example(QWidget):
  7.  
  8.     def __init__(self):
  9.         super().__init__()
  10.  
  11.         self.initUI()
  12.  
  13.  
  14.     def initUI(self):      
  15.         
  16.         self.lbl = QLabel(self)
  17.         #创建一个QLineEdit对象。
  18.         qle = QLineEdit(self)
  19.  
  20.         qle.move(60, 100)
  21.         self.lbl.move(60, 40)
  22.         ##如果输入框的值有变化，就调用onChanged()方法
  23.         qle.textChanged[str].connect(self.onChanged)
  24.  
  25.         self.setGeometry(300, 300, 280, 170)
  26.         self.setWindowTitle('QLineEdit')
  27.         self.show()
  28.  
  29.     #在onChanged()方法内部，我们把文本框里的值赋值给了标签组件，然后调用adjustSize()方法让标签自适应文本内容。
  30.     def onChanged(self, text):
  31.  
  32.         self.lbl.setText(text)
  33.         self.lbl.adjustSize()        
  34.  
  35.  
  36. if __name__ == '__main__':
  37.  
  38.     app = QApplication(sys.argv)
  39.     ex = Example()
  40.     sys.exit(app.exec_())

执行结果

例子中展示了一个编辑组件和一个标签，我们在输入框里键入的文本，会立即在标签里显示出来。

Ex7.3QSplitter 

QSplitter组件能让用户通过拖拽分割线的方式改变子窗口大小的组件。本例中我们展示用两个分割线隔开的三个QFrame组件。

  1. from PyQt5.QtWidgets import (QWidget, QHBoxLayout, QFrame, 
  2.     QSplitter, QStyleFactory, QApplication)
  3. from PyQt5.QtCore import Qt
  4. import sys
  5.  
  6. class Example(QWidget):
  7.  
  8.     def __init__(self):
  9.         super().__init__()
  10.  
  11.         self.initUI()
  12.  
  13.  
  14.     def initUI(self):      
  15.  
  16.         hbox = QHBoxLayout(self)
  17.         #为了更清楚的看到分割线，我们使用了设置好的子窗口样式。
  18.         topleft = QFrame(self)
  19.         topleft.setFrameShape(QFrame.StyledPanel)
  20.  
  21.         topright = QFrame(self)
  22.         topright.setFrameShape(QFrame.StyledPanel)
  23.  
  24.         bottom = QFrame(self)
  25.         bottom.setFrameShape(QFrame.StyledPanel)
  26.         #创建一个QSplitter组件，并在里面添加了两个框架。
  27.         splitter1 = QSplitter(Qt.Horizontal)
  28.         splitter1.addWidget(topleft)
  29.         splitter1.addWidget(topright)
  30.         #也可以在分割线里面再进行分割。
  31.         splitter2 = QSplitter(Qt.Vertical)
  32.         splitter2.addWidget(splitter1)
  33.         splitter2.addWidget(bottom)
  34.  
  35.         hbox.addWidget(splitter2)
  36.         self.setLayout(hbox)
  37.  
  38.         self.setGeometry(300, 300, 300, 200)
  39.         self.setWindowTitle('QSplitter')
  40.         self.show()
  41.  
  42.  
  43.     def onChanged(self, text):
  44.  
  45.         self.lbl.setText(text)
  46.         self.lbl.adjustSize()        
  47.  
  48.  
  49. if __name__ == '__main__':
  50.  
  51.     app = QApplication(sys.argv)
  52.     ex = Example()
  53.     sys.exit(app.exec_())

执行结果

三个窗口和两个分割线的布局创建完成了，但是要注意，有些主题下，分割线的显示效果不太好。

Ex7.4下拉选框 

 QComboBox组件能让用户在多个选择项中选择一个。

  1. from PyQt5.QtWidgets import (QWidget, QLabel, 
  2.     QComboBox, QApplication)
  3. import sys
  4.  
  5. class Example(QWidget):
  6.  
  7.     def __init__(self):
  8.         super().__init__()
  9.  
  10.         self.initUI()
  11.  
  12.  
  13.     def initUI(self):      
  14.  
  15.         self.lbl = QLabel("Ubuntu", self)
  16.         # 创建一个QComboBox组件和五个选项。
  17.         combo = QComboBox(self)
  18.         combo.addItem("Ubuntu")
  19.         combo.addItem("Mandriva")
  20.         combo.addItem("Fedora")
  21.         combo.addItem("Arch")
  22.         combo.addItem("Gentoo")
  23.  
  24.         combo.move(50, 50)
  25.         self.lbl.move(50, 150)
  26.         # 在选中的条目上调用onActivated()方法。
  27.         combo.activated[str].connect(self.onActivated)        
  28.  
  29.         self.setGeometry(300, 300, 300, 200)
  30.         self.setWindowTitle('QComboBox')
  31.         self.show()
  32.  
  33.     # 在方法内部，设置标签内容为选定的字符串，然后设置自适应文本大小。
  34.     def onActivated(self, text):
  35.  
  36.         self.lbl.setText(text)
  37.         self.lbl.adjustSize()  
  38.  
  39.  
  40. if __name__ == '__main__':
  41.  
  42.     app = QApplication(sys.argv)
  43.     ex = Example()
  44.     sys.exit(app.exec_())

执行结果

本例包含了一个QComboBox和一个QLabel。下拉选择框有五个选项，都是Linux的发行版名称，标签内容为选定的发行版名称。

拖拽

在GUI里，拖放是指用户点击一个虚拟的对象，拖动，然后放置到另外一个对象上面的动作。一般情况下，需要调用很多动作和方法，创建很多变量。

拖放能让用户很直观的操作很复杂的逻辑。

一般情况下，我们可以拖放两种东西：数据和图形界面。把一个图像从一个应用拖放到另外一个应用上的实质是操作二进制数据。把一个表格从Firefox上拖放到另外一个位置 的实质是操作一个图形组。

Ex8.1简单的拖放

本例使用了QLineEdit和QPushButton。把一个文本从编辑框里拖到按钮上，更新按钮上的标签（文字）。

  1. from PyQt5.QtWidgets import (QPushButton, QWidget, 
  2.     QLineEdit, QApplication)
  3. import sys
  4. #为了完成预定目标，我们要重构一些方法。首先用QPushButton上构造一个按钮实例。
  5. class Button(QPushButton):
  6.  
  7.     def __init__(self, title, parent):
  8.         super().__init__(title, parent)
  9.         # 激活组件的拖拽事件
  10.         self.setAcceptDrops(True)
  11.  
  12.  
  13.     def dragEnterEvent(self, e):
  14.         # 首先，我们重构了dragEnterEvent()方法。设定好接受拖拽的数据类型（plain text）
  15.         if e.mimeData().hasFormat('text/plain'):
  16.             e.accept()
  17.         else:
  18.             e.ignore() 
  19.     #然后重构dropEvent()方法，更改按钮接受鼠标的释放事件的默认行为
  20.     def dropEvent(self, e):
  21.  
  22.         self.setText(e.mimeData().text()) 
  23.  
  24.  
  25. class Example(QWidget):
  26.  
  27.     def __init__(self):
  28.         super().__init__()
  29.  
  30.         self.initUI()
  31.  
  32.  
  33.     def initUI(self):
  34.         #QLineEdit默认支持拖拽操作，所以我们只要调用setDragEnabled()方法使用就行了。
  35.         edit = QLineEdit('', self)
  36.         edit.setDragEnabled(True)
  37.         edit.move(30, 65)
  38.  
  39.         button = Button("Button", self)
  40.         button.move(190, 65)
  41.  
  42.         self.setWindowTitle('Simple drag and drop')
  43.         self.setGeometry(300, 300, 300, 150)
  44.  
  45.  
  46. if __name__ == '__main__':
  47.  
  48.     app = QApplication(sys.argv)
  49.     ex = Example()
  50.     ex.show()
  51.     app.exec_()

执行结果

Ex8.2拖放按钮组件 

这个例子展示怎么拖放一个button组件。 

  1. from PyQt5.QtWidgets import QPushButton, QWidget, QApplication
  2. from PyQt5.QtCore import Qt, QMimeData
  3. from PyQt5.QtGui import QDrag
  4. import sys
  5. #从QPushButton继承一个Button类，然后重构QPushButton的两个方法:mouseMoveEvent()和mousePressEvent().mouseMoveEvent()是拖拽开始的事件。
  6. class Button(QPushButton):
  7.  
  8.     def __init__(self, title, parent):
  9.         super().__init__(title, parent)
  10.  
  11.  
  12.     def mouseMoveEvent(self, e):
  13.         #我们只劫持按钮的右键事件，左键的操作还是默认行为。
  14.         if e.buttons() != Qt.RightButton:
  15.             return
  16.         #创建一个QDrag对象，用来传输MIME-based数据。
  17.         mimeData = QMimeData()
  18.  
  19.         drag = QDrag(self)
  20.         drag.setMimeData(mimeData)
  21.         drag.setHotSpot(e.pos() - self.rect().topLeft())
  22.         #拖放事件开始时，用到的处理函数式start().
  23.         dropAction = drag.exec_(Qt.MoveAction)
  24.  
  25.     #左键点击按钮，会在控制台输出“press”。注意，我们在父级上也调用了mousePressEvent()方法，不然的话，我们是看不到按钮按下的效果的。
  26.     def mousePressEvent(self, e):
  27.  
  28.         super().mousePressEvent(e)
  29.  
  30.         if e.button() == Qt.LeftButton:
  31.             print('press')
  32.  
  33.  
  34. class Example(QWidget):
  35.  
  36.     def __init__(self):
  37.         super().__init__()
  38.  
  39.         self.initUI()
  40.  
  41.  
  42.     def initUI(self):
  43.  
  44.         self.setAcceptDrops(True)
  45.  
  46.         self.button = Button('Button', self)
  47.         self.button.move(100, 65)
  48.  
  49.         self.setWindowTitle('Click or Move')
  50.         self.setGeometry(300, 300, 280, 150)
  51.  
  52.  
  53.     def dragEnterEvent(self, e):
  54.  
  55.         e.accept()
  56.  
  57.  
  58.     def dropEvent(self, e):
  59.         #在dropEvent()方法里，我们定义了按钮按下后和释放后的行为，获得鼠标移动的位置，然后把按钮放到这个地方。
  60.         position = e.pos()
  61.         self.button.move(position)
  62.         #指定放下的动作类型为moveAction。
  63.         e.setDropAction(Qt.MoveAction)
  64.         e.accept()
  65.  
  66.  
  67. if __name__ == '__main__':
  68.  
  69.     app = QApplication(sys.argv)
  70.     ex = Example()
  71.     ex.show()
  72.     app.exec_()

执行结果

上面的例子中，窗口上有一个QPushButton组件。左键点击按钮，控制台就会输出press。右键可以点击然后拖动按钮

绘图

PyQt5绘图系统能渲染矢量图像、位图图像和轮廓字体文本。一般会使用在修改或者提高现有组件的功能，或者创建自己的组件。使用PyQt5的绘图API进行操作。

绘图由paintEvent()方法完成，绘图的代码要放在QPainter对象的begin()和end()方法之间。是低级接口。

Ex9.1文本涂鸦

我们从画一些Unicode文本开始。

  1. import sys
  2. from PyQt5.QtWidgets import QWidget, QApplication
  3. from PyQt5.QtGui import QPainter, QColor, QFont
  4. from PyQt5.QtCore import Qt
  5.  
  6. class Example(QWidget):
  7.  
  8.     def __init__(self):
  9.         super().__init__()
  10.  
  11.         self.initUI()
  12.  
  13.  
  14.     def initUI(self):      
  15.  
  16.         self.text = "Лев Николаевич Толстой\nАнна Каренина"
  17.  
  18.         self.setGeometry(300, 300, 280, 170)
  19.         self.setWindowTitle('Drawing text')
  20.         self.show()
  21.  
  22.     # 在绘画事件内完成绘画动作
  23.     def paintEvent(self, event):
  24.         # QPainter是低级的绘画类。所有的绘画动作都在这个类的begin()和end()方法之间完成，绘画动作都封装在drawText()内部了
  25.         qp = QPainter()
  26.         qp.begin(self)
  27.         self.drawText(event, qp)
  28.         qp.end()
  29.  
  30.  
  31.     def drawText(self, event, qp):
  32.         # 为文字绘画定义了笔和字体。
  33.         qp.setPen(QColor(168, 34, 3))
  34.         qp.setFont(QFont('Decorative', 10))
  35.         # drawText()方法在窗口里绘制文本，rect()方法返回要更新的矩形区域。
  36.         qp.drawText(event.rect(), Qt.AlignCenter, self.text)        
  37.  
  38.  
  39. if __name__ == '__main__':
  40.  
  41.     app = QApplication(sys.argv)
  42.     ex = Example()
  43.     sys.exit(app.exec_())

执行结果

 写了一些文本上下居中对齐的俄罗斯Cylliric语言的文字

Ex9.2点的绘画 

点是最简单的绘画了。

  1. from PyQt5.QtWidgets import QWidget, QApplication
  2. from PyQt5.QtGui import QPainter
  3. from PyQt5.QtCore import Qt
  4. import sys, random
  5.  
  6. class Example(QWidget):
  7.  
  8.     def __init__(self):
  9.         super().__init__()
  10.  
  11.         self.initUI()
  12.  
  13.  
  14.     def initUI(self):      
  15.  
  16.         self.setGeometry(300, 300, 300, 190)
  17.         self.setWindowTitle('Points')
  18.         self.show()
  19.  
  20.  
  21.     def paintEvent(self, e):
  22.  
  23.         qp = QPainter()
  24.         qp.begin(self)
  25.         self.drawPoints(qp)
  26.         qp.end()
  27.  
  28.  
  29.     def drawPoints(self, qp):
  30.         # 设置笔的颜色为红色，使用的是预定义好的颜色。
  31.         qp.setPen(Qt.red)
  32.         # 每次更改窗口大小，都会产生绘画事件，从size()方法里获得当前窗口的大小，然后把产生的点随机的分配到窗口的所有位置上。
  33.         size = self.size()
  34.  
  35.         for i in range(1000):
  36.             x = random.randint(1, size.width()-1)
  37.             y = random.randint(1, size.height()-1)
  38.             # drawPoint()方法绘图。
  39.             qp.drawPoint(x, y)     
  40.  
  41.  
  42. if __name__ == '__main__':
  43.  
  44.     app = QApplication(sys.argv)
  45.     ex = Example()
  46.     sys.exit(app.exec_())

执行结果

我们在窗口里随机的画出了1000个点。

Ex9.3颜色

颜色是一个物体显示的RGB的混合色。RBG值的范围是0255。我们有很多方式去定义一个颜色，最常见的方式就是RGB和16进制表示法，也可以使用RGBA，增加了一个透明度的选项，透明度值的范围是01，0代表完全透明。

  1. from PyQt5.QtWidgets import QWidget, QApplication
  2. from PyQt5.QtGui import QPainter, QColor, QBrush
  3. import sys
  4.  
  5. class Example(QWidget):
  6.  
  7.     def __init__(self):
  8.         super().__init__()
  9.  
  10.         self.initUI()
  11.  
  12.  
  13.     def initUI(self):      
  14.  
  15.         self.setGeometry(300, 300, 350, 100)
  16.         self.setWindowTitle('Colours')
  17.         self.show()
  18.  
  19.  
  20.     def paintEvent(self, e):
  21.  
  22.         qp = QPainter()
  23.         qp.begin(self)
  24.         self.drawRectangles(qp)
  25.         qp.end()
  26.  
  27.  
  28.     def drawRectangles(self, qp):
  29.         # 使用16进制的方式定义一个颜色。
  30.         col = QColor(0, 0, 0)
  31.         col.setNamedColor('#d4d4d4')
  32.         qp.setPen(col)
  33.         # 定义了一个笔刷，并画出了一个矩形。笔刷是用来画一个物体的背景。drawRect()有四个参数，分别是矩形的x、y、w、h。 然后用笔刷和矩形进行绘画。
  34.         qp.setBrush(QColor(200, 0, 0))
  35.         qp.drawRect(10, 15, 90, 60)
  36.  
  37.         qp.setBrush(QColor(255, 80, 0, 160))
  38.         qp.drawRect(130, 15, 90, 60)
  39.  
  40.         qp.setBrush(QColor(25, 0, 90, 200))
  41.         qp.drawRect(250, 15, 90, 60)
  42.  
  43.  
  44. if __name__ == '__main__':
  45.  
  46.     app = QApplication(sys.argv)
  47.     ex = Example()
  48.     sys.exit(app.exec_())

执行结果

我们画出了三个颜色的矩形。

Ex9.4QPen 

QPen是基本的绘画对象，能用来画直线、曲线、矩形框、椭圆、多边形和其他形状。

  1. from PyQt5.QtWidgets import QWidget, QApplication
  2. from PyQt5.QtGui import QPainter, QPen
  3. from PyQt5.QtCore import Qt
  4. import sys
  5.  
  6. class Example(QWidget):
  7.  
  8.     def __init__(self):
  9.         super().__init__()
  10.  
  11.         self.initUI()
  12.  
  13.  
  14.     def initUI(self):      
  15.  
  16.         self.setGeometry(300, 300, 280, 270)
  17.         self.setWindowTitle('Pen styles')
  18.         self.show()
  19.  
  20.  
  21.     def paintEvent(self, e):
  22.  
  23.         qp = QPainter()
  24.         qp.begin(self)
  25.         self.drawLines(qp)
  26.         qp.end()
  27.  
  28.  
  29.     def drawLines(self, qp):
  30.         # 新建一个QPen对象，设置颜色黑色，宽2像素，这样就能看出来各个笔样式的区别。Qt.SolidLine是预定义样式的一种。
  31.         pen = QPen(Qt.black, 2, Qt.SolidLine)
  32.  
  33.         qp.setPen(pen)
  34.         qp.drawLine(20, 40, 250, 40)
  35.         #这里我们自定义了一个笔的样式。
  36.         # 定义为Qt.CustomDashLine然后调用setDashPattern()方法。
  37.         # 数字列表是线的样式，要求必须是个数为奇数，奇数位定义的是空格，偶数位为线长，数字越大，空格或线长越大，比如本例的就是1像素线，4像素空格，5像素线，4像素空格。
  38.         pen.setStyle(Qt.DashLine)
  39.         qp.setPen(pen)
  40.         qp.drawLine(20, 80, 250, 80)
  41.  
  42.         pen.setStyle(Qt.DashDotLine)
  43.         qp.setPen(pen)
  44.         qp.drawLine(20, 120, 250, 120)
  45.  
  46.         pen.setStyle(Qt.DotLine)
  47.         qp.setPen(pen)
  48.         qp.drawLine(20, 160, 250, 160)
  49.  
  50.         pen.setStyle(Qt.DashDotDotLine)
  51.         qp.setPen(pen)
  52.         qp.drawLine(20, 200, 250, 200)
  53.  
  54.         pen.setStyle(Qt.CustomDashLine)
  55.         pen.setDashPattern([1, 4, 5, 4])
  56.         qp.setPen(pen)
  57.         qp.drawLine(20, 240, 250, 240)
  58.  
  59.  
  60. if __name__ == '__main__':
  61.  
  62.     app = QApplication(sys.argv)
  63.     ex = Example()
  64.     sys.exit(app.exec_())

执行结果

在这个例子里，我们用不同的笔画了6条直线。PyQt5有五个预定义的笔，另外一个笔的样式使我们自定义的。

Ex9.5QBrush

QBrush也是图像的一个基本元素。是用来填充一些物体的背景图用的，比如矩形，椭圆，多边形等。有三种类型：预定义、渐变和纹理。

  1. from PyQt5.QtWidgets import QWidget, QApplication
  2. from PyQt5.QtGui import QPainter, QBrush
  3. from PyQt5.QtCore import Qt
  4. import sys
  5.  
  6. class Example(QWidget):
  7.  
  8.     def __init__(self):
  9.         super().__init__()
  10.  
  11.         self.initUI()
  12.  
  13.  
  14.     def initUI(self):      
  15.  
  16.         self.setGeometry(300, 300, 355, 280)
  17.         self.setWindowTitle('Brushes')
  18.         self.show()
  19.  
  20.  
  21.     def paintEvent(self, e):
  22.  
  23.         qp = QPainter()
  24.         qp.begin(self)
  25.         self.drawBrushes(qp)
  26.         qp.end()
  27.  
  28.  
  29.     def drawBrushes(self, qp):
  30.         # 创建了一个笔刷对象，添加笔刷样式，然后调用drawRect()方法画图。
  31.         brush = QBrush(Qt.SolidPattern)
  32.         qp.setBrush(brush)
  33.         qp.drawRect(10, 15, 90, 60)
  34.  
  35.         brush.setStyle(Qt.Dense1Pattern)
  36.         qp.setBrush(brush)
  37.         qp.drawRect(130, 15, 90, 60)
  38.  
  39.         brush.setStyle(Qt.Dense2Pattern)
  40.         qp.setBrush(brush)
  41.         qp.drawRect(250, 15, 90, 60)
  42.  
  43.         brush.setStyle(Qt.DiagCrossPattern)
  44.         qp.setBrush(brush)
  45.         qp.drawRect(10, 105, 90, 60)
  46.  
  47.         brush.setStyle(Qt.Dense5Pattern)
  48.         qp.setBrush(brush)
  49.         qp.drawRect(130, 105, 90, 60)
  50.  
  51.         brush.setStyle(Qt.Dense6Pattern)
  52.         qp.setBrush(brush)
  53.         qp.drawRect(250, 105, 90, 60)
  54.  
  55.         brush.setStyle(Qt.HorPattern)
  56.         qp.setBrush(brush)
  57.         qp.drawRect(10, 195, 90, 60)
  58.  
  59.         brush.setStyle(Qt.VerPattern)
  60.         qp.setBrush(brush)
  61.         qp.drawRect(130, 195, 90, 60)
  62.  
  63.         brush.setStyle(Qt.BDiagPattern)
  64.         qp.setBrush(brush)
  65.         qp.drawRect(250, 195, 90, 60)
  66.  
  67.  
  68. if __name__ == '__main__':
  69.  
  70.     app = QApplication(sys.argv)
  71.     ex = Example()
  72.     sys.exit(app.exec_())

执行结果

我们画了9个不同的矩形。

Ex9.6贝塞尔曲线 

可以使用PyQt5的QPainterPath创建贝塞尔曲线。绘画路径是由许多构建图形的对象，具体表现就是一些线的形状，比如矩形，椭圆，线和曲线。

  1. from PyQt5.QtWidgets import QWidget, QApplication
  2. from PyQt5.QtGui import QPainter, QPainterPath
  3. from PyQt5.QtCore import Qt
  4. import sys
  5.  
  6. class Example(QWidget):
  7.  
  8.     def __init__(self):
  9.         super().__init__()
  10.  
  11.         self.initUI()
  12.  
  13.  
  14.     def initUI(self):      
  15.  
  16.         self.setGeometry(300, 300, 380, 250)
  17.         self.setWindowTitle('Bézier curve')
  18.         self.show()
  19.  
  20.  
  21.     def paintEvent(self, e):
  22.  
  23.         qp = QPainter()
  24.         qp.begin(self)
  25.         qp.setRenderHint(QPainter.Antialiasing)
  26.         self.drawBezierCurve(qp)
  27.         qp.end()
  28.  
  29.  
  30.     def drawBezierCurve(self, qp):
  31.         # 用QPainterPath路径创建贝塞尔曲线。使用cubicTo()方法生成，分别需要三个点：起始点，控制点和终止点。
  32.         path = QPainterPath()
  33.         path.moveTo(30, 30)
  34.         path.cubicTo(30, 30, 200, 350, 350, 30)
  35.         # drawPath()绘制最后的图像。
  36.         qp.drawPath(path)
  37.  
  38.  
  39. if __name__ == '__main__':
  40.  
  41.     app = QApplication(sys.argv)
  42.     ex = Example()
  43.     sys.exit(app.exec_())

执行结果

这个示例中，我们画出了一个贝塞尔曲线。

自定义组件

PyQt5有丰富的组件，但是肯定满足不了所有开发者的所有需求，PyQt5只提供了基本的组件，像按钮，文本，滑块等。如果你还需要其他的模块，应该尝试自己去自定义一些。自定义组件使用绘画工具创建，有两个基本方式：根据已有的创建或改进；通过自己绘图创建。

Ex10.1Burning widget

这个组件我们会在Nero，K3B，或者其他CD/DVD烧录软件中见到。

  1. from PyQt5.QtWidgets import (QWidget, QSlider, QApplication, 
  2.     QHBoxLayout, QVBoxLayout)
  3. from PyQt5.QtCore import QObject, Qt, pyqtSignal
  4. from PyQt5.QtGui import QPainter, QFont, QColor, QPen
  5. import sys
  6.  
  7. class Communicate(QObject):
  8.  
  9.     updateBW = pyqtSignal(int)
  10.  
  11. #基于QWidget组件。
  12. class BurningWidget(QWidget):
  13.  
  14.     def __init__(self):      
  15.         super().__init__()
  16.  
  17.         self.initUI()
  18.  
  19.  
  20.     def initUI(self):
  21.         #修改组件进度条的高度，默认的有点小。
  22.         self.setMinimumSize(1, 30)
  23.         self.value = 75
  24.         self.num = [75, 150, 225, 300, 375, 450, 525, 600, 675]
  25.  
  26.  
  27.     def setValue(self, value):
  28.  
  29.         self.value = value
  30.  
  31.  
  32.     def paintEvent(self, e):
  33.  
  34.         qp = QPainter()
  35.         qp.begin(self)
  36.         self.drawWidget(qp)
  37.         qp.end()
  38.  
  39.  
  40.     def drawWidget(self, qp):
  41.  
  42.         MAX_CAPACITY = 700
  43.         OVER_CAPACITY = 750
  44.         #使用比默认更小一点的字体，这样更配。
  45.         font = QFont('Serif', 7, QFont.Light)
  46.         qp.setFont(font)
  47.         # 动态的渲染组件，随着窗口的大小而变化，
  48.         # 这就是我们计算窗口大小的原因。最后一个参数决定了组件的最大范围，进度条的值是由窗口大小按比例计算出来的。
  49.         # 最大值的地方填充的是红色。注意这里使用的是浮点数，能提高计算和渲染的精度。
  50.         # 绘画由三部分组成，黄色或红色区域和黄色矩形，然后是分割线，最后是添上代表容量的数字。
  51.         size = self.size()
  52.         w = size.width()
  53.         h = size.height()
  54.  
  55.         step = int(round(w / 10))
  56.  
  57.  
  58.         till = int(((w / OVER_CAPACITY) * self.value))
  59.         full = int(((w / OVER_CAPACITY) * MAX_CAPACITY))
  60.  
  61.         if self.value >= MAX_CAPACITY:
  62.  
  63.             qp.setPen(QColor(255, 255, 255))
  64.             qp.setBrush(QColor(255, 255, 184))
  65.             qp.drawRect(0, 0, full, h)
  66.             qp.setPen(QColor(255, 175, 175))
  67.             qp.setBrush(QColor(255, 175, 175))
  68.             qp.drawRect(full, 0, till-full, h)
  69.  
  70.         else:
  71.  
  72.             qp.setPen(QColor(255, 255, 255))
  73.             qp.setBrush(QColor(255, 255, 184))
  74.             qp.drawRect(0, 0, till, h)
  75.  
  76.  
  77.         pen = QPen(QColor(20, 20, 20), 1, 
  78.             Qt.SolidLine)
  79.  
  80.         qp.setPen(pen)
  81.         qp.setBrush(Qt.NoBrush)
  82.         qp.drawRect(0, 0, w-1, h-1)
  83.  
  84.         j = 0
  85.  
  86.         for i in range(step, 10*step, step):
  87.  
  88.             qp.drawLine(i, 0, i, 5)
  89.             #这里使用字体去渲染文本。必须要知道文本的宽度，这样才能让文本的中间点正好落在竖线上。
  90.             metrics = qp.fontMetrics()
  91.             fw = metrics.width(str(self.num[j]))
  92.             qp.drawText(i-fw/2, h/2, str(self.num[j]))
  93.             j = j + 1
  94.  
  95.  
  96. class Example(QWidget):
  97.  
  98.     def __init__(self):
  99.         super().__init__()
  100.  
  101.         self.initUI()
  102.  
  103.  
  104.     def initUI(self):      
  105.  
  106.         OVER_CAPACITY = 750
  107.  
  108.         sld = QSlider(Qt.Horizontal, self)
  109.         sld.setFocusPolicy(Qt.NoFocus)
  110.         sld.setRange(1, OVER_CAPACITY)
  111.         sld.setValue(75)
  112.         sld.setGeometry(30, 40, 150, 30)
  113.  
  114.         self.c = Communicate()        
  115.         self.wid = BurningWidget()
  116.         self.c.updateBW[int].connect(self.wid.setValue)
  117.  
  118.         sld.valueChanged[int].connect(self.changeValue)
  119.         hbox = QHBoxLayout()
  120.         hbox.addWidget(self.wid)
  121.         vbox = QVBoxLayout()
  122.         vbox.addStretch(1)
  123.         vbox.addLayout(hbox)
  124.         self.setLayout(vbox)
  125.  
  126.         self.setGeometry(300, 300, 390, 210)
  127.         self.setWindowTitle('Burning widget')
  128.         self.show()
  129.  
  130.     #拖动滑块的时候，调用了changeValue()方法。这个方法内部，我们自定义了一个可以传参的updateBW信号。
  131.     # 参数就是滑块的当前位置。这个数值之后还用来于Burning组件，然后重新渲染Burning组件。
  132.     def changeValue(self, value):
  133.  
  134.         self.c.updateBW.emit(value)        
  135.         self.wid.repaint()
  136.  
  137.  
  138. if __name__ == '__main__':
  139.  
  140.     app = QApplication(sys.argv)
  141.     ex = Example()
  142.     sys.exit(app.exec_())

执行结果 

 本例中，我们使用了QSlider和一个自定义组件，由进度条控制。显示的有物体（也就是CD/DVD）的总容量和剩余容量。进度条的范围是1~750。如果值达到了700（OVER_CAPACITY），就显示为红色，代表了烧毁了的意思。

烧录组件在窗口的底部，这个组件是用QHBoxLayout和QVBoxLayout组成的。

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号