雷火电竞首页-中国电竞赛事及体育赛事平台

聯系我們 face+ 關于 服務 案例
首頁 案例 服務 關于 face+

qt ui設計方法是什么?qt ui設計具體步驟介紹

Time: 2021-02-24

qt設計是用于進行界面美化的,在進行設計過程中有著很多事項是需要注意的,這就需要做好充足準備,確保設計順利完成,那么qt ui設計方法是什么?下面一起看下吧。
 

  一.創建工程
 

  由于我們要實現兩個窗口之間的互相切換,故我們要創建兩個類。首先建立工程以及第一個類:

  打開Qt creater, File->New file or project,project選擇applications,右邊目錄選擇Qt GUI Application,下一步后為工程命名,這里我們就命名calculator,下一步選擇編譯及調試工具,再下一步選擇窗口類型,這里就選擇QMainWindow吧,類的命名為calculator,注意勾選Generate Form,這樣工程中才會有ui界面,最后一步不管,直接finish。至此,我們已經完成了工程及第一個類的創建。

  下面創建第二個類。之前說過,相關書籍和博客上普遍都是采用代碼的形式來創建第二個類的,相當的麻煩。這里我們利用圖形化界面直接創建第二個類:右鍵工程名calculator,選擇Add New,在彈出的對話框中,Files and Classes選擇Qt,右邊選擇Qt Designer Form Class,下一步的模板就選擇MainWindow吧。下一步命名extendedwindow,最后一步finish。至此我們就創建了工程中的第二個類。接著,在main.cpp包含頭文件“extendedwindow.h”并定義新的對象e——extendedwindow e;是不是比用代碼創建方便很多啊。

  完成以上步驟后,你的projects欄中應該有如下的樹形圖界面——

  二.利用ui界面完成界面的設計

  先編輯第一個窗口即calculator這個窗口,雙擊calculator.ui進入圖形化設計界面,從左邊的控件欄中找到containers下的tab widget,把他拖出來放到界面中,再拖出兩個Line Edit和一個Text Browser以及一個Lable到tab widget的第一個tab中,右上角有一個樹形圖欄記錄著當前窗口中的對象和類,在這里修改創建的對象的名字,提高可讀性(如圖)。

  接著利用界面上方的對齊工具進行對齊(如圖)

  第二個標簽里的內容也同樣操作。每個控件的大小可以通過拖動改變。最后再拖動一個push button到tab widget控件外部。最終的效果圖如之前展示的界面一所示。

  完成了第一個窗口的設計,接下來完成第二個窗口的設計。需要用到的控件是text browser和push button,過程這里就不說了。
 

qt ui設計
 

qt ui設計(圖片來自網絡)


 

  三.功能的實現

  Qt各對象之間的通信是通過信號與槽來實現的。故不要想著用對象a去訪問對象b的私有成員。帶參數的信號完全可以實現數據的傳遞。信號與槽機制的特點就是可以使得對象在彼此完全不了解的情況下將他們的行為聯系起來。對于這句話的理解是:各個類在定義時完全不需要考慮他與其他類可能會有什么聯系,各自定義各自的即可。當需要把幾個對象聯系起來的時候,臨時寫一句connect就可以達成目的。

  由于本文的重點在于介紹通過ui圖形化界面實現界面的設計,對于計算器計算的相關內容就不進行敘述了,相關代碼將在最后貼出。這個部分我們只講下對象是怎么通過信號與槽來進行通信的:

  3.1控件對象與窗口對象之間的通信

  選中tab1中的上方的那個line edit,右鍵,選擇go to slot,接著會彈出一個對話框,里面是各種類型的line edit所屬的QLineEdit類中的信號成員。通過這些信號的名字就可以猜到它的功能,如editingFinished(),它表示如果用戶對這個行輸入框的操作結束了(包括失去焦點和回車這兩種形式),則行輸入框這個對象將發射這個信號。

  這里我們選擇textEdited(),則界面自動跳到calculator.cpp文件,并且這個文件中已經自動創建了一個槽函數

  void calculator::on_number1_textEdited(const QString &arg1)

  經過觀察,我們發現這是一個屬于calculator類的槽函數。事實上,如果你現在打開calculator.h文件,你會發現Qt creater已經自動幫你在類的定義中加上了剛剛那個槽函數。除此之外,軟件還自動幫你完成了這兩個對象信號與槽的連接并將這段代碼隱藏了起來(具體在哪不知道)。當你編輯行輸入框時,信號被發送給calculator定義的對象的槽,槽函數執行特定的功能。需要強調的是,函數

  QObject::connect ( const QObject * sender, const char* signal, const QObject * receiver, const char* member )

  的第一個參數和第三個參數是對象的地址而不是類的地址。而窗口對應的對象的定義是在main.cpp中進行的

  calculator w;

  參數寫法應是&number1(number1是我對那個行輸入框的命名,可在右上角的樹形圖欄中查看)和&w。這里要通過第一個輸入框讀取得到的數(字符型),在槽函數中寫如下代碼:

  QString n1=ui->number1->text(); num1=n1.toDouble();

  需要解釋的是:

  ①:

  這里的ui代表的就是caltulator.ui這整個圖形化界面。它的定義在頭文件calculator.h里面,它是類calculator的一個成員

  private: Ui::calculator *ui;

  可見,ui是指向類calculator對象的一個指針。利用它可以對ui圖形化界面里的控件方便地進行訪問。具體方法為ui->…。(ui后輸入小數點“.”,軟件會自動改成->)。細心的人可能會發現,calculator.h和extendedwindow.h中都有ui,而各cpp文件中也都有ui,他們指向不同的對象,編譯器卻沒報錯。具體原因我也不知道,總之利用他們可以訪問各自的圖形化界面。

  ②:

  通過輸入框得到的內容是字符型的,故還需要用所示代碼將其轉換成double型數據。函數定義可在Qt Assistant中查找。

  3.2 兩個窗口對象之間的通信

  兩個窗口之間的通信需要我們手動去寫所有的代碼。思路如下:在類calculator和extendedWindow中各定義一個信號和槽函數(帶不帶參數視情況而定),用于他們之間的通信。在主函數中將兩組信號與槽聯系起來。通過軟件自動建立的連接,讓窗口一中按鈕對象與類calculator對象w通信,槽函數收到信號后,隱藏第一個窗口,再讓其主動發送信號給類extendedwindow對象e,讓第二個窗口顯示出來。
 

qt ui設計
 

qt ui設計(圖片來自網絡)

 

  以上是本文關于qt ui設計的具體介紹,qt ui設計是非常專業的一個過程,在設計過程中需要使用到各種代碼和手段,這就需要做好充足準備保證設計效果。


合作咨詢

上海(總部)

上海市浦東新區郭守敬路498號22號樓
021-61057328
[email protected]

辦公地址地圖

北京

北京市東城區后永康17號A座
010-64015620
[email protected]

辦公地址地圖

成都

四川省成都市錦江區東大街牛王廟段100號
028-62790929
[email protected]

辦公地址地圖
首頁 | 案例 | 服務 | 關于 | face+ | 智見

Copyright ? 2009-2022 FaceUI design. All rights reserved


滬ICP備13044459號-5

上海辦公地點地圖
北京辦公地點地圖
深圳辦公地點地圖
在微信中搜索faceui
或保存二維碼在微信中打開