このチュートリアルではQt Creatorをインストールする必要があります – Qtウェブサイトから無料でダウンロードすることができます。 https://www.qt.io/download に行き、Qt パッケージをダウンロードしてください。
Qt Creatorを開くと、メインウィンドウが表示されます。 左側のタブでデザイナーを利用できます。
Qt Creator のインターフェイスで、左側にデザインセクションが表示されています。 表示されたウィンドウで、左側の Files and Classes の下に Qt を選択し、右側の Qt Designer Form を選択します。
Create a new Qt .ui file.
次のステップでは、どのタイプのウィジェットを作成したいかを聞かれます。 もし、アプリケーションを開始するのであれば、メインウィンドウが正しい選択です。 しかし、ダイアログ ボックス、フォーム、およびカスタム複合ウィジェット用の .ui ファイルを作成することもできます。
作成するウィジェットの種類を選択します。
保存名と保存フォルダを選択します。
最後に、バージョン管理システムを使用している場合、ファイルをバージョン管理システムに追加することを選択できます。 UI には影響しません。
Git などのバージョン コントロールにファイルを追加することも可能です。 ウィンドウを表す灰色の作業領域と、ウィンドウ メニュー バーの始まりです。
作成したメイン ウィンドウの初期表示。
ウィンドウをクリックして、各コーナーにある青いハンドルをドラッグすると、サイズを変更できます。 最初のアプリケーションでは、QMainWindow の中心的なウィジェットを設定するには、.setCentralWidget() を使用する必要があることを学びました。
Qt Creator は、特に明らかではありませんが、自動的にレイアウトを適用します。
レイアウトを使用して複数のウィジェットをメインウィンドウに追加するには、まずウィジェットを QMainWindow の上にドラッグします。 ここでは、3つのラベルをドラッグしています。
Main window with 1 labels and 1 button added.
ウィジェットをウィンドウにドラッグして2つ作成し、そのウィンドウの子ウィジェットにしました。
右側のパネルで QMainWindow を探します (一番上にあるはずです)。 その下に、ウィンドウの中心的なウィジェットを表す centralwidget が表示されます。 中央ウィジェットのアイコンは、現在適用されているレイアウトを表します。
QMainWindow オブジェクトを右クリックし、表示されるドロップダウンで [レイアウト] を見つけます。
メインウィンドウを右クリックして、[レイアウト] を選択します。
Select layout to apply to the main window.
The selected layout is applied to the centralwidget of the QMainWindow and widgets are added the layout, being laid out depending on the selected layout.メインウィンドウにレイアウトされるを選択し、水平に配置を選択するとレイアウトはウィジェットに対して適用されます。 Qt Creator では、実際にドラッグしてレイアウト内のウィジェットを並べ替えたり、別のレイアウトを選択したりすることができることに注意してください。
メイン ウィンドウのウィジェットに適用された垂直方向のレイアウト
生成した .ui ファイルの使用
私たちは非常に単純な UI を作成しました。
最初に .ui ファイルを保存します。デフォルトでは、作成中に選択した場所に保存されますが、必要に応じて別の場所を選択することも可能です。
.loadUI()メソッドを使用してクラスへロードする、pyuic5ツールを使用して Python へ変換する。
これら 2 つのアプローチについて、以下で説明します。
.ui ファイルを直接読み込む
.uiファイルを読み込むには、PyQt5 に含まれる uic モジュール、特に uic.loadUI() メソッドを使用することができます。
PySide2 では、QUiLoader インスタンスを使用して、同じことを行うために loader.load() メソッドを呼び出すことができます。
A (very) simple UI designed in Qt Creator
uid.loadUI()メソッドはインスタンスオブジェクトを生成するので、カスタム __init__()コードを添付できません。
既存のウィジェット(例えばQMainWindow)の__init__ブロックからUIをロードするには、PyQt5ではuic.loadUI(filename, self)を使います。
PySide2ローダはこの方法をサポートしていません – 第2パラメータは作成中のウィジェットの親ウィジェットに対応するものです。
.uiファイルをPythonに変換する
Python出力ファイルを生成するには、コマンドラインからpyuic5を実行し、.uiファイルと出力先ファイルを-oパラメータで渡します。
pyuic5 mainwindow.ui -o MainWindow.pyPyQt4 を使用している場合、ツールは `pyuic4` という名前ですが、それ以外は全く同じです。
結果の MainWindow.py ファイルはエディタで開いて見ることができますが、このファイルは編集しないほうがいいでしょう。 Qt Creator を使用することの利点は、開発中にアプリケーションを編集し、調整し、更新できることです。 このファイルに加えられた変更は、アップデートすると失われます。 しかし、このファイルをインポートしてアプリケーションで使用するときには、好きなものを上書きして微調整することができます。
結果の Python ファイルのインポートは、他のものと同様に動作します。 以下のようにクラスをインポートすることができます。 pyuic5 ツールは Qt Creator で定義されたオブジェクトの名前に Ui_ を追加し、あなたがインポートしたいのはこのオブジェクトです。
from MainWindow import Ui_MainWindowアプリケーションでメインウィンドウを作成するには、通常通りクラスを作成しますが、QMainWindow とインポートした Ui_MainWindow クラス両方をサブクラス化します。
Qt Creator で設計された (非常に) シンプルな UI
以上です。 これであなたのウィンドウは完全にセットアップされました。 .ui ファイルの使用は UI 固有のコードを抽象化するので、この同じパターンを使用して、設計した任意のインターフェイスをロードできます。
アプリケーション ロジックの追加
Qt Creator で作成したウィジェットは、コードで作成したものと同じように操作することができます。 より簡単にするために、uic は Qt Creator で指定されたように、すべての子ウィジェットをその ID 名で window オブジェクトに追加します。 これらをどのように扱うかについては、次のパートで説明します。