見出し画像

Qt5再入門: Qt DesignerでNotes C APIコンバートシミュレーターダイアログを作る(その6/QLabelとQLineEdit)

今回は、Qtウィジェットのラベルとテキスト入力(一行)について紹介します。

ラベルとテキスト入力の設定

前回同様、ダイアログをQt Designerで開きます。

スクリーンショット 2021-09-10 7.50.23

※前回までのウィジェットは削除してあります。

左側にあるウィジェットペインの、「Input Widgets」カテゴリーに「Line Edit」が、「Display Widgets」カテゴリーに「Label」があるのがわかります。これらをドラッグして、ダイアログ上に持ってきてドロップします。

スクリーンショット 2021-09-10 7.52.26

スクリーンショット 2021-09-10 7.54.31

ラベルのプロパティにある、QLabelのtext欄をダブルクリックして、編集状態にします。

スクリーンショット 2021-09-10 7.57.35

テキストを削除して、空欄にします。

スクリーンショット 2021-09-10 7.59.02

なお、この動作は、エディタ上のQLabelをダブルクリックしても、text値を編集することができます。

コーディングなしでシグナル/スロット

続いて、シグナル/スロット接続をします。ここではテキスト入力に表示されるテキストを、そのままラベルに表示してみます。
これまでコード上でシグナル/スロット接続をしてきましたが、今回は、スロット側の関数に、QLabelにあるものがそのまま使えるので、Qt Designer上で接続してみます。
Qt Designerのシグナル/スロットエディタに移動します。画面上にシグナル/スロットエディタが表示されていない時は、メニューの「表示」から「シグナル/スロットエディタ」を選択すると、再表示できます。

スクリーンショット 2021-09-10 8.01.03

シグナル/スロットエディタのプラスアイコンをクリックします。

スクリーンショット 2021-09-10 8.02.44

すると、未定義のシグナル/スロット接続項目が表示されます。

発信者欄のところをクリックし、「lineEdit」を選択します。

スクリーンショット 2021-09-10 8.08.07

次に、シグナル欄をクリックし、「textChange(QString)」を選択します。

スクリーンショット 2021-09-10 8.06.28

これは、ウィジェットが持っているテキストが変更されるたびに送出されます。

続いて、受信者欄をクリックし、「label」を選択します。

スクリーンショット 2021-09-10 8.09.24

スロット欄から「setText(QString)」を選択します。

スクリーンショット 2021-09-10 8.10.40

これで、シグナル/スロット接続の処理は完了です。これだけなら、ノーコードで設定が済みました。

あとは、ラベルの横幅を広げ、中途半端に途切れて表示されないようにしておきます。

スクリーンショット 2021-09-10 8.13.42

テキスト入力も同様に幅を広げておきます。

スクリーンショット 2021-09-10 8.15.00

保存してQt Designerを終了し、Qt Creatorでコンパイルします。

デバッグ実行

では、どのように動作するのか、実際にデバッグ実行して確認してみます。

まとめ

C++での開発は敷居が高いイメージがあります。まあ、実際に取り組むとそういう場面にまあまあ出くわします。そんなC++でも、GUIの開発はそんなに難しくないレベルにしてくれるのがQtだと思います。そんなことが実感できるウィジェットの紹介になったと思います。


この記事が気に入ったらサポートをしてみませんか?