Go to Qiita Advent Calendar 2024 Top
LoginSignup
2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@kiryu-3

PyQt5勉強②

Last updated at Posted at 2023-03-07

はじめに

前回はPyQt5のHelloWorldをしました。

今回は Qt Creator を使って、GUIを楽に実装します。

前回の復習

Qt Creatorは、Qtアプリケーションを作成するためのクロスプラットフォームの統合開発環境です。
様々なプラットフォーム向けのクロスプラットフォームアプリケーションを開発するために使用されます。

公式ページはこちらになります。

Qt Designerとは

Qt Designer　は、PyQtやPySideといったPythonのGUIツールキットと組み合わせて使うことができるGUIエディタです。
Qt Designerを使用することで、ビジュアルにウィンドウやダイアログボックスを作成し、その後にPythonコードを生成することができます。

Qt Designerは、あくまでもQt Creatorの一部です。
Qt Designerは、Qt Creatorの中でGUIを設計し、その後に生成された.uiファイルをPythonコードに変換することができます。

Qt Designerを使う利点

普通にPythonでコードを書いてGUIを作ることもできますが、
GUIをQt Designerを使って作るメリットはいくつかあります。

ビジュアルなデザイン

Qt Designerでは、GUIの要素をドラッグ＆ドロップで配置できます。

QtDesigner1

少し画像は小さいですが、Qt Designerでの作業画面はこのようになっています。
コードを書く必要がないため、GUIのデザインが容易になります。

時間とコストの節約

コードを書く必要がないため、開発時間が短縮されます。
また、GUIを設計するためのリソースやデザイナーを雇う必要がなくなるため、開発コストも削減できます。

コードの分離

GUIの設計者はデザインに集中し、開発者はGUIの実装に集中できます。
これにより、開発作業が効率化されます。

手順

実際にQt Designerを使って、GUIを作ってみます。

1. Anacondaのインストール

まずはこちらのサイト等を参考に、Anacondaをインストールします。

2. 仮想環境の作成

Anaconda Navigatorを開いて、仮想環境を作成します。
① 左側のメニューから「Environments」を選択し、「Create」をクリックする。
② 新しい仮想環境の名前("pyqt"など)を入力し、「Create」をクリックする。
③ 作成した仮想環境を選択し、「Open Terminal」をクリックして、ターミナルを開く。
④ ターミナルで以下のコマンドを実行して、Qt Designerをインストールする。

conda install pyqt

⑤ インストールが完了したら、以下のコマンドを実行して、Qt Designerを起動する。

designer

3. QtDesignerの準備

実行すると以下のような画面となるはずです。（画面右側はだいぶ違うと思います）
QtDesigner1

ファイル→新規 と進み、次の画面でここでは「Main Window」を選択します。

Qtアプリ①

4. QtDesignerでGUI作成

今回はこのようなフォームを作成してみようと思います。完成形は以下です。
（こちらの例を参考にしました）。

Qt Designer①

フォームの作成

左側にあるウィジェットツールボックスから使用したいウィジェットをドラッグ＆ドロップしてフォームに配置します。
ここでは、Label×3・LineEdit×2・PushButton を配置しました。

ウィジェットのプロパティの編集

フォームに配置したウィジェットをクリックすると、右側にそのウィジェットのプロパティエディタが表示されます。
ここでは、テキストやフォント、サイズ、位置などのプロパティを編集できます。

まずはフォーム全体のサイズを調整します。
ウィジェットの上でクリックすると以下のようなプロパティエディタが表示されます。

Qt Designer②

私は「幅」「高さ」を調整しました。

次に、Passwordを入力する欄で、入力内容を「●」でマスクされるようにします。
プロパティエディタで以下のように設定を変更します。

Qt Designer③

最後に"submit"ボタンの文字を太字にし、背景色を青色にします。

プロパティエディタで以下のように設定を変更します。
Qt Designer④

また、"submit"ボタンの上で右クリックし、「スタイルシートを変更」を選択します。
スタイルシートの中で以下のように設定を変更します。
background-color:#D3DEF1;

Qt Designer⑤

スタイルシートの記述方法はCSSと似ています。必要に応じて、さまざまなプロパティを設定できます。

.uiファイルの保存

ファイル→名前を付けて保存 と進み、任意の場所に.uiファイルを保存します。

5. Pycharmの環境設定

ここまでで作成したuiファイルをpyファイルに変換するためには、"pyuic5"コマンドを使う必要があります。
前回の記事でPyQt5のインストールがPycharm上で済んでいるはずです。

しかし、"pyuic5"のパスが通っていない場合は、パスを追加する必要があるかもしれません。
そのため、環境変数を追加する必要がある可能性があります。

Qt Designer⑥

PyCharmでの作業フォルダ内にある、"pyuic5.exe" のパスを、環境変数に追加します。

6. Pycharmでの実行

ターミナルに以下のコマンドを入力し、Enterキーを押します。

pyuic5 -x uiファイル名.ui -o pyファイル名.py

コマンドが正常に実行されると、指定された場所にPyファイルが作成されます。

form.py
# -*- coding: utf-8 -*-

# Form implementation generated from reading ui file 'form3.ui'
#
# Created by: PyQt5 UI code generator 5.15.9
#
# WARNING: Any manual changes made to this file will be lost when pyuic5 is
# run again.  Do not edit this file unless you know what you are doing.


from PyQt5 import QtCore, QtGui, QtWidgets

# UIを定義するクラス
class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        # MainWindowの設定
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(260, 230)

        # 中央に配置されるWidgetの設定
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")

        # Emailアドレスのラベルの設定
        self.label_2 = QtWidgets.QLabel(self.centralwidget)
        self.label_2.setGeometry(QtCore.QRect(10, 10, 71, 16))
        self.label_2.setObjectName("label_2")

        # Emailアドレスの入力欄の設定
        self.EmailAdress = QtWidgets.QLineEdit(self.centralwidget)
        self.EmailAdress.setGeometry(QtCore.QRect(10, 30, 221, 20))
        self.EmailAdress.setObjectName("EmailAdress")

        # ラベルの設定
        self.label_3 = QtWidgets.QLabel(self.centralwidget)
        self.label_3.setGeometry(QtCore.QRect(10, 60, 241, 16))
        self.label_3.setObjectName("label_3")

         # パスワードのラベルの設定
        self.label_4 = QtWidgets.QLabel(self.centralwidget)
        self.label_4.setGeometry(QtCore.QRect(10, 90, 71, 16))
        self.label_4.setObjectName("label_4")

        # パスワードの入力欄の設定
        self.Password = QtWidgets.QLineEdit(self.centralwidget)
        self.Password.setGeometry(QtCore.QRect(10, 110, 221, 20))
        self.Password.setEchoMode(QtWidgets.QLineEdit.Password)
        self.Password.setObjectName("Password")

        # 送信ボタンの設定
        self.Submit = QtWidgets.QPushButton(self.centralwidget)
        self.Submit.setGeometry(QtCore.QRect(10, 160, 75, 23))
        font = QtGui.QFont()
        font.setBold(True)
        font.setWeight(75)
        self.Submit.setFont(font)
        self.Submit.setStyleSheet("background-color:#D3DEF1;\n"
"")
        self.Submit.setObjectName("Submit")

        # 中央Widgetの設定
        MainWindow.setCentralWidget(self.centralwidget)

        # メニューバーの設定
        self.menubar = QtWidgets.QMenuBar(MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 260, 21))
        self.menubar.setObjectName("menubar")
        MainWindow.setMenuBar(self.menubar)

        # ステータスバーの設定
        self.statusbar = QtWidgets.QStatusBar(MainWindow)
        self.statusbar.setObjectName("statusbar")
        MainWindow.setStatusBar(self.statusbar)

        # ラベルなどのテキストを翻訳する関数
        self.retranslateUi(MainWindow)

        # MainWindowのスロットをコネクトする
        QtCore.QMetaObject.connectSlotsByName(MainWindow)

    def retranslateUi(self, MainWindow):

        # QtCore.QCoreApplication.translateメソッドを使用するための設定
        _translate = QtCore.QCoreApplication.translate

        # MainWindowのタイトルを設定
        MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow"))

        # label_2のテキストを設定
        self.label_2.setText(_translate("MainWindow", "Email Adress"))

        # label_3のテキストを設定
        self.label_3.setText(_translate("MainWindow", "We\'ll never share your email with anyone else."))

        # label_4のテキストを設定
        self.label_4.setText(_translate("MainWindow", "Password"))

        # Submitボタンのテキストを設定
        self.Submit.setText(_translate("MainWindow", "Submit"))


if __name__ == "__main__":
    import sys
    app = QtWidgets.QApplication(sys.argv)
    MainWindow = QtWidgets.QMainWindow()
    ui = Ui_MainWindow()
    ui.setupUi(MainWindow)
    MainWindow.show()
    sys.exit(app.exec_())

このpyファイルはuiファイルから生成されたものになります。
コメントは後から追加したものですが。

このファイルを保存した後、実行します
以下のようなウィンドウが表示されるはずです

QtDesigner1

最後に

これでQt Designerを使ってのGUI作成は終了です。
次回はボタンなどを押したときのアクションを設定します。

参考

2
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?