使用佈局管理來調整控制元件

通過前面的學習，我們掌握了一些基本的GUI控制元件，比如QLabel, QPushButton, QCheckBox, QRadioButton, QLineEdit, QTextEdit等，也學習了PyQt的四種佈局管理,了解如何使用Qt Designer來實現視覺化佈局，在本文中，我們將綜合運用這些知識，使用Qt Designer，綜合運用各種佈局管理來來實現一個簡單的個人資訊登記介面。

假設我們已經用Qt Desingner拖曳一些控制元件到介面上，並進行了相應的命名，和大致的位置擺放, 如圖所示:

我們的最終目標視窗的擺放位置如圖二所示：

操作步驟簡述：

按住CTRL鍵，點選滑鼠左鍵，選中名字為"男"和"女"的兩個QRadioButton,鬆開CTRL鍵，點選工具欄上的水平佈局，將"男"和"女"QRadioButton置於一水平佈局下；同樣操作方式將"音樂"，"體育"和"旅遊"三個QCheckBox置於一水平佈局下；同樣操作方式將"儲存"和"取消"兩個QPushBotton置於一水平佈局下；調整佈局，標籤"暱稱"和物件名稱為leNickname的QLineEdit佈局大致放一水平線, 其他四種情況類似操作，大致那QFormGrid佈局管理後的介面佈置；按下滑鼠左鍵，從左上角向右下角拉動，選中所有佈局到QFormLayoutGrid中的控制元件，然後點選工具條上的Form佈局按鈕，完成對選中控制元件的Form佈局；調整Form佈局中label域和field域間隔，選中Form佈局,在右邊的屬性編輯欄中，將其layoutHorizontalSpacing的間隔調整為20；在Form佈局和"儲存"/"退出"按鈕所在的水平佈局之間新增一垂直Spacer（“彈簧”）；在右邊的物件列表欄，選中centrawidget,點選點選工具欄上的垂直佈局，將主視窗的佈局設定為垂直佈局。

按CTRL+R預覽佈局，看看是否達到預設目標，如果有偏差，可進行調整。操作過程如圖3動態顯示。

測試

將ui檔案儲存為demo3.ui,並將其轉換成Python程式碼檔案為 Ui_demo3.py. 建立檔案qtdesignerdemo3.py 在其中建立類 DesignerDemo3，並在其中匯入Ui_demo3的Ui_MainWindow，並作為主視窗顯示，qtdesignerdemo3.py完整程式碼如下：

import sysfrom PyQt5.QtWidgets import QApplication, QMainWindow, QMessageBoxfrom Ui_demo3 import Ui_MainWindow class DesignerDemo3(QMainWindow):    def __init__(self, parent=None):        super(DesignerDemo3, self).__init__(parent)        ui = Ui_MainWindow()        ui.setupUi(self) if __name__ == '__main__':    app = QApplication(sys.argv)    window = DesignerDemo3()    window.show()    sys.exit(app.exec())

執行結果如下圖：

本文知識點在Qt Designer中多種方式選中多個控制元件；佈局巢狀；建立物件的方式使用UI生成的python物件。

喜歡本文內容就收藏，點贊，評論，關注和轉發。