Python: PyQt5 designerでGUIを作成 - Fuwafuwa's memorandum

Fuwafuwa's memorandum

Data analysis, development, reading, daily feeling.
MENU

Python: PyQt5 designerでGUIを作成

いつの間にかPyQtがすごくリッチになっていたのでメモです。
分析屋さんは分析ツールを作って人に共有する時に
すごく便利なのではないかなあと思います。

最新バージョンのPyQt5はネット上に
まとまった情報があまりないように見受けられたのでメモ。

Python: PyQtの開発環境を整備

Python: PyQtで電卓を作成する

下記では、Qt Designerを使って、上記の電卓を作成します。

Qt Designerの画面は下記のような感じ。 PyQt_designer.png
アプリ作成の統合開発環境を触っている人なら見たまんまで使えると思います。
ファイルからformを新規作成し、ウィジェットボックスからドラッグ&ドロップでウィジェットを配置してください。
プロパティエディタから調整できます。

今回は、inputLineに計算式を入力し
Caluculateボタンを押下するとoutputLineに計算結果が表示されるようにします。


ここではひとまず cal_ui.ui として保存します。
下記のuiファイルが作成されます。



 Form
 
  
   
    0
    0
    236
    113
   
  
  
   Form
  
  
   
    
     60
     10
     161
     21
    
   
  
  
   
    
     60
     40
     161
     31
    
   
   
    Caluculation
   
  
  
   
    
     10
     80
     91
     21
    
   
   
    output
   
  
  
   
    
     60
     80
     161
     21
    
   
  
  
   
    
     10
     10
     91
     21
    
   
   
    input
   
  
 
 
 


このuiをpyファイルにコンバートします。
コマンドプロンプトで下記を入力してください。
ここではpyファイルをcal_ui.pyとします。
pyuic5 -x cal_ui.ui -o cal_ui.py
上記を実行しますと、cal_ui.pyファイルが作成されます。
ここでの中身は下記のような感じです。
from PyQt5 import QtCore, QtGui, QtWidgets

class Ui_Form(object):
    def setupUi(self, Form):
        Form.setObjectName("Form")
        Form.resize(236, 113)
        self.inputLine = QtWidgets.QLineEdit(Form)
        self.inputLine.setGeometry(QtCore.QRect(60, 10, 161, 21))
        self.inputLine.setObjectName("inputLine")
        self.calcButton = QtWidgets.QPushButton(Form)
        self.calcButton.setGeometry(QtCore.QRect(60, 40, 161, 31))
        self.calcButton.setObjectName("calcButton")
        self.label_2 = QtWidgets.QLabel(Form)
        self.label_2.setGeometry(QtCore.QRect(10, 80, 91, 21))
        self.label_2.setObjectName("label_2")
        self.outputLine = QtWidgets.QLineEdit(Form)
        self.outputLine.setGeometry(QtCore.QRect(60, 80, 161, 21))
        self.outputLine.setObjectName("outputLine")
        self.label_3 = QtWidgets.QLabel(Form)
        self.label_3.setGeometry(QtCore.QRect(10, 10, 91, 21))
        self.label_3.setObjectName("label_3")

        self.retranslateUi(Form)
        QtCore.QMetaObject.connectSlotsByName(Form)

    def retranslateUi(self, Form):
        _translate = QtCore.QCoreApplication.translate
        Form.setWindowTitle(_translate("Form", "Form"))
        self.calcButton.setText(_translate("Form", "Caluculation"))
        self.label_2.setText(_translate("Form", "output"))
        self.label_3.setText(_translate("Form", "input"))


if __name__ == "__main__":
    import sys
    app = QtWidgets.QApplication(sys.argv)
    Form = QtWidgets.QWidget()
    ui = Ui_Form()
    ui.setupUi(Form)
    Form.show()
    sys.exit(app.exec_())
実行してみますと、アプリが起動しますが
まだイベントなどを設定していないので、動かないと思います。

最低限の動きをするように下記のコメント部分を書き加えます。
※該当箇所に「## ここ」と記載しました。
from PyQt5 import QtCore, QtGui, QtWidgets

def cal(n): ## ここ
    try:       
        result = eval(n)
    except:
        result = "計算式を入力してください"
    return result

class Ui_Form(object):
    def setupUi(self, Form):
        Form.setObjectName("Form")
        Form.resize(236, 113)
        self.inputLine = QtWidgets.QLineEdit(Form)
        self.inputLine.setGeometry(QtCore.QRect(60, 10, 161, 21))
        self.inputLine.setObjectName("inputLine")
        self.calcButton = QtWidgets.QPushButton(Form)
        self.calcButton.setGeometry(QtCore.QRect(60, 40, 161, 31))
        self.calcButton.setObjectName("calcButton")
        self.calcButton.clicked.connect(self.calc) ##ここ
        self.label_2 = QtWidgets.QLabel(Form)
        self.label_2.setGeometry(QtCore.QRect(10, 80, 91, 21))
        self.label_2.setObjectName("label_2")
        self.outputLine = QtWidgets.QLineEdit(Form)
        self.outputLine.setGeometry(QtCore.QRect(60, 80, 161, 21))
        self.outputLine.setObjectName("outputLine")
        self.outputLine.setReadOnly(True) ##ここ
        self.label_3 = QtWidgets.QLabel(Form)
        self.label_3.setGeometry(QtCore.QRect(10, 10, 91, 21))
        self.label_3.setObjectName("label_3")

        self.retranslateUi(Form)
        QtCore.QMetaObject.connectSlotsByName(Form)

    def calc(self): ## ここ
        r = cal(self.inputLine.text())
        self.outputLine.setText(str(r))   
            
    def retranslateUi(self, Form):
        _translate = QtCore.QCoreApplication.translate
        Form.setWindowTitle(_translate("Form", "Form"))
        self.calcButton.setText(_translate("Form", "Caluculation"))
        self.label_2.setText(_translate("Form", "output"))
        self.label_3.setText(_translate("Form", "input"))


if __name__ == "__main__":
    import sys
    app = QtWidgets.QApplication(sys.argv)
    Form = QtWidgets.QWidget()
    ui = Ui_Form()
    ui.setupUi(Form)
    Form.show()
    sys.exit(app.exec_())
アプリを起動すると、今度は期待通りの動きをするようになったと思います。 Cal.png
本当は、uiファイルとイベントをコントロールするファイルは分けて書けるとよいですね。
ひとまず今日はこれで。

Leave a reply






管理者にだけ表示を許可する

該当の記事は見つかりませんでした。