20-嵌入式Linux GUI基础及应用设计——计算器实例

原创已于 2025-12-04 15:41:45 修改 · 897 阅读

26 ·

CC 4.0 BY-SA版权

文章标签：

#linux #运维 #qt5

于 2025-12-04 10:38:38 首次发布

一、创建Qt 5 计算器界面

下面我们来做一个简单的计算器界面，0-9及运算符选择按钮“Push Button”来实现，结果输出选择显示屏“LCD Number”来实现。

1. 新建项目Calculator

参照前序博文：18-嵌入式Linux GUI基础_linux gui开发-CSDN博客中“三、创建一个Qt工程 ” 的” 2. 创建工程“，不过基类在这里选择“QDialog”，创建过程如下截图。

项目根目录路径自行选择

2. 设计计算器 ui 界面

打开Forms下calculator.ui，下面进行计算器的ui界面设计：

通过属性设置画布的大小为300*450：

拖拽16个按钮“Push Button”及一个“LCD Number”，如下图：

修改所有按钮的显示名称及大小等属性，也可以参照博文18-嵌入式Linux GUI基础_linux gui开发-CSDN博客进行布局设计，如下图：

二、计算器功能的实现

在设计功能之前，为了方便代码的编写，需要修改代码涉及到的控件的变量名称。

修改所有按钮的变量名称，并让显示与变量名称一一对应，如下图“7”的设置，其它类似：

修改显示屏的变量名为lcdnum:

修改ui界面的窗口名称属性为“计算器”：

1. 四则运算内部方法设计

在计算器的实现过程中，需要进行四则运算，则相应有实现四则运算的代码，将其命名为moc，则对应代码文件名为“moc.h”和“moc.cpp”。

右键该项目，选择“添加新文件”：

创建C++类文件，命名为moc：

在“moc.h”头文件中，我们需要定义使用的方法和变量，定义部分的代码如下图所示：

moc.h 完整代码如下：

#ifndef MOC_H
#define MOC_H
#include <QString>

class moc
{
public:
    moc();
    // 方法
    void setNum1(int num);
    void setNum2(int num);
    void setFlag(QString flag);
    QString doExpr();

private:
    // 定义变量 num1 (+=*/) num2
    int num1;
    int num2;
    QString flag;
};


#endif // MOC_H

计算器在运算过程中，主要实现两上计算数之间的四则运算，在这里主要实现简单的加、减、乘、除四则运算，因此需要定义3个变量，分别保存两个计算数和一个运算符。在定义变量的过程中同时定义这3个变量的构造方法以及运算方法。

在“moc.cpp”源文件中，实现代码如下：

#include "moc.h"

moc::moc()
{
    // 初始化
    this->num1 = 0;
    this->num2 = 0;
}
 
// 定义方法，对应moc.h中的定义
void moc::setNum1(int num)
{
    this->num1 = num;
}
 
void moc::setNum2(int num)
{
    this->num2 = num;
}
 
void moc::setFlag(QString flag)
{
    this->flag = flag;
}
 
// 当用户点击"="号时调用该函数
QString moc::doExpr()
{
    double result = 0.0;
    // switch不能用QStirng，这里用if
    if(this->flag=="+"){
        result = this->num1 + this->num2;
    }else if(this->flag=="-"){
        result = this->num1 - this->num2;
    }else if(this->flag=="*"){
        result = this->num1 * this->num2;
    }else if(this->flag=="/"){
        // 除数为0的情况
        if(this->num2==0){
            return "-1";
        }
        result = (this->num1)*1.0 / this->num2;
    }//默认输入为整数，因此除法时可能出现小数，故除数运算时通过乘1.0，转化为小数。
    else{
         return QString::number(this->num1);
    }
    return QString::number(result);
}

2. 界面功能与内部方法的交互实现

依据上文所述，计算器界面实现的四则运算功能简要如下：

（1）当在计算器上依次点击“数字、符号、数字”，即将其分别获取并且存入num1, flag和num2中。

（2）调用内部moc中的方法进行运算，获取运算结果result。

（3）最后将结果result显示在ui界面的显示屏上。

方法交互实现的相关代码文件为“calculator.h”和“calculator.cpp”。

首先，找开calculator.h头文件，引入头文件moc.h，并找到其private位置，如下图，并进行相关的定义：

#include <QString>
#include "moc.h"
...
private:
    // 屏幕内容
    QString tmp;
    // 界面对象和核心功能对象
    Ui::calculator *ui;
    moc *mode;

接下来，回到ui界面，来添加槽函数，右键数字“0”按钮，选择“转到槽”：

选择点击信号：

分别在calculator.h 头文件和calculator.cpp 源文件自动生成如下代码：

依此类推，将其余所有按钮执行以上操作。

接下来，在“calculator.cpp”中，新建moc，并设置显示屏的默认值为0：

说明：tmp存储的是当前显示屏上的值，在不进行任何操作时，显示屏默认显示0，但tmp值为空。

此部分源代码为：

......
Calculator::Calculator(QWidget *parent) :
    QDialog(parent),
    ui(new Ui::Calculator)
{
    ui->setupUi(this);
    // 新建moc，设置显示屏的默认值为0
    this->mode = new moc;
    this->tmp = "";
}
......

（1）数字 0-9 读取操作

当我们要读取多位数时，依次按下相应数字，在显示屏上会按顺序连在一起显示一个多位数，比如，依次点击1、2、0、0，则显示1200。

但是，如果第一个数字是0，将不会出现变化，比如按下0、1，显示1。

设置槽函数0的代码如下：

对应部分源代码如下：

......
void Calculator::on_num0_clicked()
{
    // 第一个数是0时不会叠加0
   if(this->tmp != ""){
   // 拼接字符串
   this->tmp += this->ui->num0->text();
   // 把它显示出来
   this->ui->lcdnum->display(this->tmp);//lcdnum为显示屏的变量名
  }
 }
......

此处需要注意，显示屏的变量名要和代码对应。

对于槽函数1-9的设置方法类似：

以1数字为例，其它数字只要将1改成对应数字即可，代码如下：

void expr::on_num1_clicked()
{
    this->tmp += this->ui->num1->text();//2-9只需将1换成2-9即可
    this->ui->lcdnum->display(this->tmp);
}

（2）**四则运算 +-*/ 操作**

该计算器设计的是两个数的四则运算，输入的是第一个数字是num1，一个运算符是flag，因此，在该槽函数的设计中，需要对num1和flag的值进行存储。

在calculator.cpp源文件中，定义加法槽函数如下图：

加法运算槽函数定义源代码为：

void Calculator::on_add_clicked()
{
        // 用于检测是否转化成功
        bool ok;
        // 1. 把当前屏幕上显示的string转为int存在num中
        int num = this->tmp.toInt(&ok);
        // 2. 当点击"+"号时，把num1的值设置为num
        this->mode->setNum1(num);
        // 3. 清除当前屏幕
        this->tmp = "";
        // 4. 记录点击的运算符
        QString ex = this->ui->add->text();
        this->mode->setFlag(ex);
}

其它四则运算（- * /）的槽函数的定义方法类似，只是修改运算符对应的变量，具体操作如下图：

（3）等于 = 操作

在等号的槽函数中，首先需要存储num2的值，然后根据已有的num1, flag，num2计算出最后的结果result，并且显示在屏幕上。

在calculator.cpp源文件中，定义=槽函数如下图：

等于运算槽函数定义源代码为：

void Calculator::on_equ_clicked()
{
        // 获取num2
        bool ok;
        int num = this->tmp.toInt(&ok);
        this->mode->setNum2(num);
        // 计算num1和num2的运算结果
        QString res = this->mode->doExpr();
        // 显示计算结果
        this->ui->lcdnum->display(res);
        // 清除tmp内容，避免影响后续计算
        this->tmp = "";
}

（4）清除 AC 操作

清除功能操作很简单，就是把当前显示屏上的内容置0即可，但是同时要把tmp置为空。

清除操作槽函数定义源代码为：

void Calculator::on_AC_clicked()
{
        // 清除第一个计算数
        this->tmp = "";
        // 显示屏清0
        this->ui->lcdnum->display(0);
}

三、布局优化与运行测试

全选16个按钮，

找到以下对应属性并作相应修改：

设置完后点 “栅格布局” ，

修改显示屏的大小属性，属性类别同按钮，如下图：

全选显示屏和16个按钮，如下第一图，再点垂直布局后，鼠标拉伸至适合大小，如下第二图：

最后在上、下、左、右加弹簧，单击ui窗口，最后点 “栅格布局”，如图一。

点运行，运行结果如图二。

到此为止，一个简易的加减乘除法的四则运算计算器就完成了。

四、扩展--帮助按钮的显示与隐藏

在Qt 5.11中，标题栏的问号（即帮助按钮）属于‌窗口系统按钮‌，需通过Qt::WindowFlags枚举值控制其显示与设置。

Qt通过Qt::WindowFlags枚举值定义窗口的系统按钮（最小化、最大化、关闭、帮助等）。

其中，‌帮助按钮‌由Qt::WindowContextHelpButtonHint控制显示，若需修改其功能或替换图标，需结合Qt::WindowFlags的组合与自定义逻辑实现。

若需‌隐藏帮助按钮‌，可在窗口创建时移除对应标志位：

// 假设`this`是窗口类（如`QWidget`或`QMainWindow`）
this->setWindowFlags(this->windowFlags() & ~Qt::WindowContextHelpButtonHint);

代码编写与运行结果如图：