2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

QtでHello world!

Last updated at Posted at 2022-12-15

はじめに

QtのGUIで「Hello world」を表示してみたいと思います。
PushBottonをクリックすると、「Hello world」をラベルに表示させます。
Qtのインストールは、
こちら
を参照してください

Qt(Qt Creator)の起動

「アプリケーションを表示する」をクリックします。
一覧から「Qt Creator」を見つけ、クリックして起動します。

最初の設定

Qt用のディレクトリの作成

ホームディレクトリの下に、qtというディレクトリを作成します(各人の好みで構いません)

Qt Creatorの設定

「ヘルプ」→「プラグインについて」をクリックします。
ClangCodeModelのチェックを外します。
下記はインストール状態での設定
Screenshot from 2022-12-15 13-23-46.png
チェックを外して、「閉じる」ボタンをクリックします。
クリック後、ダイアログが表示しますので、「Restart Now」をクリックします。
要は設定を変更したので、Qtの再起動が必要になります。

プロジェクトの作成

New

下の赤枠の「+ New」ボタンをクリックします。
Screenshot from 2022-12-15 13-29-18.png

新しいプロジェクト

「Qt Widgets Application」になっていることを確認して、「Choose...」をクリックします。
Screenshot from 2022-12-15 13-30-52.png

プロジェクトパス

名前が無題と赤くなっていますので、「HelloWorld」に変更します(各人の好みで構いません)
パスは先ほどホームディレクトリに作成した「qt」を指定し、「次へ」をクリックします。
Screenshot from 2022-12-15 13-39-22.png

ビルドシステムの定義

次へをクリックします。
Screenshot from 2022-12-15 13-42-51.png

Class Information

今回はデフォルトのままにしますので、「次へ」をクリックします。
Screenshot from 2022-12-15 13-45-22.png

Translation File

言語は日本語を選択します。
「Language:」の▼をクリックして、キーボードの「j」を押下して、Enterすると早いです。
「次へ」をクリックします。
Screenshot from 2022-12-15 13-48-35.png

キットの選択

次へをクリックします。
Screenshot from 2022-12-15 13-49-58.png

プロジェクト管理

完了をクリックします。
Screenshot from 2022-12-15 13-50-49.png

main.cppの表示

上記まで完了しますと、main.cppが表示されます。
ここからPushButton等を作成します。
Screenshot from 2022-12-15 13-51-54.png

ボタンとラベルを配置

フォームを開く

左にある「Forms」をダブルクリックします。
Screenshot from 2022-12-15 13-51-54_2.png
「mainwindow.ui」が表示します。
Screenshot from 2022-12-15 13-58-26.png
「mainwindow.ui」をダブルクリックしますと、下記のように表示します。
Screenshot from 2022-12-15 14-00-10.png

ボタンの配置

左側にある「PushBotton」を中央へドラッグアンドドロップします。
位置は適当で構いません。
Screenshot from 2022-12-15 14-00-10_2.png

ラベルの配置

左側にある「Label」を中央へドラッグアンドドロップします。
位置は適当で構いません。
Screenshot from 2022-12-15 14-03-19.png

ボタン、ラベルの配置後

Screenshot from 2022-12-15 14-05-20.png

イベントを発生させる

スロットへ移動

「PushButton」をクリックさせてイベントを発生させたいので、「PushButton」を右クリックして、スロットへ移動をクリックします。

クリック選択

「clicked()」をクリックして、「OK」をクリックします。
Screenshot from 2022-12-15 14-09-44.png

メンバの自動登録

上記のOKをクリックしますと、mainwindow.cppに「void MainWindow::on_pushButton_clicked()」のメンバ関数が登録されます。
mainwindow.hにも登録されます。

mainwinodw.cpp
void MainWindow::on_pushButton_clicked()
{
    
}
mainwindow.h
private slots:
    void on_pushButton_clicked();

実装

ラベルへ「Hello World」を表示させる

先程作成された、void MainWindow::on_pushButton_clicked()」に以下を追記します。

mainwinodw.cpp
void MainWindow::on_pushButton_clicked()
{
    ui->label->setText("Hello World");
}

build&run

左下の「実行」をクリックします。
Screenshot from 2022-12-15 14-17-21.png
保存していなければ、下記のダイアログが表示します。
面倒ですので、「ビルド前にすべてのファイルを保存するにチェックを入れたほうが楽です。
Screenshot from 2022-12-15 14-19-37.png

表示エラーが無ければ、下記の画面が表示します。

Screenshot from 2022-12-15 14-21-56.png

PushButtonをクリックしてみる

さぁいよいよ待ちに待ったボタンをクリックします。
画面に表示している「PushButton」をクリックしてみてください。

クリック後の表示

ラベルの幅が狭くてすべて表示されておりませんが、ラベルの表示が、「Text Label」から「Hello Wor」に変わったと思います。
ラベルの幅を変えてみて全文表示するか試してください。
Screenshot from 2022-12-15 14-24-02.png

ラベルの幅を修正

ラベルの幅が「55」でしたので「80」にしてみました。
Screenshot from 2022-12-15 14-28-11.png

再実行

PushButtonをクリックすると、今度は「Hello World」のすべてが表示しました。
Screenshot from 2022-12-15 14-28-56.png

まとめ

Visual Studioしか使ったことがない人は、Qtに慣れるまで大変だと思いますが、慣れれば実装の考え方は変わらないと私は思います。

おまけ

WindowsからSSHでUbuntuに入れるのでしたら、TeraTermでbuild、sambaでソース修正することもできます。

2
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?