前の章では、新しいプロジェクトを最初から段階的に作成し、ウィンドウを実行しましたが、この章から正式に Qt インターフェースプログラミングの道に入りました。この章では、最初にコードでインターフェイスを記述し、単純なコントロールを配置してから、コードを使用してレイアウトを行い、次に Qt Designer を使用してコントロールの配置とインターフェイスのレイアウトを行い、複雑なインターフェイスの設計を容易にします。

1. メインウィンドウの構成

Qtのウィンドウはインターフェースデザインにおいて、デザイナーが自由に絵を描くことができるキャンバスに相当するものであり、「国際慣行」に従い、まずエントリデモとして「Hello World」の文字表示を実装します。

前の章で、新しく作成した空のプロジェクトを直接実行するためのウィンドウは次のとおりです。

このウィンドウは空のように見えますが、実際には謎が隠されています. 下の図に示すように、ウィンドウにはいくつかのデフォルトのコントロールがあります:

上の図からわかるように、ウィンドウの上部はメニューバー、下部はステータスバー、中央の広い領域は中央のコントロールです。メニューバーはメニューが配置される場所です。ステータスバーは操作アクションや情報を表示できます。中央のコントロールは、コントロールやレイアウトを配置するために使用される「キャンバス」と呼ばれるものです。

2 コードを使用してコントロールを配置する

メニューバーとステータスバーについては当面気にしません。これについては後で試します。中央制御領域は、コントロールを配置する場所であり、中央制御領域に「Hello World」文字を配置するコードを記述します。

コードを書く前に、Qt によって自動的に生成された mainwindow.cpp ファイルの内容を見てみましょう。

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
}

MainWindow::~MainWindow()
{
    delete ui;
}

ファイルはデフォルトでヘッダファイルのインクルード, コンストラクタ, デストラクタの 3 つの部分を持ちます. コンストラクタには文字列を表示するためのラベルを配置します. コントロールは QLabel (使用前に QLabel をインクルードしたヘッダファイル), のテキストを設定します.ラベルを「Hello World」に変更すると、コードは次のようになります。

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QLabel>  // 包含QLabel的头文件

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    /* 实例一个QLabel对象指针label，
     * 并将中心控件的指针（this->centralWidget()返回中心控件的指针）传入QLabel的构造函数，
     * 表示QLabel的父类是中心控件，即QLabel会显示在中心控件区域 */
    QLabel *label = new QLabel(this->centralWidget());
    // 设置标签文本
    label->setText("Hello World");
}

MainWindow::~MainWindow()
{
    delete ui;
}

上記の追加されたコードはコメントを与え、プログラムを実行し、表示されるウィンドウは次のとおりです。

ウィンドウに "HelloWorld" という文字列が表示されたら、おめでとうございます。Qt の最初のインターフェイスプログラムを実現したことになります。

ここで指摘しなければならないのは、Qt プログラミングでのインスタンスの制御は一般にポインター変数を使用するため、関数のライフサイクルが終了しても制御が終了しないということです。コンストラクターで QLabel 変数を次のように宣言すると、次のようになります。

QLabel label(this->centralWidget());

label.setText("Hello World");

次に、実行後もウィンドウが空のままで、必要な文字列が表示されないことがわかります。ラベル変数はコンストラクターのローカル変数であるため、コンストラクターの実行が終了すると、ラベル変数も解放されます。ポインター変数を使用すると、ポインターが人為的に解放されない限り、ポインター変数は常に存在します。

「Hello World」文字列がウィンドウに表示されますが、この文字列をウィンドウの別の場所に配置する方法を知りたいと思うかもしれません。文字列が配置されている位置を調べる前に、まずウィンドウの座標がどのように指定されているかを知る必要があります.下の図に示すように、Qtウィンドウの座標系がどのように見えるかを見てみましょう.

図からわかるように、Qt ウィンドウの左上隅の座標は (0,0) で、右に行くほど X 軸の正の方向、下に行くほど Y の正の方向になります。 -軸。したがって、このウィンドウの大きさは、関数を使用して取得し、ラベルに表示できます。次のコードを参照してください。

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QLabel>  // 包含QLabel的头文件

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    // 获取窗口宽度
    int width = this->width();
    // 获取窗口高度
    int height = this->height();

    QLabel *label = new QLabel(this->centralWidget());
    // 显示出窗口宽度和高度
    label->setText(QString::number(width) + " " + QString::number(height));
}

MainWindow::~MainWindow()
{
    delete ui;
}

上記のコードでは、ウィンドウの幅と高さはまず this->width() と this->height() の 2 つの関数によって取得され、次にラベルに表示されます。その中で、QString::number(width) と QString::number(height) は値を文字列に変換します。これは、setText() 関数が文字列変数 QString のみを渡すことができるためです。プログラムを実行すると、次のようなウィンドウが表示されます。

ウィンドウに表示される文字列からわかるように、ウィンドウの幅は 800 ピクセル、高さは 600 ピクセルです。次に、「Hello World」ラベルの位置を変更し、コードを次のように変更します。

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QLabel>  // 包含QLabel的头文件

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    QLabel *label = new QLabel(this->centralWidget());
    // 设置文本
    label->setText("Hello World");
    // 设置标签的位置和大小
    label->setGeometry(0, 300, 80, 30);
}

MainWindow::~MainWindow()
{
    delete ui;
}

ここでは QLabel の setGeometry(int ax, int ay, int aw, int ah) 関数を使用します. この関数には x 軸座標, y 軸座標, コントロールの幅, 高さの 4 つのパラメータがあります.ここでは、"Hello World" ラベルの位置を (0,300)、ラベルの幅を 80、高さを 30 に設定します。ここで、Qt のすべてのコントロールの開始座標はコントロールの左上隅であり、配置位置もコントロールの (0,0) 座標を基準点としていることに注意してください。「Hello World」ラベルをここに配置ウィンドウの (0,300) 位置は、正確には、ラベルの (0,0) 座標点をウィンドウの (0,300) 位置に配置します。プログラムを実行すると、次のようなウィンドウが表示されます。

「Hello World」文字列が設定した場所に配置され、プログラムが正常に実行されます!

3 インターフェイスのレイアウトにコードを使用する

インターフェイスに 3 つのコントロール、つまりラベルコントロール QLabel、ライン入力コントロール QLineEdit、ボタンコントロール QPushButton を配置します。コードは次のとおりです。

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QLabel>       // 包含QLabel的头文件
#include <QLineEdit>    // 包含QLineEdit的头文件
#include <QPushButton>  // 包含QPushButton的头文件

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    // 标签控件
    QLabel *label = new QLabel(this->centralWidget());
    // 设置标签文本
    label->setText("Hello World");
    // 设置位置和大小
    label->setGeometry(0, 0, 80, 25);

    // 行输入控件
    QLineEdit *lineEdit = new QLineEdit(this->centralWidget());
    // 设置位置和大小
    lineEdit->setGeometry(100, 0, 80, 25);

    // 按钮控件
    QPushButton *pushButton = new QPushButton(this->centralWidget());
    // 设置按钮文本
    pushButton->setText("我是按钮");
    // 设置位置和大小
    pushButton->setGeometry(200, 0, 80, 25);
}

MainWindow::~MainWindow()
{
    delete ui;
}

プログラムを実行すると、次のようなウィンドウが表示されます。

3 つのコントロールが、指定された位置とサイズに従ってウィンドウ内で水平に配置されていることがわかります。これは、コントロールの絶対位置とサイズが指定されているためです。コントロールの位置とサイズは、ウィンドウのサイズは自動的に変更されます。次の図に示すように、ウィンドウにすべてのコントロールが表示されない場合があります。

ウィンドウサイズの変更に合わせてコントロールの位置とサイズを自動的に変更し、コントロールがウィンドウの変更に適応できるようにするために、Qt の水平レイアウトコントロール QHBoxLayout を使用します。QHBoxLayout は水平レイアウトコントロールです. QHBoxLayout に配置されたコントロールは自動的に水平方向に配置され, QHBoxLayout のサイズが変化すると自動的に変更されます. コードは次のとおりです:

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QLabel>       // 包含QLabel的头文件
#include <QLineEdit>    // 包含QLineEdit的头文件
#include <QPushButton>  // 包含QPushButton的头文件
#include <QHBoxLayout>  // 包含QHBoxLayout的头文件

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    // 标签控件
    QLabel *label = new QLabel;
    // 设置标签文本
    label->setText("Hello World");

    // 行输入控件
    QLineEdit *lineEdit = new QLineEdit;

    // 按钮控件
    QPushButton *pushButton = new QPushButton;
    // 设置按钮文本
    pushButton->setText("我是按钮");

    // 水平布局控件
    QHBoxLayout *hBoxLayout = new QHBoxLayout(this->centralWidget());
    hBoxLayout->addWidget(label);
    hBoxLayout->addWidget(lineEdit);
    hBoxLayout->addWidget(pushButton);
}

MainWindow::~MainWindow()
{
    delete ui;
}

プログラムを実行すると、次のようなウィンドウが表示されます。

3 つのコントロールがウィンドウ内で水平方向に分散され、ウィンドウの横座標を埋めていることがわかります.ウィンドウを縮小または拡大すると、コントロールのサイズと位置がウィンドウのサイズに合わせて変化します。ウィンドウサイズ効果に適応できます。

もちろん、水平方向のレイアウトコントロールがあれば、垂直方向のレイアウトコントロールもあります. 効果を確認するために、上記の QHBoxLayout を QVBoxLayout に変更してみましょう. コードは次のとおりです:

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QLabel>       // 包含QLabel的头文件
#include <QLineEdit>    // 包含QLineEdit的头文件
#include <QPushButton>  // 包含QPushButton的头文件
#include <QVBoxLayout>  // 包含QVBoxLayout的头文件

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    // 标签控件
    QLabel *label = new QLabel;
    // 设置标签文本
    label->setText("Hello World");

    // 行输入控件
    QLineEdit *lineEdit = new QLineEdit;

    // 按钮控件
    QPushButton *pushButton = new QPushButton;
    // 设置按钮文本
    pushButton->setText("我是按钮");

    // 垂直布局控件
    QVBoxLayout *vBoxLayout = new QVBoxLayout(this->centralWidget());
    vBoxLayout->addWidget(label);
    vBoxLayout->addWidget(lineEdit);
    vBoxLayout->addWidget(pushButton);
}

MainWindow::~MainWindow()
{
    delete ui;
}

プログラムを実行すると、次のようなウィンドウが表示されます。

3 つのコントロールが縦方向に分散していることがわかりますが、ウィンドウを縮小すると、ウィンドウの変化に合わせて 3 つのコントロールのサイズと位置が変化します。たとえば、ウィンドウを縮小した後の効果は次のとおりです。

窓がコンパクトになり、美しくなりましたか？

QHBoxLayout と QVBoxLayout は互いに入れ子にすることができます. これら 2 つのレイアウトコントロールに加えて、Qt にはグリッドレイアウトコントロール QGridLayout とフォームレイアウトコントロール QFormLayout もあります. 必要なときに自分で理解して使用することができます.

4 まとめ

この章では、コードを使用していくつかのコントロールを配置し、QHBoxLayout および QVBoxLayout レイアウトコントロールを使用してそれらを水平および垂直にレイアウトします。この章では、コードを記述してコントロールとレイアウトを配置します. Qtインターフェイスプログラミングの予備的な理解を得る. 複雑なインターフェイス設計には、Qtに付属のインターフェイス設計ソフトウェアであるQt Designerを使用して、インターフェイスを大幅に簡素化することをお勧めします.ワークロードは低く、設計ロジックは明確で維持しやすく、インターフェイスは直感的で、見たままの結果が得られます。ただし、コントロールのサイズと位置を動的に変更する場合は、コードを使用して直接プログラミングする必要があります。

Qt はコードを使用してコントロールとレイアウトを配置します

1. メインウィンドウの構成

2 コードを使用してコントロールを配置する

3 インターフェイスのレイアウトにコードを使用する

4 まとめ

おすすめ