【Qt】Mac開発 ソートダイアログ （拡張するダイアログ）を作成
2021.04.01
この記事は最終更新日から1年以上が経過しています。
どもです。
前回の【Qt】Macの、Qt Creatorで Dialog GUI作成 続きとなる記事です。
作成
では、早速作成していきましょう。
今回作成するものですが、取り敢えず、以下の様なダイアログから、moreボタンを押すと、
この様に、項目が広がるダイアログ作成となります。
今回もこちらの書籍を元に作成していきます。
環境
- Mac mini (M1, 2020)
- Mac OS 11.2.3
- Apple clang version 12.0.0
- Qt 5.15.2 (Clang 11.0 (Apple), 64 bit)
- Qt Creator 4.13.3
Qt Creatorで「新規プロジェクト」選択。
テンプレートは、Application > Qt Widgets Applicationを選択。
プロジェクトパスは、適当に、「sort」とかにしておきます。
ビルドシステムは「qmake」を選択。
class名は、「SortDialog」とします。
ヘッダーファイル名、ソースファイルは以下の通り。
と言う感じで作成すると、色々ファイルが生成されますので、sortdialog.uiをダブルクリックして、Qt designerを起動します。
まず、使用するのは、「GroupBox」となりますので、
メニューからドラッグ&ドロップでダイアログの方に放り投げます。
「GroupBox」に「Label」「Combo Box」「Horizontal Spacer」などを放り投げ
以下のようにレイアウト。「Label」のテキストも「Column」「Order」とそれぞれ設定します。
最後に、「GroupBox」を選択し、「格子状に並べる」をクリックしレイアウトを調整します。
続いて、このように「OK」「Cancel」「More」のボタンを設置していきます。
使用するウィジェットは、「Push Button」となります。
ボタンを配置、テキスト変更したら、ボタンとスペーサーそれぞれaltキーなど押しながら全て選択そた状態とします。
そこで、Vertical Layoutのレイアウトを適応します。
レイアウト＞サイズ調整を選択します。
取り敢えず、以下のように出来ればOKです。
続いて、2番目と3番目のソート列を作成していきます。
ソート列の拡張
複数ソート列を作成するには、最初に作成した「GroupBox」を選択し、コピー＆ペーストを実行。
以下の様に全部で3つ並ぶ形に作成します。
１つ目の「GroupBox」の下に、スペーサーを挿入し、ダイアログ全体を選択しレイアウト「格子状に並べる」を実行。
レイアウト＞サイズ調整を選択します。
以下の様にレイアウトが行えれば取り敢えず完成。
それでは、ダイアログをビルドして実行してみます。
ソートダイアログが、意図した形で表示されました。
シグナル・スロットの設定
続いて、シグナル・スロットの設定を行っていきます。
メニュー＞編集＞シグナル/スロットの編集
を選択します。
すると、ウィジェットの編集画面が以下の様に変更されますので、「OK」ボタンをクリックし選択しクリックしたまま、「GroupBox」の下辺りで離します。
すると、以下の様にダイアログが表示するので、clicked() → accept() を選択。
同じ要領で、Cancel ボタンも設定します。
こちらは、clicked() → reject() を選択。
その後、「More」ボタンも設定していきます。
クリックを離す場所は、2つ目の「GroupBox」の Secondary Keyと3つ目の「GroupBox」の Tertiary Keyとなります。
設定するシグナル・スロットは、toggled(bool)→setVisible(bool)となります。
こちら、「QWidgetから継承したシグナルとスロットを表示する」にチェックが入っていないと表示しないので注意が必要となります。
この様に設定できれば、シグナルとスロットの設定は完了。
ソースコード
いよいよソースコードを実装していきます。
ここまで、ノーコードで作成できるのもQt Creatorあってこそですね。
ヘッダーファイルには、publicに以下の「setColumnRange」関数を追加します。
sortdialog.h
void setColumnRange(QChar first, QChar last);
続いて、sortdialog.cppの実行ファイルの編集をしていきます。
ダイアログの2番目、3番目を隠すため、SortDialog::SortDialog(QWidget *parent)のコンストラクタにて、ui->secondaryGroupBox->hide();のように、hide関数を以下の様に追加します。
sortdialog.cpp
ui->secondaryGroupBox->hide();
ui->teritiaryGroupBox->hide();
layout()->setSizeConstraint(QLayout::SetFixedSize);
setColumnRange('A', 'Z');
あとは、SortDialog::setColumnRangeメソッドの作成ですね。
こちらは主に、コンボボックスの調整となりますね。
void SortDialog::setColumnRange(QChar first, QChar last)
{
ui->primaryColumnCombo->clear();
ui->secondaryColumnCombo->clear();
ui->teritiaryColumnCombo->clear();
ui->secondaryColumnCombo->addItem(tr("None"));
ui->teritiaryColumnCombo->addItem(tr("None"));
ui->primaryColumnCombo->setMinimumSize(
ui->secondaryColumnCombo->sizeHint());
QChar ch = first;
while (ch <= last) { ui->primaryColumnCombo->addItem(QString(ch));
ui->secondaryColumnCombo->addItem(QString(ch));
ui->teritiaryColumnCombo->addItem(QString(ch));
ch = ch.unicode() + 1;
}
}
ui->secondaryColumnCombo->addItem(tr("None"));
ui->teritiaryColumnCombo->addItem(tr("None"));
ui->primaryColumnCombo->setMinimumSize(
ui->secondaryColumnCombo->sizeHint());
この辺は主に、コンボボックスのサイズ調整の為で、while (ch <= last) { からは、A~Zの文字列をコンボボックスの選択肢で生成している流れになります。
という事で、ここまでできれば一旦完成ですね。
動作確認
それでは、動作確認を行っていきます。
最初は以下のようなダイアログ表示で、
「More」ボタン押下で、以下の様にダイアログが変化するかと思います。
また、開いた状態で「More」ボタン押すと元に戻るように、トグルボタンとなっているのが確認できます。
「OK」「キャンセルボタン」を押すと、今はダイアログ自体が閉じてしまいますが、続きは次回ですかね。
ということで今回もこちらのオライリーの書籍を元に、拡張ソートダイアログを作成してみました。
ではではぁ。
またまたぁ。
