QT基础练手小程序-简单计算器设计（附带源码，解析）

用qt设计一个计算器的小程序是十分新手来练习的，在这里来教大家怎么实现一个最最简单的四则运算计算器。

第一步

1.首先，我觉得我们应该构思出来我们想要的计算机具有哪些功能，大体布局，这是一个简单的小程序例子，所以我就不考虑复杂的功能了，可能存在很多bug。

2.再简单的计算器，四则运算应该还是具备的，+，-，*，/，然后再来一个等于，一个清除

3.关于屏幕上应该具有0-9十个数字，加减乘除，等于，清除最后带上一个显示文本框一共17个按键

第二步

1.既然我们已经想好了有什么样的控件，那我们首先声明出来未来需要的控件

    QLineEdit *le_lcd;         //设置一个单行文本输入框
    QPushButton *bt_num[10];   //设置1，2，3...9，0；十个键位，单独new出10个按键来，对我们程序员来说是很傻的做法，怎么简便怎么来，所以我们用指针数组来实现
    QPushButton *bt_add;        //设置一个+法按键
    QPushButton *bt_sub;        //设置一个—法按键
    QPushButton *bt_mul;        //设置一个乘法按键
    QPushButton *bt_div;        //设置一个除法按键
    QPushButton *bt_calc;        //设置一个确认等于按键
    QPushButton *bt_chop;        //设置清除一个字符按键

第三步

1.然后我们应该把声明出的控件给new出来

 le_lcd = new QLineEdit;
    bt_chop = new QPushButton("<");

    for(int i=0; i<10; i++)
        bt_num[i] = new QPushButton(QString::number(i));

    bt_add = new QPushButton("+");
    bt_sub = new QPushButton("-");
    bt_mul = new QPushButton("*");
    bt_div = new QPushButton("/");
    bt_calc = new QPushButton("=");

第四步

控件已经准备完毕，有了声明和空间，现在我们来进行这些控件的布局

为了帮助大家了解布局，我不会只用一种布局

 QHBoxLayout *hbox = new QHBoxLayout;   //水平布局按键
    hbox->addWidget(le_lcd);
    hbox->addWidget(bt_chop);
    QGridLayout *gbox = new QGridLayout;    //网格布局按键
    int i = 0;
    for(int y=0; y<3; y++)
        for(int x=0; x<3; x++)
            gbox->addWidget(bt_num[i++], y, x);
    gbox->addWidget(bt_num[9],3,0);
    gbox->addWidget(bt_add, 0, 3);
    gbox->addWidget(bt_sub, 1, 3);
    gbox->addWidget(bt_mul, 2, 3);
    gbox->addWidget(bt_div, 3, 1);
    gbox->addWidget(bt_calc, 3, 2, 1, 2);
    QVBoxLayout *mainbox = new QVBoxLayout;     //垂直布局按键
    mainbox->addLayout(hbox);
    mainbox->addLayout(gbox);
    setLayout(mainbox);   //这里的意思是，整体是一个垂直布局，mainbox里面装了前面两个布局

第五步

设置槽函数声明

   public slots:
    void num_pressed(void); //按键槽函数
    void del_num(void); //删除一个输入
    void get_op(void);  //运算符按键槽
    void calculate(); //计算槽

第六步

设置前后台相关联的信号与槽

for(int i=0; i<10; i++)
    connect(bt_num[i], SIGNAL(clicked(bool)), this, SLOT(num_pressed()));
    connect(bt_chop, SIGNAL(clicked(bool)), this, SLOT(del_num()));
    connect(bt_add, SIGNAL(clicked(bool)), this, SLOT(get_op()));
    connect(bt_sub, SIGNAL(clicked(bool)), this, SLOT(get_op()));
    connect(bt_mul, SIGNAL(clicked(bool)), this, SLOT(get_op()));
    connect(bt_div, SIGNAL(clicked(bool)), this, SLOT(get_op()));
    connect(bt_calc, SIGNAL(clicked(bool)), this, SLOT(calculate()));

第七步

槽函数具体实现

void Widget::del_num()                        //删除一个输入
{
    QString str = le_lcd->text();
    str.chop(1);
    le_lcd->setText(str);
}
                                                    //运算符按键槽
void Widget::get_op()                                  
{
    //1. 提取按键
    QPushButton *xbt = static_cast<QPushButton*>( sender() );
    //2. 保存符号
    op = xbt->text().toStdString().c_str()[0];
    //3. 提取第一个运算数
    data1 = le_lcd->text().toInt();
    le_lcd->clear();
}

void Widget::calculate()                    //计算槽
{
    //0. 提取data2
    data2 = le_lcd->text().toInt();
    //1. 计算
    int answer;
    switch (op) {
    case '+':
        answer = data1 + data2;
        break;
    case '-':
        answer = data1 - data2;
        break;
    case '*':
        answer = data1 * data2;
        break;
    case '/':
        answer = data1 / data2;
        break;
    default:
        break;
    }
    //2. 显示
    le_lcd->setText(QString::number(answer));
}

void Widget::num_pressed(void)                //运算符按键槽
{
    //1. 提取按键
    QPushButton *xbt = static_cast<QPushButton*>( sender() );
    //2. 显示数据
    le_lcd->setText(le_lcd->text().append(xbt->text()));
}

第八步

返回去在头文件声明那里定义我们计算用到的东西

    char op;
    int data1;
    int data2;

第九步

美化一下

//5.美化（QSS）
    this->setStyleSheet("QPushButton{"
                          "color:red;"
                        "background-color:rgb(8,189,253);"
                         "border-radius:3px;"

                         "};");

完整代码

widget.h

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QPushButton>
#include <QLineEdit>

class Widget : public QWidget
{
    Q_OBJECT
public slots:
    void num_pressed(void); //按键槽函数
    void del_num(void); //删除一个输入
    void get_op(void);  //运算符按键槽
    void calculate(); //计算槽


public:
    Widget(QWidget *parent = 0);
    ~Widget();

    //1. 申明出未来需要的控件
    QLineEdit *le_lcd;
    QPushButton *bt_num[10];
    QPushButton *bt_add;
    QPushButton *bt_sub;
    QPushButton *bt_mul;
    QPushButton *bt_div;
    QPushButton *bt_calc;
    QPushButton *bt_chop;

    char op;
    int data1;
    int data2;
};

#endif // WIDGET_H

widget.cpp

#include "widget.h"
#include <QHBoxLayout>
#include <QVBoxLayout>
#include <QGridLayout>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
{


    //2. 将控件都new出来
    le_lcd = new QLineEdit;
    bt_chop = new QPushButton("<");

    for(int i=0; i<10; i++)
        bt_num[i] = new QPushButton(QString::number(i));

    bt_add = new QPushButton("+");
    bt_sub = new QPushButton("-");
    bt_mul = new QPushButton("*");
    bt_div = new QPushButton("/");
    bt_calc = new QPushButton("=");

    //3. 布局
    QHBoxLayout *hbox = new QHBoxLayout;
    hbox->addWidget(le_lcd);
    hbox->addWidget(bt_chop);
    QGridLayout *gbox = new QGridLayout;
    int i = 0;
    for(int y=0; y<3; y++)
        for(int x=0; x<3; x++)
            gbox->addWidget(bt_num[i++], y, x);
    gbox->addWidget(bt_num[9],3,0);
    gbox->addWidget(bt_add, 0, 3);
    gbox->addWidget(bt_sub, 1, 3);
    gbox->addWidget(bt_mul, 2, 3);
    gbox->addWidget(bt_div, 3, 1);
    gbox->addWidget(bt_calc, 3, 2, 1, 2);
    QVBoxLayout *mainbox = new QVBoxLayout;
    mainbox->addLayout(hbox);
    mainbox->addLayout(gbox);
    setLayout(mainbox);


    //4. 前后台关联
    for(int i=0; i<10; i++)
    connect(bt_num[i], SIGNAL(clicked(bool)), this, SLOT(num_pressed()));
    connect(bt_chop, SIGNAL(clicked(bool)), this, SLOT(del_num()));
    connect(bt_add, SIGNAL(clicked(bool)), this, SLOT(get_op()));
    connect(bt_sub, SIGNAL(clicked(bool)), this, SLOT(get_op()));
    connect(bt_mul, SIGNAL(clicked(bool)), this, SLOT(get_op()));
    connect(bt_div, SIGNAL(clicked(bool)), this, SLOT(get_op()));
    connect(bt_calc, SIGNAL(clicked(bool)), this, SLOT(calculate()));
    //5.美化（QSS）
   // this->setStyleSheet("QPushButton{"
     //                      "color:red;"
      //                     "background-color:rgb(8,189,253);"
       //                    "border-radius:3px;"

              //             "};");
}

void Widget::del_num()
{
    QString str = le_lcd->text();
    str.chop(1);
    le_lcd->setText(str);
}

void Widget::get_op()
{
    //1. 提取按键
    QPushButton *xbt = static_cast<QPushButton*>( sender() );
    //2. 保存符号
    op = xbt->text().toStdString().c_str()[0];
    //3. 提取第一个运算数
    data1 = le_lcd->text().toInt();
    le_lcd->clear();
}

void Widget::calculate()
{
    //0. 提取data2
    data2 = le_lcd->text().toInt();
    //1. 计算
    int answer;
    switch (op) {
    case '+':
        answer = data1 + data2;
        break;
    case '-':
        answer = data1 - data2;
        break;
    case '*':
        answer = data1 * data2;
        break;
    case '/':
        answer = data1 / data2;
        break;
    default:
        break;
    }
    //2. 显示
    le_lcd->setText(QString::number(answer));
}

void Widget::num_pressed(void)
{
    //1. 提取按键
    QPushButton *xbt = static_cast<QPushButton*>( sender() );
    //2. 显示数据
    le_lcd->setText(le_lcd->text().append(xbt->text()));
}

Widget::~Widget()
{

}

main.cpp

#include "widget.h"
#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    Widget w;
    w.show();

    return a.exec();
}

效果图：