導入
前回の記事ではPyQt5環境のインストールと設定、Qtツールのインストールを紹介しましたが、今回はQtツールのQtDesignerの使い方を紹介します。
QtDesigner を始める
- プロジェクトを開きます
- 上部のメニュー バーから [:] を選択する
Tools -> ExternalTools -> QtDesignerと、以下に示すように、QtDesigner 実行ウィンドウがポップアップ表示されます。
QtDesigner インターフェイスは次のとおりです。
- 新しい形
QtDesigner初めて実行すると、[新しいフォーム] ダイアログ ボックスが自動的に表示される場合があります。メニュー バーから [ファイル] -> [新規作成] を選択するか、ショートカット キー「Ctrl+N」を使用して [新しいフォーム] ダイアログ ボックスを呼び出すこともできます。箱も
以下に示すように、[新しいフォーム] ウィンドウの左側のメニューから [メインウィンドウ] を選択して、新しいグラフィック ウィンドウを作成します。
- 新しいインターフェースを設計する
QtDesignerユーザー インターフェイスは非常に直感的です。メイン インターフェイスは、左、中央、右の 3 つの部分に分かれています。左側には、さまざまな代替コントロール オブジェクトがあります。右上の「オブジェクト ビューア」には、コントロールのツリー構造が表示されます。右下の「プロパティエディタ」はコントロールの各種プロパティを表示し、中央部分は設計したインターフェースを表示するために使用されます。次に、新しいグラフィックス ウィンドウにいくつかのグラフィックス コントロールを追加します。
追加ボタン
左側のコントロール バーの ボタン からボタンを選択しPushButton、マウスの左ボタンでボタンをクリックしPushButton、マウスを移動してPushButton中央の新しいグラフィックス ウィンドウ内の任意の位置にボタンをドラッグし、マウスの左ボタンを放すと、ボタンが表示されます。以下に示すようなボタン オブジェクトがグラフィックス ウィンドウの位置に生成されますPushButton。
グラフィックス ウィンドウで PushButton ボタン オブジェクトをマウスの左ボタンでクリックし、ボタンをドラッグしてコントロールの位置を調整します。他のコントロールの場合は、マウスをドラッグして位置を調整することもできます。
PushButton ボタン オブジェクトをマウスで選択すると、コントロールの周囲の境界線に 8 つの青い点が表示され、コントロールが選択されていることを示します。このとき、オブジェクトのプロパティは「プロパティ エディター」で編集および変更できます。たとえば右側にある
- PushButton オブジェクトの高さを 50 に、幅を 150 に変更します。
- PushButton オブジェクトの「QAbstractButton->text」を「PLAY」に変更します。
テキストコントロールを追加する
- 左側のコントロール バー からボタン
InputWidgetを選択しTextEdit、マウスの左ボタンでボタンを選択しTextEditて新しいグラフィックス ウィンドウにドラッグします。マウスの左ボタンを放すと、グラフィックス ウィンドウに TextEdit オブジェクトが生成されます。 - マウスで TextEdit オブジェクトを選択すると、右側の「プロパティ エディタ」でオブジェクトのプロパティを編集および変更できます。次に例を示します。
- TextEdit オブジェクトの高さを 200 に、幅を 300 に変更します。
- TextEdit オブジェクトの表示内容は、HTML やマークダウンなどの形式で編集でき、TextEdit オブジェクトをダブルクリックして表示される HTML 編集ダイアログ ボックスで表示内容を入力することもできます。
上記の手順で、基本的なページの作成と編集が完了しました。
- 設計したグラフィカルインターフェイスを
.uiファイルとして保存する
ショートカット キーを使用してCtrl+sファイルを保存します。ファイルには という名前を付けますqt_demo1.ui。この記事の既定のプロジェクト設定では、現在のプロジェクト パスの下の \program サブディレクトリに .py ファイルも保存されます。グラフィカル インターフェイス ファイルは、アプリケーション プログラミング中に直接インポートできます。
PyChrm または QtDesigner で設定したファイル保存パスが異なる場合は、グラフィカル インターフェイス ファイルをインポートするときに正しいパスを設定して使用することに注意してください。