QT 学習ノート: インターフェイスのレイアウト レイアウト

インターフェイスのレイアウト (レイアウト) は、インターフェイスを描画する上で非常に重要な部分です。ここでは実際の例から始めて、Qt Creator ツールを使用してインターフェイスのレイアウトを行う方法を説明します。

postMan に似た http テスト クライアント ツールを描画すると仮定します。

 1. Qt Creatorでプロジェクトを作成する

ウィンドウのタイトルを「HTTP Interface Test」に設定し、ウィンドウのサイズを 800*700 に設定します。

2. レイアウトに関係なく、Qt Creator を使用してインターフェイス全体をドラッグします。

3. レイアウト 

(1) よく使われるいくつかのレイアウト方法

 一般に、ほとんどのインターフェイスのレイアウトを完了するには、垂直レイアウト、水平レイアウト、およびスペーサーのみを使用できます。

 (2) レイアウト操作1

(2.1)

同時にマウスで選択します (マウスをクリックするときに Ctrl キーを押したままにします): 最初の行の 3 つのコントロール (コンボックス選択ボックス、lineEdit 入力ボックス、および送信ボタン)。

マウスの右ボタンをクリックして、「レイアウト -- 水平レイアウト」を選択します。

(2.2)

このときのインターフェースは次のようになります。

このとき、外側の赤枠をマウスで選択し、右にドラッグすると枠が拡大されます。

   (3) レイアウト操作2

 マウスが選択されました: メッセージ ヘッダー、+- ボタン、水平レイアウト。

(4) レイアウト操作3

 マウス選択:上全体と下にテキストボックス、「縦型レイアウト」を使用。

(5) レイアウト操作4

 「メッセージ本文」とその下の「テキストボックス」をマウスで選択し、「縦型レイアウト」を採用します。

(6) レイアウト操作5

マウスで選択します: 左側の全体 - 1、中央の「垂直線」 - 2、右側の全体 - 3。横型レイアウトを使用します。

次に、コントロールを適切なサイズに調整します。

 (7) レイアウト操作6

ここで、マウスで「MainWindow」を選択し、マウスの右ボタンをクリックして、「レイアウト」-「垂直」レイアウトを選択します。操作が完了すると、インターフェイスは次のようになります。

ここまでで、基本的にレイアウトは完成しました。次に、プログラムを実行してインターフェースの効果を確認してみましょう。フォームがどのように拡大縮小されても、フォーム内のコントロールも一緒に拡大縮小されることがわかります。

それでも理解できない場合は、参考文献のビデオをよく見ることをお勧めします。(動画の作者は私ではありません)

参考:

(1) Python Qt グラフィカル インターフェイス プログラミング - PySide2 PyQt5 PyQt PySide

おすすめ

転載: blog.csdn.net/mars21/article/details/131525148