计算机软件技术实习Week2：Qt Creator的学习与计算器图形界面的初步实现

目录

1. Qt creator的常用指令

2. 信号与槽

自定义信号槽

3. 计算器图形界面的实现

---

1. Qt creator的常用指令

x = new QLineEdit();    //创建文本框

x = new QPushButton();    //创建按钮

x -> setFixedHeight();    //设置文本框高度

x -> setMinimumHeight();    //设置按钮高度

layout -> addWidget(x, a, b, Qt::Alignment());    //对按钮或文本框进行布局

setWindowTitle();    //设置程序标题

2. 信号与槽

信号槽，实际就是观察者模式。当某个事件发生之后，它就会发出一个信号（signal）将想要处理的信号和自己的一个函数（称为槽（slot））绑定来处理这个信号。当信号发出时，被连接的槽函数会自动被回调。

connect(sender, signal, receiver, slot);

• sender：发送信号的对象
• signal：发送对象发出的信号
• receiver：接收信号的对象
• slot：接收对象在接收到信号之后所需要调用的函数

自定义信号槽

• 发送者和接收者都需要是QObject的子类；
• 使用 signals 标记信号函数，信号是一个函数声明，返回 void，不需要实现函数代码；
• 槽函数是普通的成员函数，作为成员函数，会受到 public、private、protected 的影响；
• 使用 emit 在恰当的位置发送信号；
• 使用QObject::connect()函数连接信号和槽；
• 任何成员函数、static 函数、全局函数和 Lambda 表达式都可以作为槽函数。

例如：

connect(button, SIGNAL(clicked(bool)), this, SLOT(button_clicked()));

3. 计算器图形界面的实现

首先要考虑计算器的所有按键：

数字键(0~9)、小数点、左右括号、加减乘除、等于号、清除(Clear)键。

确定后，创建按键：

button_0 = new QPushButton("0");
button_1 = new QPushButton("1");
button_2 = new QPushButton("2");
button_3 = new QPushButton("3");
button_4 = new QPushButton("4");
button_5 = new QPushButton("5");
button_6 = new QPushButton("6");
button_7 = new QPushButton("7");
button_8 = new QPushButton("8");
button_9 = new QPushButton("9");
button_dot = new QPushButton(".");
button_add = new QPushButton("+");
button_sub = new QPushButton("-");
button_mul = new QPushButton("*");
button_div = new QPushButton("/");
button_pow = new QPushButton("^");
button_Lbrac = new QPushButton("(");
button_Rbrac = new QPushButton(")");
button_equal = new QPushButton("=");
button_C = new QPushButton("C");

创建文本框：

data = new QLineEdit("");
history = new QLineEdit("");

调整文本框与按键的大小（代码略）

对所有按键进行连接(connect)操作：

connect(button_0, SIGNAL(clicked(bool)), this, SLOT(button_0_clicked()));
connect(button_1, SIGNAL(clicked(bool)), this, SLOT(button_1_clicked()));
connect(button_2, SIGNAL(clicked(bool)), this, SLOT(button_2_clicked()));
connect(button_3, SIGNAL(clicked(bool)), this, SLOT(button_3_clicked()));
connect(button_4, SIGNAL(clicked(bool)), this, SLOT(button_4_clicked()));
connect(button_5, SIGNAL(clicked(bool)), this, SLOT(button_5_clicked()));
connect(button_6, SIGNAL(clicked(bool)), this, SLOT(button_6_clicked()));
connect(button_7, SIGNAL(clicked(bool)), this, SLOT(button_7_clicked()));
connect(button_8, SIGNAL(clicked(bool)), this, SLOT(button_8_clicked()));
connect(button_9, SIGNAL(clicked(bool)), this, SLOT(button_9_clicked()));
connect(button_dot, SIGNAL(clicked(bool)), this, SLOT(button_dot_clicked()));
connect(button_add, SIGNAL(clicked(bool)), this, SLOT(button_add_clicked()));
connect(button_sub, SIGNAL(clicked(bool)), this, SLOT(button_sub_clicked()));
connect(button_mul, SIGNAL(clicked(bool)), this, SLOT(button_mul_clicked()));
connect(button_div, SIGNAL(clicked(bool)), this, SLOT(button_div_clicked()));
connect(button_pow, SIGNAL(clicked(bool)), this, SLOT(button_pow_clicked()));
connect(button_Lbrac, SIGNAL(clicked(bool)), this, SLOT(button_Lbrac_clicked()));
connect(button_Rbrac, SIGNAL(clicked(bool)), this, SLOT(button_Rbrac_clicked()));
connect(button_equal, SIGNAL(clicked(bool)), this, SLOT(button_equal_clicked()));
connect(button_C, SIGNAL(clicked(bool)), this, SLOT(button_C_clicked()));

对文本框与按键进行布局：

此处布局参考手机端及Windows端内置计算器的布局，数字与运算符均从下到上进行排列。

layout -> addWidget(data, 1, 1, 1, 4, Qt::Alignment());
layout -> addWidget(history, 2, 1, 2, 4, Qt::Alignment());

layout -> addWidget(button_Lbrac, 4, 1, Qt::Alignment());
layout -> addWidget(button_Rbrac, 4, 2, Qt::Alignment());
layout -> addWidget(button_C, 4, 3, Qt::Alignment());
layout -> addWidget(button_pow, 4, 4, Qt::Alignment());

layout -> addWidget(button_7, 5, 1, Qt::Alignment());
layout -> addWidget(button_8, 5, 2, Qt::Alignment());
layout -> addWidget(button_9, 5, 3, Qt::Alignment());
layout -> addWidget(button_div, 5, 4, Qt::Alignment());

layout -> addWidget(button_4, 6, 1, Qt::Alignment());
layout -> addWidget(button_5, 6, 2, Qt::Alignment());
layout -> addWidget(button_6, 6, 3, Qt::Alignment());
layout -> addWidget(button_mul, 6, 4, Qt::Alignment());

layout -> addWidget(button_1, 7, 1, Qt::Alignment());
layout -> addWidget(button_2, 7, 2, Qt::Alignment());
layout -> addWidget(button_3, 7, 3, Qt::Alignment());
layout -> addWidget(button_sub, 7, 4, Qt::Alignment());

layout -> addWidget(button_dot, 8, 1, Qt::Alignment());
layout -> addWidget(button_0, 8, 2, Qt::Alignment());
layout -> addWidget(button_equal, 8, 3, Qt::Alignment());
layout -> addWidget(button_add, 8, 4, Qt::Alignment());

布局效果如下图：

最后，确定每个按键被点击后的后续操作：

若为数字、操作符、括号等，直接读入字符串；

若为清除键，清空两个文本框，将程序中所有数值初始化；

若为等于号，则开始对读入的字符串进行运算，并输出结果。

出现数字或运算符： 

void MainWindow::button_0_clicked()
{
    s += "0";
    data -> setText(s);
}

出现清除键：

void MainWindow::button_C_clicked()
{
    init();    //初始化函数
    data -> setText(s);
    history -> setText(s);
}

 出现等于号：

void MainWindow::button_equal_clicked()
{
    s += "=";
    calculator();    //运算函数
    data -> setText(QString::number(num.top()));
    history -> setText(s);
}

将上周完成的计算器代码进行修改，使其适配Qt Crearor的格式要求，完成计算器。

实现效果如下：

  

上方文本框显示运算结果，下方文本框显示运算式。