pyqt5——控件1

控件1

控件就像是應用這座房子的一塊塊磚。PyQt5有不少的控件，好比按鈕，單選框，滑動條，複選框等等。在本章，咱們將介紹一些頗有用的控件：QCheckBox，ToggleButton，QSlider，QProgressBar和QCalendarWidget。

QCheckBox

QCheckBox組件有倆狀態：開和關。一般跟標籤一塊兒使用，用在激活和關閉一些選項的場景。

#!/usr/bin/python3
# -*- coding: utf-8 -*-

"""
ZetCode PyQt5 tutorial 
歡迎加入羣`923 414 804`與我一塊兒學習
In this example, a QCheckBox widget
is used to toggle the title of a window.

Author: Jan Bodnar
Website: zetcode.com 
Last edited: August 2017
"""

from PyQt5.QtWidgets import QWidget, QCheckBox, QApplication
from PyQt5.QtCore import Qt
import sys

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()方法控制的，若是空間被選中，咱們就給窗口添加一個標題，若是沒被選中，就清空標題。

程序展現：

切換按鈕

切換按鈕就是QPushButton的一種特殊模式。 它只有兩種狀態：按下和未按下。咱們再點擊的時候切換兩種狀態，有不少場景會使用到這個功能。

#!/usr/bin/python3
# -*- coding: utf-8 -*-

"""
ZetCode PyQt5 tutorial 

In this example, we create three toggle buttons.
They will control the background color of a 
QFrame. 

Author: Jan Bodnar
Website: zetcode.com 
Last edited: August 2017
"""

from PyQt5.QtWidgets import (QWidget, QPushButton, 
    QFrame, QApplication)
from PyQt5.QtGui import QColor
import sys

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)

        greenb = QPushButton('Green', self)
        greenb.setCheckable(True)
        greenb.move(10, 60)

        greenb.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)

設置顏色爲黑色。

redb = QPushButton('Red', self)
redb.setCheckable(True)
redb.move(10, 10)

建立一個QPushButton，而後調用它的setCheckable()的方法就把這個按鈕編程了切換按鈕。

redb.clicked[bool].connect(self.setColor)

把點擊信號和咱們定義好的函數關聯起來，這裏是把點擊事件轉換成布爾值。

source = self.sender()

獲取被點擊的按鈕。

if source.text() == "Red":
    self.col.setRed(val)

若是是標籤爲「red」的按鈕被點擊，就把顏色更改成預設好的對應顏色。

self.square.setStyleSheet("QFrame { background-color: %s }" %
    self.col.name())

使用樣式表（就是CSS的SS）改變背景色

程序展現：

滑塊

QSlider是個有一個小滑塊的組件，這個小滑塊能拖着先後滑動，這個常常用於修改一些具備範圍的數值，比文本框或者點擊增長減小的文本框（spin box）方便多了。

本例用一個滑塊和一個標籤展現。標籤爲一個圖片，滑塊控制標籤（的值）。

先弄個叫mute.png的靜音圖標準備着。

#!/usr/bin/python3
# -*- coding: utf-8 -*-

"""
ZetCode PyQt5 tutorial 

This example shows a QSlider widget.

Author: Jan Bodnar
Website: zetcode.com 
Last edited: August 2017
"""

from PyQt5.QtWidgets import (QWidget, QSlider, 
    QLabel, QApplication)
from PyQt5.QtCore import Qt
from PyQt5.QtGui import QPixmap
import sys

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_())

這裏是模擬的音量控制器。拖動滑塊，能改變標籤位置的圖片。

sld = QSlider(Qt.Horizontal, self)

建立一個水平的QSlider。

self.label = QLabel(self)
self.label.setPixmap(QPixmap('mute.png'))

建立一個QLabel組件並給它設置一個靜音圖標。

sld.valueChanged[int].connect(self.changeValue)

把valueChanged信號跟changeValue()方法關聯起來。

if value == 0:
    self.label.setPixmap(QPixmap('mute.png'))
...

根據音量值的大小更換標籤位置的圖片。這段代碼是：若是音量爲0，就把圖片換成 mute.png。

程序展現：

進度條

進度條是用來展現任務進度的（我也不想這樣說話）。它的滾動能讓用戶瞭解到任務的進度。QProgressBar組件提供了水平和垂直兩種進度條，進度條能夠設置最大值和最小值，默認狀況是0~99。

#!/usr/bin/python3
# -*- coding: utf-8 -*-

"""
ZetCode PyQt5 tutorial 

This example shows a QProgressBar widget.

Author: Jan Bodnar
Website: zetcode.com 
Last edited: August 2017
"""

from PyQt5.QtWidgets import (QWidget, QProgressBar, 
    QPushButton, QApplication)
from PyQt5.QtCore import QBasicTimer
import sys

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_())

咱們建立了一個水平的進度條和一個按鈕，這個按鈕控制進度條的開始和中止。

self.pbar = QProgressBar(self)

新建一個QProgressBar構造器。

self.timer = QtCore.QBasicTimer()

用時間控制進度條。

self.timer.start(100, self)

調用start()方法加載一個時間事件。這個方法有兩個參數：過時時間和事件接收者。

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)

每一個QObject和又它繼承而來的對象都有一個timerEvent()事件處理函數。爲了觸發事件，咱們重載了這個方法。

def doAction(self):
  
    if self.timer.isActive():
        self.timer.stop()
        self.btn.setText('Start')
        
    else:
        self.timer.start(100, self)
        self.btn.setText('Stop')

裏面的doAction()方法是用來控制開始和中止的。

程序展現：

日曆

QCalendarWidget提供了基於月份的日曆插件，十分簡易並且直觀。

#!/usr/bin/python3
# -*- coding: utf-8 -*-

"""
ZetCode PyQt5 tutorial 

This example shows a QCalendarWidget widget.

Author: Jan Bodnar
Website: zetcode.com 
Last edited: August 2017
"""

from PyQt5.QtWidgets import (QWidget, QCalendarWidget, 
    QLabel, QApplication, QVBoxLayout)
from PyQt5.QtCore import QDate
import sys

class Example(QWidget):
    
    def __init__(self):
        super().__init__()
        
        self.initUI()
        
        
    def initUI(self):      
        
        vbox = QVBoxLayout(self)

        cal = QCalendarWidget(self)
        cal.setGridVisible(True)
        cal.clicked[QDate].connect(self.showDate)
        
        vbox.addWidget(cal)
        
        self.lbl = QLabel(self)
        date = cal.selectedDate()
        self.lbl.setText(date.toString())
        
        vbox.addWidget(self.lbl)
        
        self.setLayout(vbox)
        
        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_())

這個例子有日期組件和標籤組件組成，標籤顯示被選中的日期。

cal = QCalendarWidget(self)

建立一個QCalendarWidget。

cal.clicked[QDate].connect(self.showDate)

選擇一個日期時，QDate的點擊信號就觸發了，把這個信號和咱們本身定義的showDate()方法關聯起來。

def showDate(self, date):     
    
    self.lbl.setText(date.toString())

使用selectedDate()方法獲取選中的日期，而後把日期對象轉成字符串，在標籤裏面顯示出來。

程序展現：