このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

Archives Details

【Qt】Mac開発 ソートダイアログ (拡張するダイアログ)を作成

C++

2021.04.01

どもです。

前回の【Qt】Macの、Qt Creatorで Dialog GUI作成 続きとなる記事です。

作成

では、早速作成していきましょう。

今回作成するものですが、取り敢えず、以下の様なダイアログから、moreボタンを押すと、

この様に、項目が広がるダイアログ作成となります。

今回もこちらの書籍を元に作成していきます。

created by Rinker
¥4,180 (2021/11/29 22:09:41時点 Amazon調べ-詳細)

環境

  • 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つ並ぶ形に作成します。

1つ目の「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」「キャンセルボタン」を押すと、今はダイアログ自体が閉じてしまいますが、続きは次回ですかね。

ということで今回もこちらのオライリーの書籍を元に、拡張ソートダイアログを作成してみました。

created by Rinker
¥4,180 (2021/11/29 22:09:41時点 Amazon調べ-詳細)

ではではぁ。

またまたぁ。

Comment

Related Article

【Qt】Mac開発 ソートダイアログ (拡張するダイアログ)を作成

2021.04.01

【Qt】Macの、Qt Creatorで Dialog GUI作成

2020.12.29

【Qt】Macで、Qt Creatorをbrew installしてサクッと起動する。

2020.12.14

Macで、Qt5 開発 QPushButton、QSliderなどウィジェット作成

2020.12.13

Macで、Qt5をbrew installしてサクッと起動する。

2020.12.02

Webassembly用いて、SDL 2.0をブラウザでレンダリング

2020.08.10

MacOS Mojave (10.14.4)の Xcode に、過去のMacOSのSDKをインストール

2019.05.19

CMake インストール 使い方

2016.07.06

CATEGORY LIST

LATEST NEWS

単一ファイル毎に管理できる ファイルマネージャー CLI「coppeno」 v0.7.2リリース!

tool

2021.11.20

M1 Macで作る、ファミコンソフトプログラミング。 アセンブラでハローワールド編

Game

2021.11.08

う、動くぞ! M1 Mac(Big Sur)で PS2ソフトを遊ぶ。PCSX2 Mac版を起動

Game

2021.11.07

ゲオ 驚異の80%オフセール開催中! 中古ソフト大量購入!! まだ間に合う急げぇ〜!

Game

2021.10.24

【M1 Mac】dotnet ef ツールで、MySQLを scaffoldする。

C#

2021.10.17

『2Dスマホゲームにおける圧縮テクスチャ』『膨大になったDBを何とかする』9月30日(木)【オンライン開催イベント】

イベント

2021.09.24

バキバキ画面割れ、バッテリー膨張している iPhoneXを修理した話

iPhone

2021.09.05

Macのデータ復旧を簡単に! EaseUS Data Recovery Wizard for Mac Pro を使用してみた。

tool

2021.08.24

パーティション管理ソフト「MiniTool Partition Wizard」を使ってみた。

tool

2021.08.18

【2021】ゲオのサマーセール 980円以下のゲームソフトが半額!8月16日(月)まで。で購入したもの。

Game

2021.08.08

M1 Macで始める「ゼロからのOS自作入門」- 第1章

自作OS

2021.07.24

2021年6月 Amazonプライムデーで購入したもの。(今更)

イベント

2021.06.30

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US