【C++でアプリ開発】Qtを使ってGUIの電卓アプリを作成①(Push BottunやText Viewの使用)

C++

【対象の方】
・Qtを使用して簡単な電卓を作成したい
・Push BottunやText Viewの使い方を学びたい
・言語はC++

Qtを使ってGUIの電卓アプリを作成①

簡単な電卓の作成を通じてPush ButtonやText Viewの使用方法をご紹介します。完成した電卓は以下のものです。

【注記】
今回は簡略化のために「1+1+1」のような計算は禁止して「1+1=」のように「数値」→「演算子」→「数値」→「=」と入力する電卓を作成します。

開発環境

・OS : Windows10 64bit
・Qt Creator 4.14.2/Based on Qt 5.15.2 (MSVC 2019, 64 bit)

プロジェクトの作成

ファイル→『ファイル/プロジェクトの新規作成』もしくはプロジェクトの『+New』を選択

プロジェクトの『Application(Qt)』→『Qt Widgets Application』→『選択…』を進みます。『プロジェクトパス』の名前を今回は『calculator』とします(お好みで構いません)

その後は全てデフォルトで『次へ』で進み、『完了』まで進んでください。

プロジェクトエクスプローラーの『mainwindow.ui』を開いてください。

Buttonsの『Push Button』を16個ドラッグアンドドロップで配置します。きっちりと配置する必要はありません。おおまかに以下のように配置します。

左上から左クリックしたまま右下まで移動して全てを選択してから左クリックを離します。

全てのPush Buttonを選択した状態で『格子状に並べる』をクリックします。下の図と違う配置で整列した場合はずれたPush Buttonをドラッグアンドドロップして配置します。

Push Buttonを1個ずつダブルクリックして表記を変更します。

以下のように16個の表記を変更します。

右のオブジェクトの欄が縮んでいる場合は右に広げてください。

Push Bottunを選択すると右の欄の対応するオブジェクトが反応します。

オブジェクトをダブルクリックして変更しますが、まず注意点をご紹介します。

※注意 同じオブジェクト名は付けられません。例えばすでに別のボタンに『pushButton_0』が割り当てられている状態で重複して別のボタンをpushButton_0にすることはできません。一旦、仮でpushButton_Aなどにするなど工夫が必要になります。

次のように全てを変更してください。
ボタン:オブジェクト
1:pushButton_1
2:pushButton_2
3:pushButton_3
4:pushButton_4
5:pushButton_5
6:pushButton_6
7:pushButton_7
8:pushButton_8
9:pushButton_9
0:pushButton_0
+ :pushButton_plus
– :pushButton_minus
× :pushButton_mult
÷ :pushButton_div
DEL:pushButton_del
= :pushButton_equal
※誤記があると後のソースコードをコピペしても動作できませんのでご注意ください

1を選択して「右クリック→スロットへ移動…」を選択してください。

『released()』を選択して『OK』をクリックして下さい。

『mainwindow.cpp』に『void MainWindow::on_pushButton_1_released()』が自動で追加されます。『mainwindow.ui』に戻り、同様に全てのPushBottonでこの操作を行います。

『Label』をドラッグアンドドロップして配置します。このText Labelは入力した数値や計算結果を表示します。

配置したLabelのオブジェクトを『Label_view』に変更します。

Labelを選択した状態で『alignment→横方向』を右端揃えに変更してください。

アプリの外形を調整します(これはしなくても動作には影響ありません)

『mainwindow.cpp』を開いて以下のソースコードをコピペしてください。

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QString>

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
}

MainWindow::~MainWindow()
{
    delete ui;
}

QString view = "0";             //表示するための変数
QString func;                     //演算を格納する変数
QString result_memory = "0";    //結果を一時的に格納する変数
bool func_flag = false;           //演算のどれかを押されたら変化するフラグ

int result;         //数値の計算結果

//1を押されたときの処理
void MainWindow::on_pushButton_1_released()
{
    if ((view == "0") || (func_flag == true)){
        view = "1";
        func_flag = false;
    } else {
        view += "1";
    }
    ui->label_view->setText(view);
}

//2を押されたときの処理
void MainWindow::on_pushButton_2_released()
{
    if ((view == "0") || (func_flag == true)){
        view = "2";
        func_flag = false;
    } else {
        view += "2";
    }
    ui->label_view->setText(view);
}

//3を押されたときの処理
void MainWindow::on_pushButton_3_released()
{
    if ((view == "0") || (func_flag == true)){
        view = "3";
        func_flag = false;
    } else {
        view += "3";
    }
    ui->label_view->setText(view);
}

//4を押されたときの処理
void MainWindow::on_pushButton_4_released()
{
    if ((view == "0") || (func_flag == true)){
        view = "4";
        func_flag = false;
    } else {
        view += "4";
    }
    ui->label_view->setText(view);
}

//4を押されたときの処理
void MainWindow::on_pushButton_5_released()
{
    if ((view == "0") || (func_flag == true)){
        view = "5";
        func_flag = false;
    } else {
        view += "5";
    }
    ui->label_view->setText(view);
}

//6を押されたときの処理
void MainWindow::on_pushButton_6_released()
{
    if ((view == "0") || (func_flag == true)){
        view = "6";
        func_flag = false;
    } else {
        view += "6";
    }
    ui->label_view->setText(view);
}

//7を押されたときの処理
void MainWindow::on_pushButton_7_released()
{
    if ((view == "0") || (func_flag == true)){
        view = "7";
        func_flag = false;
    } else {
        view += "7";
    }
    ui->label_view->setText(view);
}

//8を押されたときの処理
void MainWindow::on_pushButton_8_released()
{
    if ((view == "0") || (func_flag == true)){
        view = "8";
        func_flag = false;
    } else {
        view += "8";
    }
    ui->label_view->setText(view);
}

//9を押されたときの処理
void MainWindow::on_pushButton_9_released()
{
    if ((view == "0") || (func_flag == true)){
        view = "9";
        func_flag = false;
    } else {
        view += "9";
    }
    ui->label_view->setText(view);
}

//0を押されたときの処理
void MainWindow::on_pushButton_0_released()
{
    if (view == "0"){
        view = "0";
    } else {
        view += "0";
    }
    ui->label_view->setText(view);
}

//+を押されたときの処理
void MainWindow::on_pushButton_plus_released()
{
    func = "+";

    result_memory = view;

    func_flag = true;
}

//―を押されたときの処理
void MainWindow::on_pushButton_minus_released()
{
    func = "-";

    result_memory = view;

    func_flag = true;
}

//×を押されたときの処理
void MainWindow::on_pushButton_mult_released()
{
    func = "*";
    result_memory = view;

    func_flag = true;
}

//÷を押されたときの処理
void MainWindow::on_pushButton_div_released()
{
    func = "/";
    result_memory = view;

    func_flag = true;
}

//=を押されたときの処理
void MainWindow::on_pushButton_equal_released()
{
    if (func == "+"){
        result  = result_memory.toInt() + view.toInt();

        view = QString::number(result);
        ui->label_view->setText(view);
        result_memory = view;

    } else if (func == "-"){
        result  = result_memory.toInt() - view.toInt();

        view = QString::number(result);
        ui->label_view->setText(view);
        result_memory = view;

    } else if (func == "*"){
        result  = result_memory.toInt() * view.toInt();

        view = QString::number(result);
        ui->label_view->setText(view);
        result_memory = view;

    } else if (func == "/"){
        result  = result_memory.toInt() / view.toInt();

        view = QString::number(result);
        ui->label_view->setText(view);
        result_memory = view;
    }
}

//DELを押されたときの処理
void MainWindow::on_pushButton_del_released()
{
    result_memory = "0";
    view = "0";
    ui->label_view->setText(view);
}

ビルドおよび動作確認

『実行』を選択してください。

『Save All』を選択してください。

簡易的なGUI電卓アプリの完成です。