PyQt5-Chinese-tutorial/对话框.md

349 lines
7.9 KiB
Markdown
Raw Normal View History

2016-09-30 11:32:50 +08:00
# 对话框
2016-10-06 14:22:27 +08:00
对话框是一个现代GUI应用不可或缺的一部分。对话是两个人之间的交流对话框就是人与电脑之间的对话。对话框用来输入数据修改数据修改应用设置等等。
2016-10-06 14:15:47 +08:00
2016-10-06 14:22:27 +08:00
## QInputDialog
2016-10-06 14:15:47 +08:00
2016-10-06 14:22:27 +08:00
`QInputDialog`提供了一个简单方便的对话框,可以输入字符串,数字或列表。
```
2016-10-06 14:15:47 +08:00
#!/usr/bin/python3
# -*- coding: utf-8 -*-
"""
2016-10-08 01:39:59 +08:00
ZetCode PyQt5 tutorial
2016-10-06 14:15:47 +08:00
In this example, we receive data from
2016-10-08 01:39:59 +08:00
a QInputDialog dialog.
2016-10-06 14:15:47 +08:00
author: Jan Bodnar
2016-10-08 01:39:59 +08:00
website: zetcode.com
2016-10-06 14:15:47 +08:00
last edited: January 2015
"""
import sys
2016-10-08 01:39:59 +08:00
from PyQt5.QtWidgets import (QWidget, QPushButton, QLineEdit,
2016-10-06 14:15:47 +08:00
QInputDialog, QApplication)
class Example(QWidget):
2016-10-08 01:39:59 +08:00
2016-10-06 14:15:47 +08:00
def __init__(self):
super().__init__()
2016-10-08 01:39:59 +08:00
2016-10-06 14:15:47 +08:00
self.initUI()
2016-10-08 01:39:59 +08:00
def initUI(self):
2016-10-06 14:15:47 +08:00
self.btn = QPushButton('Dialog', self)
self.btn.move(20, 20)
self.btn.clicked.connect(self.showDialog)
2016-10-08 01:39:59 +08:00
2016-10-06 14:15:47 +08:00
self.le = QLineEdit(self)
self.le.move(130, 22)
2016-10-08 01:39:59 +08:00
2016-10-06 14:15:47 +08:00
self.setGeometry(300, 300, 290, 150)
self.setWindowTitle('Input dialog')
self.show()
2016-10-08 01:39:59 +08:00
2016-10-06 14:15:47 +08:00
def showDialog(self):
2016-10-08 01:39:59 +08:00
text, ok = QInputDialog.getText(self, 'Input Dialog',
2016-10-06 14:15:47 +08:00
'Enter your name:')
2016-10-08 01:39:59 +08:00
2016-10-06 14:15:47 +08:00
if ok:
self.le.setText(str(text))
2016-10-08 01:39:59 +08:00
2016-10-06 14:15:47 +08:00
if __name__ == '__main__':
2016-10-08 01:39:59 +08:00
2016-10-06 14:15:47 +08:00
app = QApplication(sys.argv)
ex = Example()
sys.exit(app.exec_())
2016-10-06 14:22:27 +08:00
```
2016-10-06 17:07:04 +08:00
这个示例有一个按钮和一个输入框,点击按钮显示对话框,输入的文本会显示在输入框里。
```
2016-10-08 01:39:59 +08:00
text, ok = QInputDialog.getText(self, 'Input Dialog',
2016-10-06 14:15:47 +08:00
'Enter your name:')
2016-10-06 17:07:04 +08:00
```
这是显示一个输入框的代码。第一个参数是输入框的标题第二个参数是输入框的占位符。对话框返回输入内容和一个布尔值如果点击的是OK按钮布尔值就返回True。
```
2016-10-06 14:15:47 +08:00
if ok:
self.le.setText(str(text))
2016-10-06 17:07:04 +08:00
```
把得到的字符串放到输入框里。
程序展示:
2016-10-06 14:15:47 +08:00
2016-10-06 17:07:04 +08:00
![input dialog](./images/5-inputdialog.png)
2016-10-06 14:15:47 +08:00
2016-10-06 17:07:04 +08:00
## QColorDialog
2016-10-06 14:15:47 +08:00
2016-10-06 17:07:04 +08:00
QColorDialog提供颜色的选择。
```
2016-10-06 14:15:47 +08:00
#!/usr/bin/python3
# -*- coding: utf-8 -*-
"""
2016-10-08 01:39:59 +08:00
ZetCode PyQt5 tutorial
2016-10-06 14:15:47 +08:00
In this example, we select a color value
from the QColorDialog and change the background
2016-10-08 01:39:59 +08:00
color of a QFrame widget.
2016-10-06 14:15:47 +08:00
author: Jan Bodnar
2016-10-08 01:39:59 +08:00
website: zetcode.com
2016-10-06 14:15:47 +08:00
last edited: January 2015
"""
import sys
2016-10-08 01:39:59 +08:00
from PyQt5.QtWidgets import (QWidget, QPushButton, QFrame,
2016-10-06 14:15:47 +08:00
QColorDialog, QApplication)
from PyQt5.QtGui import QColor
class Example(QWidget):
2016-10-08 01:39:59 +08:00
2016-10-06 14:15:47 +08:00
def __init__(self):
super().__init__()
2016-10-08 01:39:59 +08:00
2016-10-06 14:15:47 +08:00
self.initUI()
2016-10-08 01:39:59 +08:00
def initUI(self):
col = QColor(0, 0, 0)
2016-10-06 14:15:47 +08:00
self.btn = QPushButton('Dialog', self)
self.btn.move(20, 20)
self.btn.clicked.connect(self.showDialog)
self.frm = QFrame(self)
2016-10-08 01:39:59 +08:00
self.frm.setStyleSheet("QWidget { background-color: %s }"
2016-10-06 14:15:47 +08:00
% col.name())
2016-10-08 01:39:59 +08:00
self.frm.setGeometry(130, 22, 100, 100)
2016-10-06 14:15:47 +08:00
self.setGeometry(300, 300, 250, 180)
self.setWindowTitle('Color dialog')
self.show()
2016-10-08 01:39:59 +08:00
2016-10-06 14:15:47 +08:00
def showDialog(self):
2016-10-08 01:39:59 +08:00
2016-10-06 14:15:47 +08:00
col = QColorDialog.getColor()
if col.isValid():
self.frm.setStyleSheet("QWidget { background-color: %s }"
% col.name())
2016-10-08 01:39:59 +08:00
2016-10-06 14:15:47 +08:00
if __name__ == '__main__':
2016-10-08 01:39:59 +08:00
2016-10-06 14:15:47 +08:00
app = QApplication(sys.argv)
ex = Example()
sys.exit(app.exec_())
2016-10-06 17:07:04 +08:00
```
例子里有一个按钮和一个QFrame默认的背景颜色为黑色我们可以使用`QColorDialog`改变背景颜色。
```
2016-10-08 01:39:59 +08:00
col = QColor(0, 0, 0)
2016-10-06 17:07:04 +08:00
```
初始化`QtGui.QFrame`的背景颜色。
```
2016-10-06 14:15:47 +08:00
col = QColorDialog.getColor()
2016-10-06 17:07:04 +08:00
```
弹出一个`QColorDialog`对话框。
```
2016-10-06 14:15:47 +08:00
if col.isValid():
self.frm.setStyleSheet("QWidget { background-color: %s }"
2016-10-08 01:39:59 +08:00
% col.name())
2016-10-06 17:07:04 +08:00
```
我们可以预览颜色,如果点击取消按钮,没有颜色值返回,如果颜色是我们想要的,就从取色框里选择这个颜色。
2016-10-06 14:15:47 +08:00
2016-10-06 17:09:10 +08:00
程序展示:
todo截图
2016-10-06 14:15:47 +08:00
2016-10-06 17:09:10 +08:00
## QFontDialog
2016-10-06 14:15:47 +08:00
2016-10-06 17:09:10 +08:00
`QFontDialog`能做字体的选择。
```
2016-10-06 14:15:47 +08:00
#!/usr/bin/python3
# -*- coding: utf-8 -*-
"""
2016-10-08 01:39:59 +08:00
ZetCode PyQt5 tutorial
2016-10-06 14:15:47 +08:00
In this example, we select a font name
2016-10-08 01:39:59 +08:00
and change the font of a label.
2016-10-06 14:15:47 +08:00
author: Jan Bodnar
2016-10-08 01:39:59 +08:00
website: zetcode.com
2016-10-06 14:15:47 +08:00
last edited: January 2015
"""
import sys
2016-10-08 01:39:59 +08:00
from PyQt5.QtWidgets import (QWidget, QVBoxLayout, QPushButton,
2016-10-06 14:15:47 +08:00
QSizePolicy, QLabel, QFontDialog, QApplication)
class Example(QWidget):
2016-10-08 01:39:59 +08:00
2016-10-06 14:15:47 +08:00
def __init__(self):
super().__init__()
2016-10-08 01:39:59 +08:00
2016-10-06 14:15:47 +08:00
self.initUI()
2016-10-08 01:39:59 +08:00
def initUI(self):
2016-10-06 14:15:47 +08:00
vbox = QVBoxLayout()
btn = QPushButton('Dialog', self)
btn.setSizePolicy(QSizePolicy.Fixed,
QSizePolicy.Fixed)
2016-10-08 01:39:59 +08:00
2016-10-06 14:15:47 +08:00
btn.move(20, 20)
vbox.addWidget(btn)
btn.clicked.connect(self.showDialog)
2016-10-08 01:39:59 +08:00
2016-10-06 14:15:47 +08:00
self.lbl = QLabel('Knowledge only matters', self)
self.lbl.move(130, 20)
vbox.addWidget(self.lbl)
2016-10-08 01:39:59 +08:00
self.setLayout(vbox)
2016-10-06 14:15:47 +08:00
self.setGeometry(300, 300, 250, 180)
self.setWindowTitle('Font dialog')
self.show()
2016-10-08 01:39:59 +08:00
2016-10-06 14:15:47 +08:00
def showDialog(self):
font, ok = QFontDialog.getFont()
if ok:
self.lbl.setFont(font)
2016-10-08 01:39:59 +08:00
2016-10-06 14:15:47 +08:00
if __name__ == '__main__':
2016-10-08 01:39:59 +08:00
2016-10-06 14:15:47 +08:00
app = QApplication(sys.argv)
ex = Example()
sys.exit(app.exec_())
2016-10-06 17:09:10 +08:00
```
2016-10-07 20:21:03 +08:00
我们创建了一个有一个按钮和一个标签的`QFontDialog`的对话框,我们可以使用这个功能修改字体样式。
```
2016-10-06 14:15:47 +08:00
font, ok = QFontDialog.getFont()
2016-10-07 20:21:03 +08:00
```
弹出一个字体选择对话框。`getFont()`方法返回一个字体名称和状态信息。状态信息有OK和其他两种。
```
2016-10-06 14:15:47 +08:00
if ok:
self.label.setFont(font)
2016-10-07 20:21:03 +08:00
```
如果点击OK标签的字体就会随之更改。
程序展示:
![font dialog](./images/5-fontdialog.png)
2016-10-06 14:15:47 +08:00
2016-10-07 20:21:03 +08:00
## QFileDialog
2016-10-06 14:15:47 +08:00
2016-10-07 20:21:03 +08:00
`QFileDialog`给用户提供文件或者文件夹选择的功能。能打开和保存文件。
```
2016-10-06 14:15:47 +08:00
#!/usr/bin/python3
# -*- coding: utf-8 -*-
"""
2016-10-08 01:39:59 +08:00
ZetCode PyQt5 tutorial
2016-10-06 14:15:47 +08:00
In this example, we select a file with a
QFileDialog and display its contents
in a QTextEdit.
author: Jan Bodnar
2016-10-08 01:39:59 +08:00
website: zetcode.com
2016-10-06 14:15:47 +08:00
last edited: January 2015
"""
import sys
2016-10-08 01:39:59 +08:00
from PyQt5.QtWidgets import (QMainWindow, QTextEdit,
2016-10-06 14:15:47 +08:00
QAction, QFileDialog, QApplication)
from PyQt5.QtGui import QIcon
class Example(QMainWindow):
2016-10-08 01:39:59 +08:00
2016-10-06 14:15:47 +08:00
def __init__(self):
super().__init__()
2016-10-08 01:39:59 +08:00
2016-10-06 14:15:47 +08:00
self.initUI()
2016-10-08 01:39:59 +08:00
def initUI(self):
2016-10-06 14:15:47 +08:00
self.textEdit = QTextEdit()
self.setCentralWidget(self.textEdit)
self.statusBar()
openFile = QAction(QIcon('open.png'), 'Open', self)
openFile.setShortcut('Ctrl+O')
openFile.setStatusTip('Open new File')
openFile.triggered.connect(self.showDialog)
menubar = self.menuBar()
fileMenu = menubar.addMenu('&File')
2016-10-08 01:39:59 +08:00
fileMenu.addAction(openFile)
2016-10-06 14:15:47 +08:00
self.setGeometry(300, 300, 350, 300)
self.setWindowTitle('File dialog')
self.show()
2016-10-08 01:39:59 +08:00
2016-10-06 14:15:47 +08:00
def showDialog(self):
fname = QFileDialog.getOpenFileName(self, 'Open file', '/home')
if fname[0]:
f = open(fname[0], 'r')
with f:
data = f.read()
2016-10-08 01:39:59 +08:00
self.textEdit.setText(data)
2016-10-06 14:15:47 +08:00
if __name__ == '__main__':
2016-10-08 01:39:59 +08:00
2016-10-06 14:15:47 +08:00
app = QApplication(sys.argv)
ex = Example()
sys.exit(app.exec_())
2016-10-07 20:21:03 +08:00
```
2016-10-08 01:39:59 +08:00
本例中有一个菜单栏,一个置中的文本编辑框,一个状态栏。点击菜单栏选项会弹出一个`QtGui.QFileDialog`对话框,在这个对话框里,你能选择文件,然后文件的内容就会显示在文本编辑框里。
2016-10-07 20:21:03 +08:00
```
2016-10-06 14:15:47 +08:00
class Example(QMainWindow):
2016-10-08 01:39:59 +08:00
2016-10-06 14:15:47 +08:00
def __init__(self):
super().__init__()
2016-10-08 01:39:59 +08:00
2016-10-06 14:15:47 +08:00
self.initUI()
2016-10-07 20:21:03 +08:00
```
2016-10-08 01:39:59 +08:00
这里设置了一个文本编辑框,文本编辑框是基于`QMainWindow`组件的。
2016-10-07 20:21:03 +08:00
```
2016-10-06 14:15:47 +08:00
fname = QFileDialog.getOpenFileName(self, 'Open file', '/home')
2016-10-07 20:21:03 +08:00
```
2016-10-08 01:39:59 +08:00
弹出`QFileDialog`窗口。`getOpenFileName()`方法的第一个参数是说明文字,第二个参数是默认打开的文件夹路径。默认情况下显示所有类型的文件。
2016-10-07 20:21:03 +08:00
```
2016-10-06 14:15:47 +08:00
if fname[0]:
f = open(fname[0], 'r')
with f:
data = f.read()
2016-10-07 20:21:03 +08:00
self.textEdit.setText(data)
```
2016-10-08 01:39:59 +08:00
读取选中的文件并显示在文本编辑框内但是打开HTML文件时是渲染后的结果
2016-10-06 14:15:47 +08:00
2016-10-07 20:21:03 +08:00
程序展示:
![file Dialog](./images/5-filedialog.png)