使用QT Designer建立QT視窗操作面簡介

QT是一個跨平台的視窗設計框架，可使用在CPython環境。在完成Anaconda安裝之後，可以在路徑C:\Users\用戶名\AppData\Local\Continuum\anaconda3\Library\bin找到designer.exe。雙擊designer.exe即可啟動Qt Designer設計工具(如圖一)。開發者可以用拖拉的方式完成視窗外觀設計並儲存成.ui檔。圖一的UI包含一個輸入框及一個按鈕。如果您想測試，可以將下方的MainForm.ui檔案程式碼複製到MainForm.ui檔案當中並存檔。

(圖一) QtDesigner工具

.ui檔必須搭配業務邏輯代碼.py檔來完成工作，打開Anaconda並將底下main.py的代碼貼到main.py檔，並與MainForm.ui儲存在相同目錄底下。完成之後，在Anaconda當中執行main.py。此時視窗會開啟，在輸入框輸入文字，點擊按鈕，輸入的文字便會顯示在Console當中，如圖二。這代碼演示了一個UI的基本工作模式，適合初學者作為QT視窗設計入門研究。

main.py程式碼

from PyQt5 import QtWidgets, uic

Ui_MainWindow, QtBaseClass = uic.loadUiType('MainForm.ui')

import sys

class MainUi(QtWidgets.QMainWindow, Ui_MainWindow):

    def __init__(self):

        QtWidgets.QMainWindow.__init__(self)

        Ui_MainWindow.__init__(self)

        self.setupUi(self)

        self.pushButton.clicked.connect(self.click)

        

    def click(self):

        text = self.lineEdit.text()

        print(text)

if __name__ == "__main__":

    def run_app():

        app = QtWidgets.QApplication(sys.argv)

        window = MainUi()

        window.show()

        app.exec_()

    run_app()

MainForm.ui檔案程式碼

    

<?xml version="1.0" encoding="UTF-8"?>

<ui version="4.0">

 <class>MainWindow</class>

 <widget class="QMainWindow" name="MainWindow">

  <property name="geometry">

   <rect>

    <x>0</x>

    <y>0</y>

    <width>345</width>

    <height>172</height>

   </rect>

  </property>

  <property name="windowTitle">

   <string>MainWindow</string>

  </property>

  <widget class="QWidget" name="centralwidget">

   <widget class="QPushButton" name="pushButton">

    <property name="geometry">

     <rect>

      <x>220</x>

      <y>80</y>

      <width>101</width>

      <height>41</height>

     </rect>

    </property>

    <property name="text">

     <string>Run</string>

    </property>

   </widget>

   <widget class="QLineEdit" name="lineEdit">

    <property name="geometry">

     <rect>

      <x>10</x>

      <y>10</y>

      <width>311</width>

      <height>41</height>

     </rect>

    </property>

    <property name="font">

     <font>

      <pointsize>16</pointsize>

     </font>

    </property>

   </widget>

  </widget>

  <widget class="QMenuBar" name="menubar">

   <property name="geometry">

    <rect>

     <x>0</x>

     <y>0</y>

     <width>345</width>

     <height>21</height>

    </rect>

   </property>

  </widget>

  <widget class="QStatusBar" name="statusbar"/>

 </widget>

 <resources/>

 <connections/>

</ui>

(圖二) 在輸入框輸入字串，點擊按鈕將其輸出到Console當中