QT を使用してダイアログ ボックスを視覚的にデザインするための詳細な手順とコード

1. ダイアログボックスを作成する基本手順

  • 子ウィジェットの作成と初期化
  • 子ウィジェットをレイアウトに配置する
  • タブオーダーを設定する
  • 信号スロット接続を確立する
  • ダイアログ ボックスにカスタム スロットを実装する

まず、最初の 3 つのステップは ui ファイルを通じて直接実行され、残りの 2 つのステップはコードを通じて実装されます。

2. プロジェクト作成の詳細な手順

新しいプロジェクトを作成する

プロジェクトに名前を付けます

 

 クラスに名前を付け、基本クラスとして QDialog を選択します。

[ここで QDialog が選択されておらず、デフォルトの QMainWindow が選択されている場合、後で実行するときに setupUi 関数がエラーを報告します]

3. UI ビジュアル ダイアログ インターフェイスの設計と実装の詳細な手順

gotocelldialog.ui ファイルをダブルクリックして設計インターフェイスを開きます。左側はツールバー、右側は設計インターフェイスです。左側のコンポーネントをインターフェイスにドラッグするだけです。

まず、ラベル、行エディター、水平区切り記号、および 2 つのボタンをインターフェースにドラッグします。

次に、Label コンポーネントのテキストを次のように変更します —&Cell Location:

最初のボタンのプロパティを変更し、テキストを --OK に、objectName を --okButton に、enable プロパティを false に、デフォルトのプロパティを --true に変更します。

 

2 番目のボタンのプロパティを変更し、テキストを -Cancel に変更し、objectName を -cancelButton に変更します。

フォーム全体のタイトルと名前を変更します。空白の領域をクリックして、プロパティ セクションを確認します。

これでコンポーネントの属性設定は完了です。

このとき、インターフェイスは次のように表示されます。

次のステップでは、コンポーネントをバインドしてレイアウトを設計します。

lable コンポーネントを lineEdit コンポーネントにバインドし、左上隅の [編集] をクリックします - [仲間の編集] を選択します - Lable をクリックして赤い矢印を lineEdit に接続します - 左上隅の [編集] をクリックします - [ウィジェットの編集] を選択しますそれでおしまい

レイアウトをデザインする

ラベルとライン編集を同時に選択 - マウスの右ボタン - レイアウト - 水平レイアウト

次の 3 つのコンポーネントを同時に選択します - マウスの右ボタン - レイアウト - 水平レイアウト

フォーム内の空白を選択 - マウスの右ボタン - レイアウト - サイズを調整 - 希望のサイズに調整 - フォームの空白を選択 - マウスの右ボタン - レイアウト - 縦方向のレイアウト

完成したレイアウト設計の結果は次のとおりです。

 

タブオーダーを設定する

左上隅の「編集」をクリックし、「タブ順序の編集」を選択します。希望の順序に従って選択します。

4. ダイアログボックスの実装

①初期実装 - UIで設計されたフォームを使用し、QDialogオブジェクトを作成し、オブジェクトをフォームに渡し、実行します

main.cpp ファイルにコードを記述するだけです。

#include "gotocelldialog.h"

#include <QApplication>
#include<QDialog>
#include"ui_gotocelldialog.h"


int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    //定义窗体、创建QDialog对象、将对象传递给窗体【对话框能展示,但功能没有实现】
    Ui::GoToCellDialog ui;//定义该窗体
    QDialog *dialog=new QDialog;//创建一个QDialog对象
    ui.setupUi(dialog);//把QDialog对象传递给setupUi函数
    dialog->show()
    return a.exec();
}

このとき、以前に設計したインターフェイスが表示されますが、ボタン機能やラインエディタの制限は実装されていません。

②高度な実装 - UiとQDialogによって初期化されたGoToCellDialogクラスを継承する新しいクラスを定義し、シグナルとスロットを使用して関数を実装します

 gotocelldialog.h コード [新しいクラス定義]

#ifndef GOTOCELLDIALOG_H
#define GOTOCELLDIALOG_H

#include<QDialog>
#include"ui_gotocelldialog.h"

//创建一个新类,让此类同时从QDialog和Ui::GoToCellDialog中继承出来,并且实现前面所涉及的窗体中所需要实现的功能
class GoToCellDialog : public QDialog,public Ui::GoToCellDialog
{
    Q_OBJECT

public:
    GoToCellDialog(QWidget *parent = nullptr);//构造函数
    ~GoToCellDialog();//析构函数
private slots:
    void on_lineEdit_textChange();//实现对OK按钮的启用/禁用
private:
    Ui::GoToCellDialog *ui;
};
#endif // GOTOCELLDIALOG_H

gotocelldialog.cpp コード [シグナルとスロットのバインディングと実装]

#include<QtGui>
#include "gotocelldialog.h"

//构造函数的实现
GoToCellDialog::GoToCellDialog(QWidget *parent)
    : QDialog(parent)
{
    setupUi(this);//初始化窗体

    //设置一个检验器来限制输入的范围  QRegExpValidator内置检验器后面带一个正则表达式
    QRegExp regExp("[A-Za-z][1-9][0-9]{0,2}");//正则表达式
    //允许一个大写/小写字母,后面跟着一个范围为1-9的数字,后面再跟一个0个、1个或者2个0-9的数字
    lineEdit->setValidator(new QRegExpValidator(regExp,this));

    //第一个connect已经通过setupUi自动建立了
    //因为setupUi()函数会自动将那些符合on_objectName_signalName()命名惯例的任意槽与其相应的objectName的signalName()信号连接到一起
    //connect(lineEdit,SIGNAL(textChange(const QString &)),this,SLOT(on_lineEdit_textChange()));
    //accept()槽是QDialog的,其可以将对话框返回的结果变量设置为QDialog::Accept(其值等于1)
    connect(okButton,SIGNAL(clicked()),this,SLOT(accept()));//当点击OK按钮时,触发accept()槽
    //reject()槽是QDialog的,其可以将对话框的值设置为QDialog::Reject(其值等于0)
    connect(cancelButton,SIGNAL(clicked()),this,SLOT(reject()));//当点击Cancel按钮时,触发reject()槽
    //可以利用对话框的结果变量判断用户是否单击了OK按钮
}

//实现对OK按钮的启用/禁用
void GoToCellDialog::on_lineEdit_textChange(){
    //根据行编辑器中是否包含了有效的单元格位置坐标,从而实现对OK按钮的启用或者禁用
    //hasAcceptableInput()用于判断行编辑器中内容的有效性  有效则禁用,无效则启用
    okButton->setEnabled(lineEdit->hasAcceptableInput());
}

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

main.cpp コード

#include "gotocelldialog.h"

#include <QApplication>
#include<QDialog>
#include"ui_gotocelldialog.h"


int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    //进阶想法——定义新类继承Ui初始化的类还有QDialog并利用信号-槽实现功能
    GoToCellDialog *dialog=new GoToCellDialog;
    dialog->show();
    return a.exec();
}

操作結果:

ラインエディターのテキストが入力要件を満たしていない場合、入力は許可されず、「OK」ボタンは無効になり、ラインエディターの内容が入力要件を満たしている場合、「OK」ボタンは有効になります。

 

おすすめ

転載: blog.csdn.net/m0_59800431/article/details/132276961