Linux Mint 21 – Qt Creatorでですくとっぷあぷりをつくってみた
前回の続きである。プロジェクトファイルは作成できたので、簡単なデスクトップアプリを作成してみよう。作成するアプリは、ボタンをクリックしたら、“Hello, World!”と表示させるだけのものである。これは、お決まりの約束みたいなものだ。どのプログラミング入門でも、必ずといってよいほどコードが掲載されている。ただし、今回は、GUIなので、“Hello, World!”と出力させることはできないので、LineEditコンポーネントに文字をセットしてみることにする。
GUIの作成
プロジェクト欄にある「mainwindow.ui」をダブルクリックして、GUI編集モードにする。
Windowsが表示されている。このウィンドウにコンポーネントを配置していく。コンポーネントは、左側のパネルのカテゴリーの中から選択して配置していく、なお、Visual Studioのように、整列させるためのガイドラインは表示されない。整列するには右側のプロパティgeometryから座標を入力して配置する。
Windowsのタイトルとサイズを変更
このままだと、大きすぎるので適当なサイズに変更する。
| プロパティ名 | 内容 | 値 |
|---|---|---|
| geometry | 幅 | 320 |
| 高さ | 200 | |
| windowTitle | Hello |
コンポーネントの配置
配置する前に、画面下部の部分（グリッドが表示されていない）を右クリックして、ステータスバーおよびメニューバー（ここに入力部分）を削除しておこう。
配置するコンポーネントは３つだ。PushButtonが２つ、LineEditが１つである。左側のカテゴリーのButtonsおよびInput WidgetからPushButtonおよびLineEditをドラッグして配置する。
| コンポーネント名 | オブジェクト名 | プロパティ | 内容 | 値 |
|---|---|---|---|---|
| PushButton | DisplayButton | geometry | X | 140 |
| Y | 170 | |||
| text | 表示 | |||
| PushButton_2 | CloseButton | geometry | X | 230 |
| Y | 170 | |||
| text | 閉じる | |||
| LineEdit | MessageEdit | geometry | X | 10 |
| Y | 20 | |||
| readOnly | True(チェックを入れる) |
配置してプロパティを設定し終わったのが、以下の画面である。
「ビルド(B)」→「実行」を選択する。エラーが表示されなければ、以下のように表示されるはずだ。
ウィンドウはタイトルバーを除いたサイズであり、メニューバーを配置したまま、コンポーネントを配置すると、ボタンとウィンドウ下部に隙間ができてしまう。これを解消するには、あらかじめメニューバーを削除しておいてコンポーネントを配置し、あとからメニューバーを追加するとよい。ちょっとした工夫が必要だ。
イベントの実装
２つのボタンにイベントを実装する。最初に[閉じる]ボタンにイベントを実装しよう。ボタン上で右クリックして、「スロットへ移動…」を選択する。
「Clicked()」が選択されていることを確認して、[OK]をクリックする。コード記述画面になるので、以下のコードを記述しよう。
exit(0);
これは、[閉じる]ボタンがクリックされたら、ウィンドウを閉じるという動作をするという意味になる。
ウィンドウを閉じるために、コードを記述したが、この程度であればコードを記述しなくても実装することができる。デザイン画面で、上部にある小さなアイコンの左から2つ目のアイコン（シグナル/スロットの編集）をクリックする。クリックしたら[閉じる]ボタンの上にマウスを重ね、ボタンを押したまま、適当な位置までドラッグする。
次のようなダイアログが表示されるので、左側の枠から“Clicked()”を選択し、“QWidget から継承したシグナルとスロットを表示する”にチェックを入れる。右側の枠から“Close()”を選択して[OK]をクリックすればよい。
シグナル/スロットは非常に便利な機能だが、全てに対応していない。
次は[表示]ボタンにコードを記述しよう。
ui->MassageEdit->setText("Hello, World!");コードを記述したら、実行してみて、[表示]ボタンをクリックして、LineEdit内に“Hello, World!”が表示されたら、OKである。
終わりだよ
これで終わりである。GUIデスクトップアプリを作るのは、なかなか楽しいものである。今やWebへシフトしているが、GUIツールを作成するには、こういったRADツールがあると便利なのである。今回作成したのは、非常にシンプルなアプリだが、様々なコンポーネントと組み合わせて、実用性のアプリを作ることができるのである。
Qt Creatorには、Androidアプリ（要Android Studio）も作成できるようではある。また、C/C++だけではなく、Pythonでもアプリは作れるようなので、興味を持ったら挑戦してみるとよい。
追記 (2022/09/14)
hello-projectとしてGitHubにアップロードしました。ただし、少し改変してあります。
改変内容：
・クリアボタンの追加（シグナル/スロット接続）
・LineEditのXを10→20に変更
