用 PyQt 打造具有專(zhuān)業(yè)外觀的 GUI
快速創(chuàng)建表單：QFormLayout
QFormLayout適合您。此類(lèi)將小部件布置為兩列布局。第一列通常顯示描述預(yù)期輸入的標(biāo)簽，第二列通常包含允許用戶(hù)輸入或編輯數(shù)據(jù)的輸入小部件，例如QLineEdit，QComboBox或QSpinBox。.addRow（）。此方法有多種變量，但是在大多數(shù)情況下，您可以從以下兩種進(jìn)行選擇：-
.addRow（label，field）將新行添加到表單布局的底部。該行應(yīng)包含一個(gè)QLabel對(duì)象（label）和一個(gè)輸入小部件（field)）。 -
.addRow（labelText，field）自動(dòng)創(chuàng)建并添加帶有labelText作為其文本的新QLabel對(duì)象。字段. field包含一個(gè)輸入小部件。
QFormLayout對(duì)象排列小部件的示例應(yīng)用程序：import?sys
from?PyQt5.QtWidgets?import?(
????QApplication,
????QFormLayout,
????QLabel,
????QLineEdit,
????QWidget,
)
class?Window(QWidget):
????def?__init__(self):
????????super().__init__()
????????self.setWindowTitle("QFormLayout?Example")
????????self.resize(270,?110)
????????#?Create?a?QHBoxLayout?instance
????????layout?=?QFormLayout()
????????#?Add?widgets?to?the?layout
????????layout.addRow("Name:",?QLineEdit())
????????layout.addRow("Job:",?QLineEdit())
????????emailLabel?=?QLabel("Email:")
????????layout.addRow(emailLabel,?QLineEdit())
????????#?Set?the?layout?on?the?application's?window
????????self.setLayout(layout)
if?__name__?==?"__main__":
????app?=?QApplication(sys.argv)
????window?=?Window()
????window.show()
????sys.exit(app.exec_())
QFormLayout對(duì)象。然后，在第19至22行上，向布局中添加一些行。請(qǐng)注意，在第19行和第20行，您使用方法的第二個(gè)變量，在第22行，您使用第一個(gè)變量，將QLabel對(duì)象作為第一個(gè)參數(shù)傳遞給.addRow（）。QFormLayout，可以以?xún)闪械姆绞浇M織小部件。第一列包含標(biāo)簽，要求用戶(hù)提供一些信息。第二列顯示允許用戶(hù)輸入或編輯該信息的小部件。.addLayout（）。這樣，內(nèi)部布局成為外部布局的子級(jí)。import?sys
from?PyQt5.QtWidgets?import?(
????QApplication,
????QCheckBox,
????QFormLayout,
????QLineEdit,
????QVBoxLayout,
????QWidget,
)
class?Window(QWidget):
????def?__init__(self):
????????super().__init__()
????????self.setWindowTitle("Nested?Layouts?Example")
????????#?Create?an?outer?layout
????????outerLayout?=?QVBoxLayout()
????????#?Create?a?form?layout?for?the?label?and?line?edit
????????topLayout?=?QFormLayout()
????????#?Add?a?label?and?a?line?edit?to?the?form?layout
????????topLayout.addRow("Some?Text:",?QLineEdit())
????????#?Create?a?layout?for?the?checkboxes
????????optionsLayout?=?QVBoxLayout()
????????#?Add?some?checkboxes?to?the?layout
????????optionsLayout.addWidget(QCheckBox("Option?one"))
????????optionsLayout.addWidget(QCheckBox("Option?two"))
????????optionsLayout.addWidget(QCheckBox("Option?three"))
????????#?Nest?the?inner?layouts?into?the?outer?layout
????????outerLayout.addLayout(topLayout)
????????outerLayout.addLayout(optionsLayout)
????????#?Set?the?window's?main?layout
????????self.setLayout(outerLayout)
if?__name__?==?"__main__":
????app?=?QApplication(sys.argv)
????window?=?Window()
????window.show()
????sys.exit(app.exec_())
-
在第17行，您將創(chuàng)建外部或頂層布局，將其用作父布局和窗口的主布局。在這種情況下，使用 QVBoxLayout是因?yàn)槟Ｍ麑⑿〔考怪迸帕性诖绑w上。在您的模型中，這是藍(lán)色布局。 -
在第19行，您創(chuàng)建一個(gè)表單布局來(lái)保存標(biāo)簽和行編輯。 -
在第21行，將所需的小部件添加到布局中。這等效于您的綠色布局。 -
在第23行，您將創(chuàng)建一個(gè)垂直布局來(lái)容納復(fù)選框。 -
在第25至27行上，添加所需的復(fù)選框。這是您的紅色布局。 -
在第29和30行上，將 topLayout和optionsLayout嵌套在outsideLayout下。
.addWidget（）。這會(huì)將每個(gè)小部件添加到布局內(nèi)部小部件列表的末尾。您還可以分別使用.insertWidget（index）或.removeWidget（widget）在小部件列表中的給定位置插入或刪除小部件。.count（）。.setCurrentIndex（）。import?sys
from?PyQt5.QtWidgets?import?(
????QApplication,
????QComboBox,
????QFormLayout,
????QLineEdit,
????QStackedLayout,
????QVBoxLayout,
????QWidget,
)
class?Window(QWidget):
????def?__init__(self):
????????super().__init__()
????????self.setWindowTitle("QStackedLayout?Example")
????????#?Create?a?top-level?layout
????????layout?=?QVBoxLayout()
????????self.setLayout(layout)
????????#?Create?and?connect?the?combo?box?to?switch?between?pages
????????self.pageCombo?=?QComboBox()
????????self.pageCombo.addItems(["Page?1",?"Page?2"])
????????self.pageCombo.activated.connect(self.switchPage)
????????#?Create?the?stacked?layout
????????self.stackedLayout?=?QStackedLayout()
????????#?Create?the?first?page
????????self.page1?=?QWidget()
????????self.page1Layout?=?QFormLayout()
????????self.page1Layout.addRow("Name:",?QLineEdit())
????????self.page1Layout.addRow("Address:",?QLineEdit())
????????self.page1.setLayout(self.page1Layout)
????????self.stackedLayout.addWidget(self.page1)
????????#?Create?the?second?page
????????self.page2?=?QWidget()
????????self.page2Layout?=?QFormLayout()
????????self.page2Layout.addRow("Job:",?QLineEdit())
????????self.page2Layout.addRow("Department:",?QLineEdit())
????????self.page2.setLayout(self.page2Layout)
????????self.stackedLayout.addWidget(self.page2)
????????#?Add?the?combo?box?and?the?stacked?layout?to?the?top-level?layout
????????layout.addWidget(self.pageCombo)
????????layout.addLayout(self.stackedLayout)
????def?switchPage(self):
????????self.stackedLayout.setCurrentIndex(self.pageCombo.currentIndex())
if?__name__?==?"__main__":
????app?=?QApplication(sys.argv)
????window?=?Window()
????window.show()
????sys.exit(app.exec_())
QComboBox對(duì)象，該對(duì)象將允許您在布局中的頁(yè)面之間進(jìn)行切換。然后，在列表的組合框中添加兩個(gè)選項(xiàng)，并將其連接到旨在處理頁(yè)面切換的.switchPage（）。.switchPage（）內(nèi)部，您在布局對(duì)象上調(diào)用.setCurrentIndex（），將組合框的當(dāng)前索引作為參數(shù)傳遞。這樣，當(dāng)用戶(hù)更改組合框中的選項(xiàng)時(shí)，堆疊版式上的頁(yè)面將相應(yīng)地更改。QStackedLayout對(duì)象。在第27至32行上，將第一頁(yè)添加到布局中，在第34至39行上，將第二頁(yè)添加到布局中。每個(gè)頁(yè)面都由一個(gè)QWidget對(duì)象表示，該對(duì)象以方便的布局包含多個(gè)小部件。QWidget對(duì)象表示。當(dāng)您在窗口頂部的組合框中選擇一個(gè)新頁(yè)面時(shí)，布局將更改以顯示所選頁(yè)面。QTabWidget創(chuàng)建多頁(yè)用戶(hù)界面。您將在下一節(jié)中學(xué)習(xí)如何操作。QTabWidget的類(lèi)。此類(lèi)提供標(biāo)簽欄和頁(yè)面區(qū)域。您可以使用選項(xiàng)卡欄在頁(yè)面之間切換，并使用頁(yè)面區(qū)域顯示與所選選項(xiàng)卡關(guān)聯(lián)的頁(yè)面。.setTabPosition（）和四個(gè)可能的選項(xiàng)卡位置之一來(lái)更改此行為：.addTab（）。此方法有兩個(gè)變量或重載的實(shí)現(xiàn)：.addTab(page, label).addTab(page, icon, label)label為標(biāo)簽標(biāo)題。. page必須是一個(gè)小部件，代表與手邊的選項(xiàng)卡關(guān)聯(lián)的頁(yè)面。QIcon對(duì)象。如果您將圖標(biāo)傳遞給.addTab（），則該圖標(biāo)將顯示在標(biāo)簽標(biāo)題的左側(cè)。QWidget對(duì)象。這樣，您就可以使用包含所需窗口小部件的布局向頁(yè)面添加額外的窗口小部件。QTabWidget對(duì)象的基礎(chǔ)知識(shí)：import?sys
from?PyQt5.QtWidgets?import?(
????QApplication,
????QCheckBox,
????QTabWidget,
????QVBoxLayout,
????QWidget,
)
class?Window(QWidget):
????def?__init__(self):
????????super().__init__()
????????self.setWindowTitle("QTabWidget?Example")
????????self.resize(270,?110)
????????#?Create?a?top-level?layout
????????layout?=?QVBoxLayout()
????????self.setLayout(layout)
????????#?Create?the?tab?widget?with?two?tabs
????????tabs?=?QTabWidget()
????????tabs.addTab(self.generalTabUI(),?"General")
????????tabs.addTab(self.networkTabUI(),?"Network")
????????layout.addWidget(tabs)
????def?generalTabUI(self):
????????"""Create?the?General?page?UI."""
????????generalTab?=?QWidget()
????????layout?=?QVBoxLayout()
????????layout.addWidget(QCheckBox("General?Option?1"))
????????layout.addWidget(QCheckBox("General?Option?2"))
????????generalTab.setLayout(layout)
????????return?generalTab
????def?networkTabUI(self):
????????"""Create?the?Network?page?UI."""
????????networkTab?=?QWidget()
????????layout?=?QVBoxLayout()
????????layout.addWidget(QCheckBox("Network?Option?1"))
????????layout.addWidget(QCheckBox("Network?Option?2"))
????????networkTab.setLayout(layout)
????????return?networkTab
if?__name__?==?"__main__":
????app?=?QApplication(sys.argv)
????window?=?Window()
????window.show()
????sys.exit(app.exec_())
QTabWidget對(duì)象。然后，使用.addTab（）將兩個(gè)選項(xiàng)卡添加到選項(xiàng)卡小部件。.generalTabUI（）和networkTabUI（）中，為每個(gè)選項(xiàng)卡創(chuàng)建特定的GUI。為此，您可以使用QWidget對(duì)象，QVBoxLayout對(duì)象和一些復(fù)選框來(lái)保存選項(xiàng)。