mirror of
https://github.com/maicss/PyQt5-Chinese-tutorial.git
synced 2025-01-24 21:12:54 +08:00
Update 控件1.md
This commit is contained in:
parent
512c25a90c
commit
a0e4b97a3e
476
控件1.md
476
控件1.md
@ -1,2 +1,478 @@
|
||||
# 控件1
|
||||
|
||||
控件就像是应用这座房子的一块块砖。PyQt5有很多的控件,比如按钮,单选框,滑动条,复选框等等。在本章,我们将介绍一些很有用的控件:`QCheckBox`,`ToggleButton`,`QSlider`,`QProgressBar`和`QCalendarWidget`。
|
||||
|
||||
## QCheckBox
|
||||
|
||||
`QCheckBox`组件有俩状态:开和关。通常跟标签一起使用,用在激活和关闭一些选项的场景。
|
||||
```
|
||||
#!/usr/bin/python3
|
||||
# -*- coding: utf-8 -*-
|
||||
|
||||
"""
|
||||
ZetCode PyQt5 tutorial
|
||||
|
||||
In this example, a QCheckBox widget
|
||||
is used to toggle the title of a window.
|
||||
|
||||
author: Jan Bodnar
|
||||
website: zetcode.com
|
||||
last edited: January 2015
|
||||
"""
|
||||
|
||||
import sys
|
||||
from PyQt5.QtWidgets import QWidget, QCheckBox, QApplication
|
||||
from PyQt5.QtCore import Qt
|
||||
|
||||
|
||||
class Example(QWidget):
|
||||
|
||||
def __init__(self):
|
||||
super().__init__()
|
||||
|
||||
self.initUI()
|
||||
|
||||
|
||||
def initUI(self):
|
||||
|
||||
cb = QCheckBox('Show title', self)
|
||||
cb.move(20, 20)
|
||||
cb.toggle()
|
||||
cb.stateChanged.connect(self.changeTitle)
|
||||
|
||||
self.setGeometry(300, 300, 250, 150)
|
||||
self.setWindowTitle('QCheckBox')
|
||||
self.show()
|
||||
|
||||
|
||||
def changeTitle(self, state):
|
||||
|
||||
if state == Qt.Checked:
|
||||
self.setWindowTitle('QCheckBox')
|
||||
else:
|
||||
self.setWindowTitle('')
|
||||
|
||||
|
||||
if __name__ == '__main__':
|
||||
|
||||
app = QApplication(sys.argv)
|
||||
ex = Example()
|
||||
sys.exit(app.exec_())
|
||||
```
|
||||
这个例子中,有一个能切换窗口标题的单选框。
|
||||
```
|
||||
cb = QCheckBox('Show title', self)
|
||||
```
|
||||
这个是`QCheckBox`的构造器。
|
||||
```
|
||||
cb.toggle()
|
||||
```
|
||||
要设置窗口标题,我们就要检查单选框的状态。默认情况下,窗口没有标题,单选框未选中。
|
||||
```
|
||||
cb.stateChanged.connect(self.changeTitle)
|
||||
```
|
||||
把`changeTitle()`方法和`stateChanged`信号关联起来。这样,`changeTitle()`就能切换窗口标题了。
|
||||
```
|
||||
def changeTitle(self, state):
|
||||
|
||||
if state == Qt.Checked:
|
||||
self.setWindowTitle('QCheckBox')
|
||||
else:
|
||||
self.setWindowTitle('')
|
||||
```
|
||||
控件的状态是由`changeTitle()`方法控制的,如果空间被选中,我们就给窗口添加一个标题,如果没被选中,就清空标题。
|
||||
|
||||
程序展示:
|
||||
|
||||
![QCheckBox](./images/6-qcheckbox.png)
|
||||
|
||||
|
||||
## 切换按钮
|
||||
|
||||
切换按钮就是`QPushButton`的一种特殊模式。 它只有两种状态:按下和未按下。我们再点击的时候切换两种状态,有很多场景会使用到这个功能。
|
||||
```
|
||||
#!/usr/bin/python3
|
||||
# -*- coding: utf-8 -*-
|
||||
|
||||
"""
|
||||
ZetCode PyQt5 tutorial
|
||||
|
||||
In this example, we create three toggle buttons.
|
||||
They will control the background colour of a
|
||||
QFrame.
|
||||
|
||||
author: Jan Bodnar
|
||||
website: zetcode.com
|
||||
last edited: January 2015
|
||||
"""
|
||||
|
||||
import sys
|
||||
from PyQt5.QtWidgets import (QWidget, QPushButton,
|
||||
QFrame, QApplication)
|
||||
from PyQt5.QtGui import QColor
|
||||
|
||||
|
||||
class Example(QWidget):
|
||||
|
||||
def __init__(self):
|
||||
super().__init__()
|
||||
|
||||
self.initUI()
|
||||
|
||||
|
||||
def initUI(self):
|
||||
|
||||
self.col = QColor(0, 0, 0)
|
||||
|
||||
redb = QPushButton('Red', self)
|
||||
redb.setCheckable(True)
|
||||
redb.move(10, 10)
|
||||
|
||||
redb.clicked[bool].connect(self.setColor)
|
||||
|
||||
redb = QPushButton('Green', self)
|
||||
redb.setCheckable(True)
|
||||
redb.move(10, 60)
|
||||
|
||||
redb.clicked[bool].connect(self.setColor)
|
||||
|
||||
blueb = QPushButton('Blue', self)
|
||||
blueb.setCheckable(True)
|
||||
blueb.move(10, 110)
|
||||
|
||||
blueb.clicked[bool].connect(self.setColor)
|
||||
|
||||
self.square = QFrame(self)
|
||||
self.square.setGeometry(150, 20, 100, 100)
|
||||
self.square.setStyleSheet("QWidget { background-color: %s }" %
|
||||
self.col.name())
|
||||
|
||||
self.setGeometry(300, 300, 280, 170)
|
||||
self.setWindowTitle('Toggle button')
|
||||
self.show()
|
||||
|
||||
|
||||
def setColor(self, pressed):
|
||||
|
||||
source = self.sender()
|
||||
|
||||
if pressed:
|
||||
val = 255
|
||||
else: val = 0
|
||||
|
||||
if source.text() == "Red":
|
||||
self.col.setRed(val)
|
||||
elif source.text() == "Green":
|
||||
self.col.setGreen(val)
|
||||
else:
|
||||
self.col.setBlue(val)
|
||||
|
||||
self.square.setStyleSheet("QFrame { background-color: %s }" %
|
||||
self.col.name())
|
||||
|
||||
|
||||
if __name__ == '__main__':
|
||||
|
||||
app = QApplication(sys.argv)
|
||||
ex = Example()
|
||||
sys.exit(app.exec_())
|
||||
```
|
||||
我们创建了一个切换按钮和一个`QWidget`,并把`QWidget`的背景设置为黑色。点击不同的切换按钮,背景色会在红、绿、蓝之间切换。
|
||||
```
|
||||
self.col = QColor(0, 0, 0)
|
||||
```
|
||||
This is the initial, black colour value.
|
||||
```
|
||||
redb = QPushButton('Red', self)
|
||||
redb.setCheckable(True)
|
||||
redb.move(10, 10)
|
||||
```
|
||||
To create a toggle button, we create a QPushButton and make it checkable by calling the setCheckable() method.
|
||||
```
|
||||
redb.clicked[bool].connect(self.setColor)
|
||||
```
|
||||
We connect a clicked signal to our user defined method. We use the clicked signal that operates with a Boolean value.
|
||||
```
|
||||
source = self.sender()
|
||||
```
|
||||
We get the button which was toggled.
|
||||
```
|
||||
if source.text() == "Red":
|
||||
self.col.setRed(val)
|
||||
```
|
||||
In case it is a red button, we update the red part of the colour accordingly.
|
||||
```
|
||||
self.square.setStyleSheet("QFrame { background-color: %s }" %
|
||||
self.col.name())
|
||||
```
|
||||
We use style sheets to change the background colour.
|
||||
|
||||
Toggle button
|
||||
Figure: Toggle button
|
||||
|
||||
## QSlider
|
||||
|
||||
A QSlider is a widget that has a simple handle. This handle can be pulled back and forth. This way we are choosing a value for a specific task. Sometimes using a slider is more natural than entering a number or using a spin box.
|
||||
|
||||
In our example we will show one slider and one label. The label will display an image. The slider will control the label.
|
||||
|
||||
#!/usr/bin/python3
|
||||
# -*- coding: utf-8 -*-
|
||||
|
||||
"""
|
||||
ZetCode PyQt5 tutorial
|
||||
|
||||
This example shows a QSlider widget.
|
||||
|
||||
author: Jan Bodnar
|
||||
website: zetcode.com
|
||||
last edited: January 2015
|
||||
"""
|
||||
|
||||
import sys
|
||||
from PyQt5.QtWidgets import (QWidget, QSlider,
|
||||
QLabel, QApplication)
|
||||
from PyQt5.QtCore import Qt
|
||||
from PyQt5.QtGui import QPixmap
|
||||
|
||||
|
||||
class Example(QWidget):
|
||||
|
||||
def __init__(self):
|
||||
super().__init__()
|
||||
|
||||
self.initUI()
|
||||
|
||||
|
||||
def initUI(self):
|
||||
|
||||
sld = QSlider(Qt.Horizontal, self)
|
||||
sld.setFocusPolicy(Qt.NoFocus)
|
||||
sld.setGeometry(30, 40, 100, 30)
|
||||
sld.valueChanged[int].connect(self.changeValue)
|
||||
|
||||
self.label = QLabel(self)
|
||||
self.label.setPixmap(QPixmap('mute.png'))
|
||||
self.label.setGeometry(160, 40, 80, 30)
|
||||
|
||||
self.setGeometry(300, 300, 280, 170)
|
||||
self.setWindowTitle('QSlider')
|
||||
self.show()
|
||||
|
||||
|
||||
def changeValue(self, value):
|
||||
|
||||
if value == 0:
|
||||
self.label.setPixmap(QPixmap('mute.png'))
|
||||
elif value > 0 and value <= 30:
|
||||
self.label.setPixmap(QPixmap('min.png'))
|
||||
elif value > 30 and value < 80:
|
||||
self.label.setPixmap(QPixmap('med.png'))
|
||||
else:
|
||||
self.label.setPixmap(QPixmap('max.png'))
|
||||
|
||||
|
||||
if __name__ == '__main__':
|
||||
|
||||
app = QApplication(sys.argv)
|
||||
ex = Example()
|
||||
sys.exit(app.exec_())
|
||||
In our example we simulate a volume control. By dragging the handle of a slider, we change an image on the label.
|
||||
|
||||
sld = QSlider(Qt.Horizontal, self)
|
||||
Here we create a horizontal QSlider.
|
||||
|
||||
self.label = QLabel(self)
|
||||
self.label.setPixmap(QPixmap('mute.png'))
|
||||
We create a QLabel widget and set an initial mute image to it.
|
||||
|
||||
sld.valueChanged[int].connect(self.changeValue)
|
||||
We connect the valueChanged signal to the user defined changeValue() method.
|
||||
|
||||
if value == 0:
|
||||
self.label.setPixmap(QPixmap('mute.png'))
|
||||
...
|
||||
Based on the value of the slider, we set an image to the label. In the above code, we set the mute.png image to the label if the slider is equal to zero.
|
||||
|
||||
QSlider widget
|
||||
Figure: QSlider widget
|
||||
QProgressBar
|
||||
|
||||
A progress bar is a widget that is used when we process lengthy tasks. It is animated so that the user knows that the task is progressing. The QProgressBar widget provides a horizontal or a vertical progress bar in PyQt5 toolkit. The programmer can set the minimum and maximum value for the progress bar. The default values are 0 and 99.
|
||||
|
||||
#!/usr/bin/python3
|
||||
# -*- coding: utf-8 -*-
|
||||
|
||||
"""
|
||||
ZetCode PyQt5 tutorial
|
||||
|
||||
This example shows a QProgressBar widget.
|
||||
|
||||
author: Jan Bodnar
|
||||
website: zetcode.com
|
||||
last edited: January 2015
|
||||
"""
|
||||
|
||||
import sys
|
||||
from PyQt5.QtWidgets import (QWidget, QProgressBar,
|
||||
QPushButton, QApplication)
|
||||
from PyQt5.QtCore import QBasicTimer
|
||||
|
||||
|
||||
class Example(QWidget):
|
||||
|
||||
def __init__(self):
|
||||
super().__init__()
|
||||
|
||||
self.initUI()
|
||||
|
||||
|
||||
def initUI(self):
|
||||
|
||||
self.pbar = QProgressBar(self)
|
||||
self.pbar.setGeometry(30, 40, 200, 25)
|
||||
|
||||
self.btn = QPushButton('Start', self)
|
||||
self.btn.move(40, 80)
|
||||
self.btn.clicked.connect(self.doAction)
|
||||
|
||||
self.timer = QBasicTimer()
|
||||
self.step = 0
|
||||
|
||||
self.setGeometry(300, 300, 280, 170)
|
||||
self.setWindowTitle('QProgressBar')
|
||||
self.show()
|
||||
|
||||
|
||||
def timerEvent(self, e):
|
||||
|
||||
if self.step >= 100:
|
||||
self.timer.stop()
|
||||
self.btn.setText('Finished')
|
||||
return
|
||||
|
||||
self.step = self.step + 1
|
||||
self.pbar.setValue(self.step)
|
||||
|
||||
|
||||
def doAction(self):
|
||||
|
||||
if self.timer.isActive():
|
||||
self.timer.stop()
|
||||
self.btn.setText('Start')
|
||||
else:
|
||||
self.timer.start(100, self)
|
||||
self.btn.setText('Stop')
|
||||
|
||||
|
||||
if __name__ == '__main__':
|
||||
|
||||
app = QApplication(sys.argv)
|
||||
ex = Example()
|
||||
sys.exit(app.exec_())
|
||||
In our example we have a horizontal progress bar and a push button. The push button starts and stops the progress bar.
|
||||
|
||||
self.pbar = QProgressBar(self)
|
||||
This is a QProgressBar constructor.
|
||||
|
||||
self.timer = QtCore.QBasicTimer()
|
||||
To activate the progress bar, we use a timer object.
|
||||
|
||||
self.timer.start(100, self)
|
||||
To launch a timer event, we call its start() method. This method has two parameters: the timeout and the object which will receive the events.
|
||||
|
||||
def timerEvent(self, e):
|
||||
|
||||
if self.step >= 100:
|
||||
|
||||
self.timer.stop()
|
||||
self.btn.setText('Finished')
|
||||
return
|
||||
|
||||
self.step = self.step + 1
|
||||
self.pbar.setValue(self.step)
|
||||
Each QObject and its descendants have a timerEvent() event handler. In order to react to timer events, we reimplement the event handler.
|
||||
|
||||
def doAction(self):
|
||||
|
||||
if self.timer.isActive():
|
||||
self.timer.stop()
|
||||
self.btn.setText('Start')
|
||||
|
||||
else:
|
||||
self.timer.start(100, self)
|
||||
self.btn.setText('Stop')
|
||||
Inside the doAction() method, we start and stop the timer.
|
||||
|
||||
QProgressBar
|
||||
Figure: QProgressBar
|
||||
QCalendarWidget
|
||||
|
||||
A QCalendarWidget provides a monthly based calendar widget. It allows a user to select a date in a simple and intuitive way.
|
||||
|
||||
#!/usr/bin/python3
|
||||
# -*- coding: utf-8 -*-
|
||||
|
||||
"""
|
||||
ZetCode PyQt5 tutorial
|
||||
|
||||
This example shows a QCalendarWidget widget.
|
||||
|
||||
author: Jan Bodnar
|
||||
website: zetcode.com
|
||||
last edited: January 2015
|
||||
"""
|
||||
|
||||
import sys
|
||||
from PyQt5.QtWidgets import (QWidget, QCalendarWidget,
|
||||
QLabel, QApplication)
|
||||
from PyQt5.QtCore import QDate
|
||||
|
||||
|
||||
class Example(QWidget):
|
||||
|
||||
def __init__(self):
|
||||
super().__init__()
|
||||
|
||||
self.initUI()
|
||||
|
||||
|
||||
def initUI(self):
|
||||
|
||||
cal = QCalendarWidget(self)
|
||||
cal.setGridVisible(True)
|
||||
cal.move(20, 20)
|
||||
cal.clicked[QDate].connect(self.showDate)
|
||||
|
||||
self.lbl = QLabel(self)
|
||||
date = cal.selectedDate()
|
||||
self.lbl.setText(date.toString())
|
||||
self.lbl.move(130, 260)
|
||||
|
||||
self.setGeometry(300, 300, 350, 300)
|
||||
self.setWindowTitle('Calendar')
|
||||
self.show()
|
||||
|
||||
|
||||
def showDate(self, date):
|
||||
|
||||
self.lbl.setText(date.toString())
|
||||
|
||||
|
||||
if __name__ == '__main__':
|
||||
|
||||
app = QApplication(sys.argv)
|
||||
ex = Example()
|
||||
sys.exit(app.exec_())
|
||||
The example has a calendar widget and a label widget. The currently selected date is displayed in the label widget.
|
||||
|
||||
cal = QCalendarWidget(self)
|
||||
The QCalendarWidget is created.
|
||||
|
||||
cal.clicked[QDate].connect(self.showDate)
|
||||
If we select a date from the widget, a clicked[QDate] signal is emitted. We connect this signal to the user defined showDate() method.
|
||||
|
||||
def showDate(self, date):
|
||||
|
||||
self.lbl.setText(date.toString())
|
||||
We retrieve the selected date by calling the selectedDate() method. Then we transform the date object into string and set it to the label widget.
|
Loading…
x
Reference in New Issue
Block a user