[PyQt5 デスクトップ アプリケーション開発] 2. ビジュアル インターフェイスのプログラミング手順 (超詳細)

目次

ステップ 1: ビジュアル インターフェイスの設計

       1. ビジュアルインターフェイスの初期化。

         2. コントロールプロパティの変更と編集

         3. イベント応答: シグナル関数とスロット関数 (知識ポイントについては後で説明しますが、最初にここで使用します)

ステップ 2: ui ファイルを py ファイルに変換する 

ステップ 3: 特定のロジックを実装するコードを作成する

        1. プロジェクトフレームワークへの参照を実装する

         2. スロット機能の実装ロジックを完成させる

結論

        フォロー、いいね、収集大歓迎です。


今学期、学校で提供されるビジュアルインターフェイスプログラミングを考慮すると、これは生徒の探求と学習を促進するためです。ここに特別に収録されています。

 

ステップ 1: ビジュアル インターフェイスの設計

       1. ビジュアルインターフェイスの初期化。

        まず、QT デザイナーを開きます。Pycharm での開き方に基づく具体的な手順は、[ツール]--[外部ツール]-[PyQtDesigner] となります。

        [外部ツール]オプションがない場合は、この連載のセクション(1)の環境設定に従って、関連するパスを設定してください。

924448f15786400bae8e914560b610b6.png

         開いたインターフェースで、表示ウィンドウの[ウィジェット]-[作成]を選択し、作成するフォーム編集インターフェースを生成します。2b36e0db5a974141b7858a3dd6f45dc5.png

         次に、独自の UI インターフェイスのデザインに従って、適切なコントロールを選択し、左ボタンを押したまま新しいフォームにドラッグして、位置を調整します。下の図は、コントロールの単純なドラッグと配置を示しています。

ee0fe81556424bd4826df54922b78ee9.png

         2. コントロールプロパティの変更と編集

        次に、各コントロールに対して 2 つのことを行います。

        1. コントロールの表示内容を設定します: 方法 1: コントロールをダブルクリックすると、コントロールの編集状態になり、コントロールの内容を直接編集できます; 方法 2: 編集するコントロールを選択し、次に、右下隅の [プロパティ エディタ] をクリックし、[テキスト] 属性を見つけて変更します。図に示すように:

725610e6fd9b41c2bb31d67101572eb9.png

         修正されたインターフェイス コントロールのコンテンツを編集すると、完成した結果 (表示するには Ctrl+R を押します) が次の図のようになります。

d743c2e33df841ca8156ec7252977c8a.png

         2. コントロールの名前を変更します。ここで変更したコントロール名は、後続のコードで呼び出すために必要です。通常は、その機能に応じて名前を付ける必要があります。たとえば、ジャンプ ボタンには gotoBtn などの名前を付けることができます。その名前を読んでその意味を知ることができます。具体的な変更方法は、変更するコントロールを選択し、[プロパティエディタ]で[objectName]属性を見つけて変更します。(その他の制御変更については、この手順を参照してください。)

872411484f0549f4b23cccb98fea6fbd.png

         3. イベント応答:シグナル関数とスロット関数 (知識ポイントについては後で説明しますが、最初にここで使用します)

        上記の手順が完了したら、[入力内容を表示]ボタンを付与し、イベントレスポンスをバインドします。具体的な操作は、メニューバーの[Signal/Slot]アイコン(図参照)を選択し、[Display]ボタンをクリックし、長押ししてドラッグします。赤い線が表示されたら、マウスをフォームの外に移動すると、[接続の構成]ダイアログボックスが表示されます。

54b8819edaca469a8f773794bc3637a1.png

         [接続の設定]ダイアログボックスで、左側のサイドバーが(showBtn)に対応するイベントに対応します。クリックしたイベントを選択すると、右側のサイドバーが編集可能になります。下の[編集]ボタンをクリックすると、[シグナル]が表示されます./スロット]ダイアログボックス。ダイアログ ボックスで、「プラス記号」をクリックし、showContnt() などのスロット関数の名前を付けます。完了したら[ok]ボタンをクリックします。[接続の構成] ダイアログ ボックスに戻ると、名前を付けたスロット関数が右側のサイドバーに表示されます。それを選択し、ボタンのクリックされたイベントにバインドします。このように、プログラムでは、ボタンをクリックした後、定義した showContnt() 関数のロジックが実行されます。

c5a2aeed70d84aeca97ab3d68e15608c.png

         この時点で、ビジュアルインターフェイスのデザインは完了しました。[ファイル]-[保存]をクリックして*.ui形式のファイルとして保存します。first.ui という名前を付けたら、適切な場所を選択して保存します。0adc3bf8c8b74a9094cf550cbef2bbea.png

ステップ 2: ui ファイルを py ファイルに変換する 

        PyCharm開発環境で[プロジェクト]を選択し、先ほど保存した(first.uiファイル)を選択して右クリックし、[外部ツール]-[PyUIC]を選択するとfirst.pyファイルが生成されます。

c7630866000c444088f37922d8a61ccf.png

         first.ui ファイルを開くと、ファイルの内容を表示できます。写真の通り。c91d54c98c424541aba00aa5a5458271.png

 

ステップ 3: 特定のロジックを実装するコードを作成する

        プロジェクトで、新しい py ファイルを作成し、demo という名前を付けます。次に、コーディングのためにファイルを開きます。

        1. プロジェクトフレームワークへの参照を実装する

        デモ ファイルに次のコードを記述します。

import sys
from PyQt5.QtWidgets import *

#  此处引入的是我们设计的界面的类,在first.py文件中
from first import Ui_Form

# 新建类来继承UiForm,这样我们再更改界面后,不用再去修改我们写的逻辑
class DemoUi(QWidget,Ui_Form):
    # 类的初始化
    def __init__(self):
        super(DemoUi,self).__init__()
        self.setupUi(self)

    # 实现定义的槽函数逻辑
    def showContnt(self):
        pass


#此处是测试代码
if __name__=="__main__":
    app=QApplication(sys.argv)
    dm=DemoUi()
    dm.show()
    sys.exit(app.exec())

edab3d52950c475687ab360f13a8b2dc.png

        実行ボタンをクリックすると、図に示すようにインターフェイス ウィンドウが表示されます。

730c8c3304354efaa0e80124935f3f8c.png

 

         2. スロット機能の実装ロジックを完成させる

                スロット関数ではイベントへの応答を実装します。具体的なコードは次のとおりです。

    # 实现定义的槽函数逻辑
    def showContnt(self):
        str = self.inputEdit.text()
        self.showLbl.setText(str)

        完了後、「実行」をクリックして[ボタン]イベント応答を実装します。写真に示すように

9d8d82b3a9e14375822edd4fda094a81.png

 

        この時点で、完全なビジュアル プログラムの開発が完了しました。

        

結論

        読者の皆様、この記事が良いと思われましたら、コレクションに追加してフォローしてください。これにより、今後一連の記事が更新されたときに、できるだけ早く通知を受け取ることができます。

        コーディングは簡単ではありません。フォロー、いいね、収集を歓迎します。

 

 

おすすめ

転載: blog.csdn.net/m0_60318025/article/details/130789584