ホームページ >バックエンド開発 >PHPチュートリアル >PyQt5シリーズチュートリアル(2) QtDesignerを使ってUIインターフェースをデザインする_PHPチュートリアル

PyQt5シリーズチュートリアル(2) QtDesignerを使ってUIインターフェースをデザインする_PHPチュートリアル

WBOY
WBOYオリジナル
2016-07-12 09:03:362414ブラウズ

PyQt5 シリーズ チュートリアル (2) QtDesigner を使用した UI インターフェイスの設計

ソフトウェアおよびハードウェア環境

  • OS
  • はじめに
  • PyQt5 シリーズ チュートリアルの最初の記事 http://blog.csdn.net/ djstavaV/article/details/50218157、今日は、誰もが Qt 開発の魅力を感じ、GUI プログラムの開発の一般的なプロセスに慣れることができるように、Python を使用して最初の Qt GUI プログラムを開発する開発環境をセットアップしました。 Qtを使って
  • プログラムの UI インターフェイスを作成するには、UI 制作ツールを使用する方法と、モバイル開発における Android や iOS などの純粋なコードを作成する方法の 2 つが一般的です。PyQt5 では、この 2 つの方法もあります。
  • QtDesigner ツールの紹介

QtDesigner は、Qt プログラムの UI インターフェイスを作成するために特別に使用されるツールです。使い方は非常に簡単です。ドラッグしてクリックするだけで、いつでもレンダリングをプレビューして表示できます。

その中で、QtDesigner はいくつかの共通モジュールを提供しており、領域 2 は UI コントロールのリスト、領域 4 はコントロールの属性リストです。リストの編集、エリア 5 信号スロットとスロットの列リストの編集。エリア 6 はリソース処理ウィンドウです。

最初の PyQt5 プログラム

ここまで述べたので、実践してみませんか。

PyQt5シリーズチュートリアル(2) QtDesignerを使ってUIインターフェースをデザインする_PHPチュートリアルこれは最初の PyQt5 プロジェクトのインターフェイス レンダリングです。達成する必要があるのは、インターフェイス上のボタンをクリックすると、プロンプト ボックスがポップアップし、プロンプト ボックスにテキスト文字列が表示されることです。

さて、目標は決まったので、早速達成していきましょう。

QtDesigner UI のデザイン

Main Window モジュールに基づいて UI ファイルを作成し、firstPyQt5.ui という名前を付けます。ウィジェット ボックスからプッシュ ボタンを見つけて (ドラッグすることもできます)、それをワークスペースにドラッグし、位置を調整し、ボタンにテキストを入力し、フォントとサイズを調整します。これらはすべてプロパティ エディターで操作できます。ボタン上のポップアップ ボックスをクリックする操作により、Qt の非常に重要な 2 つの概念、つまりシグナルとスロットが表示されます。これについては、別のブログ記事で詳しく説明する予定です。ここで必要なのは、スロットが関数であることだけです。信号がスロットにバインドされている場合、信号がトリガーされ、スロットが実行されます。

それでは、質問は、QtDesigner でシグナルとスロットをバインドする方法です。メニュー バーの [編集] -> [信号/スロットの編集] を開き、カーソルをボタンに移動してクリックしてドラッグすると、編集ボックスが表示されます。これはクリックなので、信号は clicked() を選択しません。まだ存在しますので、[編集] をクリックして、firstPyQt5_button_click() という名前の新しいファイルを作成しましょう

PyQt5シリーズチュートリアル(2) QtDesignerを使ってUIインターフェースをデザインする_PHPチュートリアル

リソース ファイルの使用方法を示すために、ここで 2 つの画像をインポートします。1 つはメイン ウィンドウ用、もう 1 つはヘルプのアクション用です。メニュー項目。 PyQt5シリーズチュートリアル(2) QtDesignerを使ってUIインターフェースをデザインする_PHPチュートリアルPyQt5シリーズチュートリアル(2) QtDesignerを使ってUIインターフェースをデザインする_PHPチュートリアルQtDesigner がリソース ファイルを参照する前に、xml ファイルに似ており、リソース ファイルのパスを指定するために使用される qrc ファイルを準備する必要があります

<rcc version="1.0">    <qresource>        <file>qt.png</file>        <file>penguin.jpg</file>    </qresource></rcc> 
その後、その qrc ファイルをリソース ブラウザーに注ぐことができますQtDesigner、qrc ファイルに記述されているリソースを使用できるようにします

firstPyQt5.ui を Python コードに変換します

それは非常に簡単で、Qt が提供するコマンドライン ツール pyuic5 を通じて簡単に実現できます

pyuic5 -o firstPyQt5.py firstPyQt5.ui 

PyCharm プロジェクトを作成します

新しい Python ファイル main.py を作成します。コードは次のとおりです

# -*- coding: utf-8 -*-__author__ = 'djstava@gmail.com'import sysfrom PyQt5.QtWidgets import QApplication , QMainWindowfrom firstPyQt5 import *if __name__ == '__main__':    '''    主函数    '''    app = QApplication(sys.argv)    mainWindow = QMainWindow()    ui = Ui_mainWindow()    ui.setupUi(mainWindow)    mainWindow.show()    sys.exit(app.exec_()) 

次に、主にスロット関数を実装するために firstPyQt5.py ファイルを変更します。これまで QtDesigner に実装されていなかったため、メッセージをポップアップさせます。 box

rree

ついにプロジェクトを実行します

PyQt5シリーズチュートリアル(2) QtDesignerを使ってUIインターフェースをデザインする_PHPチュートリアルPyQt5シリーズチュートリアル(2) QtDesignerを使ってUIインターフェースをデザインする_PHPチュートリアル

通常、更新を容易にするために、ui ファイルはここでは別のファイルとして保存されます。

ソースコードのダウンロード

http://download.csdn.net/detail/djstavav/9351205

www.bkjia.comtru​​ehttp://www.bkjia.com/PHPjc/1080261.html技術記事 PyQt5シリーズチュートリアル(2) QtDesignerを使ってUIインターフェースソフトウェアとハ​​ードウェア環境OSを設計する
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。