軟件工程結對作業

四則運算器界面設計

康鑫? PB16060203

婁雨禛? PB16060356

項目內容鏈接：http://www.cnblogs.com/silent-zlv/p/8684979.html

?

一、項目介紹

　　本次作業的設計比較有意思。每組隨機選擇“計算核心”和“用戶界面”中的一個，然后進行拼接整合。

　　對面將要完成的“用戶界面設計”，我們兩個都是完全的初學者。經過初步了解，我們采用了在C++下的備受好評的集成UI軟件：Qt。

　　“用戶界面設計”的作用是充當一個數據傳輸渠道，實現“用戶數據”和“計算核心”數據的交互。這個交互的關鍵點和難點就在于交互接口的設計。如何獲取數據，又如何發送數據，將是我們將要面臨的最大難題。此外，由于我們都是初次接觸UI設計，還要大量了解C++中涉及的圖形界面接口在Qt中的使用。

?

二、進度規劃與完成情況?

進度規劃	計劃	實際	說明
初步確立軟件布局 【合作】	20 min	20 min	我們的軟件布局分為以下主界面引導下的五個模塊：參數設定、答題窗口、錯題記錄、歷史記錄、成績單。
主界面設計 【康鑫】	180 min	150 min	我們的主界面很簡單，引導用戶做出五種選擇：開始答題、查看錯題、查看歷史記錄、查看成績、退出答題系統。
參數設定 界面設計 【康鑫】	180 min	180 min	這是一個較為復雜的界面。在這里，用戶可以自由地選擇生成的問題數、每個運算表達式的運算符數目、操作數的范圍、操作數的精度、運算表達式涉及的運算類型，然后進入答題界面。
答題界面設計 【康鑫】	180 min	180 min	?　　在答題界面中，用戶被要求在一定的時間內答完每一道題。用戶每答完一題，就能得知本題自己是否答對。用戶還能知道自己的答題進度，對自己的答題情況有一個把握。答完指定數量的問題后，返回主界面。
錯題記錄 界面設計 【合作】	120 min	60 min	?　　錯題記錄界面展示了用戶所有做錯的題目。
歷史記錄 界面設計 【合作】	120 min	60 min	?　　歷史記錄界面展示了用戶所有做過的題目。
成績單 界面設計 【合作】	240 min	60 min	?　　成績單界面將根據用戶的做題情況，給出一個答題的正確率，并將用戶在各個運算符中出錯的頻率做一個統計，讓用戶了解自己在哪個運算符出錯的頻率較高，從而在下一個階段進行更有針對性的訓練。
利用DLL 與CORE組對接 【康鑫】	180 min	180 min	?　　這是本次作業的一個重點。調用過程并不復雜，但在完全陌生的情況下，了解DLL調用并進行使用花費了一番時間。我們采用了DLL的隱式調用。
界面優化調整軟件漏洞修復 【合作】	360 min	1800 min	?　　這是一個永無止境的過程。軟件界面的優化不僅僅在于讓界面更加美觀合理，還在于讓界面之間的跳轉方式更加人性化，使用戶更便于操作。而漏洞修復則涉及到反復地粗暴嘗試。通過今早地將我們的軟件推送給用戶讓他們以自己的方式隨意調試，能幫助我們發現更多的漏洞。

?

三、UI界面展示與分析

　　第一代UI：實現基本功能，沒有考慮任何的界面美化

　　主界面

　　

　　參數設定界面

　　

　　答題界面

　　

　　錯題記錄界面

　　

　　歷史記錄界面

　　

　　成績單界面

　　

　　第一代UI的不足之處：

　　1. 按鈕的布局位置不夠合理，如主界面的布局、參數設定界面的布局等等。

　　2. 只采用了最原始的字體，界面無美感可言。

?

　　第二代UI：完善功能，修復BUG，進行界面的布局與美化

　　主界面

　　

　　參數設定界面

　　

　　答題界面

　　

　　歷史記錄界面

　　

　　成績單界面

　　

　　在第一代UI的基礎上，我們進行了較多的BUG修復與界面優化。它們具體包括以下內容。

　　BUG修復部分

　　1.修復了多次做題，成績高于100的問題

　　2.修復了未答題時成績出現負數的問題

　　3.修復了退出做題系統，卻仍然彈出“做題時間到”窗口的問題

　　4.修復了用戶答案輸入比正確答案還要精確，卻被判錯的問題

　　5.修復了用戶不輸入答案，正確答案為0，仍然被判對的問題

　　6.修復了用戶在提交問題答案后馬上退出答題系統，改題目沒有被統計的問題

　　界面美化部分

　　1.各個窗口的按鈕、文本框布局

　　2.加入Logo，使主界面煥然一新

　　3.合并“錯題界面”和“歷史記錄界面”，并采用表格形式展示，更為清晰美觀.

　　4.為適應低分辨率電腦做了界面優化

　　5.增添了各個子窗口的窗口標簽

?

四、項目開發的困惑與心得

　　1.由于對Qt完全陌生，上手研究花了好一番功夫。這其中包括C++相關語法的學習和Qt軟件本身語法的學習。其實對軟件本身的學習也是實際使用過程中很重要的部分，這個過程不容小視，但我們也需要盡可能壓縮這一部分的實踐，從而把精力更有效地投入到實際編程創作上來。在實際開發過程中，要采取“敏捷”原則，學一點做一點，這樣才能盡可能不在軟件本身上化過多的工夫，從而耽擱了工程的實際進行。

　　2.在對接過程中，我們用的是DLL隱式調用。DLL對我們來說是完全陌生的，也是從頭學起。在Qt添加DLL文件進行編譯時，有時會碰到許多莫名其妙的錯誤一直存在，比如“找不到core.lib”，而我們的確吧這個文件加入進來了。這個時候，唯一可行的解決方案是，將DEBUG文件夾整個刪除，然后重新編譯生成文件夾，再添加DLL文件。網上也有很多人碰到這樣的問題，我們只是用這個看似很玄乎的做法，卻并不知道背后的原因，有待以后繼續探究。

　　3.在結對編程過程中，我們先是分開來各自編程，而在中后期進入“駕駛員+領航員”的合作編程模式。這是因為，一開始我們對Qt開發環境都不熟悉，即使兩個人一起編程，效率也不會很高。而在中后期，兩個人都對這個環境有了一些了解，這樣，轉而進入合作編程模式，就能互相彌補對方想法的不足之處，進行更高質量代碼的編寫。

　　4.本次結對編程，我們得到了一個人編程體會不到的“優勢互補”的感覺。也就是說，當我們面對一個程序問題的實現方式時，兩個人會分別說出自己對這個問題的看法，然后進行比較，分析兩種方法孰優孰劣。如果其中一個人對某一些語句的書寫很熟練而另一者不是很熟練，那么熟練者主動書寫代碼，另一人在旁邊積極提出有益的建議。這樣，就較少出現個人編程過程中常有的“阻塞”情形，從而提升了編程的效率。

?

五、Qt學習心得

　　Qt初學——我的第一個UI——康鑫

　　第一次打開Qt的時候，我是一臉懵逼的。沒學過c++，里面的程序都看不懂。按照套路，我開始看教程，上手實踐。連著搞了3天之后，我開始漸漸明白怎么寫UI。

　　我現在的理解是：UI = 界面設計 + 信號槽響應機制 。下面我通過實例來展示編寫一個UI的大致過程（注意：這不是教程！最后貼的有專業教程！）：

　　Step1：界面設計

　　首先，要創建一個項目。

　　

　　.pro文件是項目的工程文件，點擊此處看詳細解釋。

　　.h文件是主窗口MainWindow的頭文件，可以在.h文件里聲明變量、函數、信號、信號槽。

　　main.cpp就是主函數了，程序從這里開始。

　　mainwindow.cpp是主窗口的程序，在里面可以設置主窗口的布局，信號槽等。

　　.ui文件，我現在還是不知道這個文件的機制，不過我知道可以在里面拖放控件，就像拼積木一樣設計UI，很簡單，點擊此處看有關內容。

　　一開始我用了一下.ui文件，但是由于不知道怎樣對控件屬性作更細的設置，所以干脆放棄，選擇寫代碼實現。

　　創建好項目之后，開始做整個過程的前半部分，界面設計。

　　下面，在界面中添加一個按鈕。

　　上網百度一下，常用的按鈕是QPushButton，查了一下相關用法之后，就可以嘗試使用了。

1 #ifndef MAINWINDOW_H2 #define MAINWINDOW_H3 4 #include <QMainWindow>5 #include <QPushButton>6 7 namespace Ui {8 class MainWindow;9 } 10 11 class MainWindow : public QMainWindow 12 { 13 Q_OBJECT 14 15 public: 16 explicit MainWindow(QWidget *parent = 0); 17 ~MainWindow(); 18 19 private: 20 Ui::MainWindow *ui; 21 QPushButton *button; 22 }; 23 24 #endif // MAINWINDOW_H MainWindow.h

　　在.h文件里添加QPushButton的頭文件#include <QPushButton> ，在private里面聲明button變量，QPushButton *button;

#include "mainwindow.h" #include "ui_mainwindow.h"MainWindow::MainWindow(QWidget *parent) :QMainWindow(parent),ui(new Ui::MainWindow) {ui->setupUi(this);button = new QPushButton(this);button->setText("Button");button->setParent(this);}MainWindow::~MainWindow() {delete ui; } MainWindow.cpp

　　button = new QPushButton(this);//定義button變量

　　button->setText("Button");　　　//設置button屬性，這里設置button的文本，其他屬性百度一下就可以

　　button->setParent(this);　　　　//將button控件的父窗口設置為當前窗口，這句用來顯示button按鈕

　　運行效果：

　　

　　到此為止，UI編寫的一半——界面設計就OK了。當然要是想做更好的UI，需要添加更多的控件，各種控件百度一下基本都能找到用法。

　　Step2：信號槽響應機制

　　添加了一個按鈕，一定很著急，點完之后沒卵用啊！為了能夠點完按鈕之后給點反應，我們要用到信號與信號槽機制。按我的理解就是，你做了一件事（往往是點擊按鈕），之后執行相應動作（函數）。不過我的描述還是太粗淺，這里給出相對權威一點的參考。

#include "mainwindow.h" #include "ui_mainwindow.h"MainWindow::MainWindow(QWidget *parent) :QMainWindow(parent),ui(new Ui::MainWindow) {ui->setupUi(this);button = new QPushButton(this);button->setText("Button");button->setParent(this);QObject::connect(button,&QPushButton::clicked,this,&MainWindow::close); }MainWindow::~MainWindow() {delete ui; } MainWindow.cpp

　　QObject::connect(button,&QPushButton::clicked,this,&MainWindow::close);

　　這句話的作用就是將點擊按鈕與關閉窗口“綁定”在一起。這樣，點完按鈕之后，窗口就會關閉。詳解見上面信號槽的參考。

　　但是這種“自帶”的信號與信號槽根本滿足不了需求啊，那么就需要自定義信號和自定義信號槽來實現一個自由度相對大很多的響應。

　　大致過程是這樣的：

1 #ifndef MAINWINDOW_H2 #define MAINWINDOW_H3 4 #include <QMainWindow>5 #include <QPushButton>6 7 namespace Ui {8 class MainWindow;9 } 10 11 class MainWindow : public QMainWindow 12 { 13 Q_OBJECT 14 15 public: 16 explicit MainWindow(QWidget *parent = 0); 17 ~MainWindow(); 18 19 signals: 20 void signal(); 21 22 private slots: 23 void on_button_clicked(); 24 void receive_signal(); 25 26 private: 27 Ui::MainWindow *ui; 28 QPushButton *button; 29 }; 30 31 #endif // MAINWINDOW_H MainWindow.h

　　信號聲明在signals:后，信號槽聲明在private slots:后。

1 #include "mainwindow.h"2 #include "ui_mainwindow.h"3 4 MainWindow::MainWindow(QWidget *parent) :5 QMainWindow(parent),6 ui(new Ui::MainWindow)7 {8 ui->setupUi(this);9 10 button = new QPushButton(this); 11 button->setText("Button"); 12 button->setParent(this); 13 14 QObject::connect(button,&QPushButton::clicked,this,&MainWindow::on_button_clicked); 15 QObject::connect(this,&MainWindow::signal,this,&MainWindow::receive_signal); 16 } 17 18 MainWindow::~MainWindow() 19 { 20 delete ui; 21 } 22 23 void MainWindow::on_button_clicked() 24 { 25 emit signal(); 26 } 27 28 void MainWindow::receive_signal() 29 { 30 this->close(); 31 } MainWindow.cpp

　　QObject::connect(button,&QPushButton::clicked,this,&MainWindow::on_button_clicked);

　　QObject::connect(this,&MainWindow::signal,this,&MainWindow::receive_signal);

　　點擊按鈕和函數on_button_clicked();“綁定”在一起，點完按鈕就會執行函數內容。

　　函數里面執行emit signal();發出自定義的信號signal();

　　發出signal();后，receive_signal();函數就會執行，因為前面將它倆“綁定”了。

　　receive_signal();函數里面執行了close();函數，效果是關閉當前界面。

?

　　有了上面兩步，就可以嘗試著構建功能更多的UI了，可以再添加窗口，添加其他控件，不同界面之間也可以把信號和信號槽“綁定”（不過記得要把槽設置成public的）……整個過程像堆積木一樣，還挺有趣。

　　這里推薦兩個教程，非常友好！強推！

　　Qt學習之路2

　　Qt實戰一二三

?

　　最后，一周的時間從不會到大致明白，真的很開心——雖然其他作業都沒寫。

?

轉載于:https://www.cnblogs.com/RainLou/p/8735480.html

總結

以上是生活随笔為你收集整理的软件工程结对作业 四则运算界面设计的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。