學習目標

• 了解 qt 的 pixmap
• 了解 qt 的 label 如何顯示圖片
• 了解定時器的開啟
• 了解定時器的關(guān)閉
• 了解文件如何進行讀取
• 了解 QFileDialog 的使用
• 了解了一個文本編輯器的基本編寫
• 鞏固了 connect 的使用

一、制作一個圖片瀏覽器

1.1 Pixmap

在 Qt 中使用 Label 可以顯示文本，但 Label 不止可以顯示文本，還可以用于圖片的顯示。

首先我們雙擊 ui 文件，隨后在彈出的設(shè)計窗口中創(chuàng)建一個 Label ：

接著拖動這個 label 的寬高，拖動至一個比較好展示圖片的大?。?/p>

接著我們需要創(chuàng)建一個 QPixmap 對象。

QPixmap 類是一個用于處理圖像的類，創(chuàng)建一個 QPixmap 傳入對應的路徑即可得到這個這個類對于這個圖片處理的對象，QPixmap 更適合處理小圖片。

如下就是一個創(chuàng)建 QPixmap 類對象的方法：

QPixmap pix("D:\\developer\\QT\\pro\\01\\04\\04\\img\\1.png");

在此傳入了一張圖片進行對象初始化，接下來就可以直接將這個圖片顯示在 label 之上。

使用 ui 指定需要顯示圖片的控件 label，在 label 中有一個 setPixmap 方法，通過 setPixmap 傳入 QPixmap 的對象 pix 即可對圖片進行設(shè)置：

代碼如下：

ui->label->setPixmap(pix);

此時代碼如下：

以上的報錯都是 bug，其實代碼是正確的，我們此時只需要點擊運行，那么即會彈出一個窗口，上面使用了 label 顯示一張圖片：

1.2 定時器

現(xiàn)在已經(jīng)知道了如何使用 label 顯示圖片，那么接下來我們制作一個圖片的自動切換功能，那么必然是需要定時去執(zhí)行圖片切換，又或者說我們需要一個功能可以去觸發(fā)圖片的切換，并且多張圖片的話，切換是重復執(zhí)行的，那么就需要一個定時重復執(zhí)行某個操作的功能。

好消息是在 Qt 中自帶了定時器，定時器是一個用于對任務執(zhí)行定時操作的功能，定時器本身存在于 QWidget 基類之中，由于我們在創(chuàng)建對應的項目后，其類是 QWidget 的子類，那么我們在這個類中就可以直接使用定時器。

那么此時我們需要兩個按鈕，一個用于定時器的開啟，另一個按鈕用于定時器的關(guān)閉，在此創(chuàng)建兩個 pushButton 在 Qt 界面之上，并且更改對應的文本：

接著我們點擊開始按鈕觸發(fā)定時器，那么必然是有一個信號（點擊），與一個槽函數(shù)，在此右鍵開始按鈕選擇轉(zhuǎn)到槽，選擇 click 事件：

轉(zhuǎn)到槽函數(shù)后，我們可以使用以下的代碼開啟定時器：

this->startTimer();

以上代碼中的 startTimer就是表示開啟一個定時器，startTimer 在此還需要傳入一個間隔參數(shù)用來設(shè)定間隔的時間，這個時間是以毫秒為單位的，若你設(shè)置1s 那么則需要寫成 1000：

this->startTimer(1000);

那接下來如何完成圖片的切換呢？這時我們需要重寫一個方法 timerEvent，timerEvent 方法時定時器響應后所執(zhí)行的函數(shù)，其本身存在但需要重寫。

此時我們回到 .h 頭文件中聲明：

virtual void timerEvent(QTimerEvent *event);

接著回到 .cpp 文件中對此方法進行重寫：

void MainWindow::timerEvent(QTimerEvent *event){
    
}

在 .cpp 文件中添加以上函數(shù)后，我們需要在這個函數(shù)中編寫切換圖片的代碼。

此時假如我們有一個文件夾是用于存儲需要切換的圖片地址，那么我們創(chuàng)建一個 QString 對象進行存儲：

QString path("D:\\developer\\QT\\pro\\01\\04\\04\\img\\");

此時我對應的目錄下，文件名是如下格式：

那么在此我可以創(chuàng)建一個變量，這個變量是一個整形變量，用于代表文件名，但是由于每次都需要在之前的名稱基礎(chǔ)上往上加1，那么我就不能這個定時器觸發(fā)函數(shù)內(nèi)進行創(chuàng)建，需要在外部創(chuàng)建這個變量，首先到頭文件中進行聲明：

int picId;

接著再到 cpp 文件中賦初值：

picId=1;

那么此時對于一個圖片路徑的編寫就可以由最開始的 path 文件夾路徑加上文件名已經(jīng)文件名后綴即可，那么就可以寫成：

path+=QString::number(picId);
path+=".png";

由于 picId 是 number 類型，并不能直接的對字符串進行拼接，在這里使用 QString::number() 方法對其進行類型轉(zhuǎn)化。

現(xiàn)在圖片路徑有了，那么接下來必然是現(xiàn)實對應的圖片，現(xiàn)實圖片我們跟之前的方式一樣，創(chuàng)建一個 QPixmap 并且指定對應的 ui 對象 label 對其進行顯示即可，代碼如下：

QPixmap pix(path);
ui->label->setPixmap(pix);

接下來圖片的名稱進行增加：

picId++;

這樣就可以繼續(xù)下一張圖片了，但在此需要注意，咱們的圖片只有3張，那么我們需要使圖片索引在超過上限時從頭開始，那么就需要進行判斷：

picId++;
if(4==picId){
   picId=1;
}

此時該函數(shù)的所有代碼如下：

void MainWindow::timerEvent(QTimerEvent *event){
    QString path("D:\\developer\\QT\\pro\\01\\04\\04\\img\\");
    path+=QString::number(picId);
    path+=".png";
    QPixmap pix(path);
    ui->label->setPixmap(pix);
    picId++;
    if(4==picId){
        picId=1;
    }
}

此時運行項目點擊開始后，圖片會發(fā)生改變：

1.3 結(jié)束定時

接下來我們還需要使這個定時器結(jié)束定時，我們需要使用 killTimer 方法，這個方法本身繼承自 QWidget 父類，所以直接使用 this 調(diào)用即可，那么代碼如下：

this->killTimer();

但此時使用 killTimer 會出現(xiàn)錯誤，killTimer 需要一個某個定時器的 id 作為參數(shù)，指定你 kill 掉這個定時器。那定時器 id 如何拿到呢？其實在 startTimer 時將會返回一個定時器 id ，將這個 id 存儲起來即可，由于是不同函數(shù)內(nèi)都需要使用這個 id，那么此時我們需要在頭文件中創(chuàng)建一個變量對這個 id 進行存儲：

接著使用這個變量存儲定時器的 id：

接著給結(jié)束按鈕一個槽函數(shù)：

在這個函數(shù)中使用 killTimer 方法傳入定時器 id 即可：

void MainWindow::on_pushButton_2_clicked()
{
    this->killTimer(timerId);
}

二、文本編輯器制作

在本章第二點的學習中，我們通過學習文本編輯器制作，從而了解 一般的文件、QFileDialog 以及 鞏固自定義事件與槽的知識。

2.1 UI 設(shè)計

在正式敲代碼之前，我們創(chuàng)建一個項目，設(shè)計一下整體的文本編輯器頁面。創(chuàng)建好項目后，我們拖動一個 text 的控件拖動到界面之中：

在一般的文本編輯器中，一般以文本編輯為主要功能，接下來我們需要使整個文本編輯器占據(jù)整個 UI 的空間區(qū)域，那如何進行操作呢？若我們直接設(shè)置大小使文本編輯控件以及對應的窗口大小相等，那么這個程序的整個窗口都不能夠進行拖放，當在某些設(shè)備上整體窗口會導致一些困擾；例如程序界面過大、過小等情況，由于不可拖動大小對用戶并不友好。此時我們可以點擊整個整個窗口，給整個窗口一個垂直布局，給與垂直布局后，這個窗體內(nèi)的所有空間將會遵從于這個布局，會使整個空間占據(jù)整個寬度，那么在運行之后拖動窗體改變窗體大小，由于窗體內(nèi)的控件遵循垂直布局的規(guī)則，那么窗體內(nèi)的控件將會遵循父窗體的大小而發(fā)生改變，這樣就很好的解決了窗口過大、過小而不能更改的問題了。

此時點擊整個窗體程序：

選中整個窗體后，這個窗體將會在周圍又藍色小點代表選中，接下來我們點擊對應的垂直布局：

點擊完畢后整個空間將會占滿窗體（這是因為只有一個控件的原因）：

接著我們給與對應的菜單添加按鈕功能。雙擊菜單（menubar）可更改名稱：

輸入如下截圖的內(nèi)容：

按下 enter 鍵后對應的 &（取地址符）將會消失：

這是因為此時在此處輸入對應的取地址符加上某一個“按鍵”，那么則表示對應的快捷鍵，例如你在程序之中按下 F 那么將會與點擊這個 menu 有相同的操作。

接著我們加入打開文件的 menu ：

再接著添加對應的另存為 menu ：

還有一個新建文件 menu 忘記添加了，在此添加上：

再接著我們更改一下對應的菜單名稱，在 ui 設(shè)計窗口右上角更改對應的打開和另存為 menu 名稱：

2.2 新建文件

接下來咱們開始編寫新建文件操作的功能。

一般新建文件指的是在在窗體之內(nèi)新建一個文件文檔，此時對于文本編輯框的內(nèi)容是需要清空的，并且文件名也要做一個提示，此時我們給與這個 new_Action 一個自定義的事件與槽。

因為此時你右鍵這些 menu 并不能直接轉(zhuǎn)到對應的事件槽，所以此時我們需要對應的 connect 函數(shù)進行自定義。

此時我們回到 .h 頭文件中，對我們自定義的槽函數(shù)進行聲明：

private slots:
    void newActionSlot();

由于此時我們沒有給某一個控件一個槽函數(shù)，所以此時我們需要自己編寫 private 對槽函數(shù)的權(quán)限進行修飾，并且聲明對應的函數(shù)。

接著定義完畢后我們需要在 cpp 文件中對其進行實現(xiàn)：

void MainWindow::newActionSlot(){
}

實現(xiàn)后我們使用 connect 對 new_Action 新建文件操作 ui 綁定對應的槽函數(shù)：

connect(ui->new_Action,&QAction::triggered,this,&MainWindow::newActionSlot);

此時 connect 中 &QAction::triggered 是指 action 的點擊事件，并且綁定了一個 newActionSlot 槽函數(shù)，有關(guān) QAction 我們可以在 ui 設(shè)計框右上角可以看到 new_Action 是屬于一個 Action 對象：

接著，當點擊了新建文件的 action 后，我們需要對應的清空文本編輯框的內(nèi)容，并且更改當前的 Windows 程序的窗體 title，使其有一個提示，那么槽函數(shù)的代碼可以寫成如下：

void MainWindow::newActionSlot(){
    ui->textEdit->clear();
    this->setWindowTitle("新建文本.txt");
}

以上代碼中 setWindowTitle 表示設(shè)置當前的窗體程序的標題。我們此時運行程序，在文本編輯框中輸入一些內(nèi)容，隨后點擊文件選擇新建文件，之后將會看見窗體程序的標題發(fā)生了改變，并且文本編輯框的內(nèi)容已被清空：

2.3 打開文件

打開文件的前置操作跟新建文件的操作一樣，需要在頭文件中聲明槽函數(shù)、在 cpp 文件中實現(xiàn)槽函數(shù) 以及使用 connect 方法連接 menu 以及槽函數(shù)。

首先在 .h 文件中聲明：

接著就是在 cpp 文件中實現(xiàn)以及使用 connect 自定義事件與槽：

那么接下來我們?nèi)绾未蜷_文件呢？此時我們需要使用 QFileDialog 類的一個方法打開一個資源選擇框，這個方法是 getOpenFileName；首先我們需要在頭文件中使用 include 對其引入：

#include <QFileDialog>

隨后在 openActionSlot 槽函數(shù)中使用 QFileDialog 調(diào)用 getOpenFileName，其中 getOpenFileName 一般接收 4 個參數(shù)，第一個是資源選擇框的父對象是誰，我們可以指定為 this 表示當前程序；第二個參數(shù)是一個提示語；第三個參數(shù)為資源選擇框打開后的默認路徑；第四個參數(shù)是打開后顯示哪些文件。

那么此時代碼寫成：

QFileDialog::getOpenFileName(this,"選擇一個文本",QCoreApplication::applicationFilePath(),"*.txt");

以上代碼中的 QCoreApplication::applicationFilePath() 則是表示取到當前的文件路徑，最后一個參數(shù)則是表示打開后指定顯示 txt 類型文件，此時運行程序后，點擊打開將會出現(xiàn)資源選擇框：

當我們選擇某一個文件后，將會彈出對應的文件絕對路徑，我們可以使用一個 QString 進行存儲，方便接下來讀取到所選文件的內(nèi)容：

QString filename = QFileDialog::getOpenFileName(this,"選擇一個文本",QCoreApplication::applicationFilePath(),"*.txt");

若選擇文件時并未選中某個文件（取消選擇操作、關(guān)閉對話框等），其返回值為空，那么在正式讀取文件操作之前，我們需要對應的判斷當前是否選中文件，此時直接使用 if 判斷 filename 的內(nèi)容是否為 Empty 即可：

if(!filename.isEmpty()){
    
}

此時表示當 filename 不為空時發(fā)生操作。接著在 if 判斷內(nèi)，創(chuàng)建一個 file 對象用于接下來對文件的讀取，并且在創(chuàng)建時就需要傳入 filename：

 QFile file(filename);

接著使用 open 方法對已“裝載”路徑的 file 對象進行 open，但是由于 open 對象時需要指定你是用什么模式進行讀取，可以進行只讀、只寫等操作，在這里只需要只讀，所以使用 QIODevice 方法傳入 ReadOnly 作為參數(shù)即可：

file.open(QIODevice::ReadOnly);

接著使用 file 對象的 readAll 方法可以一次性讀取其文本的內(nèi)容，并且使用 QByteArray 進行存儲；但是要注意，在大文件下不建議這樣操作，當前只是作為示例：

QByteArray buf   = file.readAll();

最后直接將這個 buf 轉(zhuǎn)為 string 后設(shè)置為 textEdit 的文本內(nèi)容并且關(guān)閉 file 讀取即可，此時這個槽函數(shù)的所有代碼如下：

void MainWindow::openActionSlot(){
    QString filename = QFileDialog::getOpenFileName(this,"選擇一個文本",QCoreApplication::applicationFilePath(),"*.txt");
    if(!filename.isEmpty()){
        QFile file(filename);
        file.open(QIODevice::ReadOnly);
        QByteArray buf   = file.readAll();
        ui->textEdit->setText(QString(buf));
        file.close();
    }
}

接著我們運行一下程序，選擇一個文本文件后進行打開，內(nèi)容將會顯示在當前的 textedit 之上：

2.3 另存為

另存為功能的前置操作跟之前兩個功能一致，分別是頭文件聲明、cpp文件下實現(xiàn)以及connect 鏈接，在此簡述一下步驟。

聲明：

void saveActionSlot();

實現(xiàn)：

void MainWindow::saveActionSlot(){

}

鏈接：

connect(ui->save_Action,&QAction::triggered,this,&MainWindow::saveActionSlot);

前置操作完畢后，我們著重了解如何實現(xiàn)保存功能。

保存功能跟打開文本文件操作類似，都是使用 QFileDialog 進行位置選擇，并且最終的保存也是使用 file 對象進行操作，畢竟一個是讀一個是寫都屬于 IO 操作。

既然類型，那么我們在進行保存時的流程都是要打開資源選擇框，選擇某一個位置進行內(nèi)容保存，那么鐵定是使用 Dialog，在之前是使用 getOpenFileName，是 open操作，那么此時就是 save ，那么就使用 getSaveFileName 方法：

QString filename = QFileDialog::getSaveFileName(this,"選擇一個文件",QCoreApplication::applicationFilePath(),"*.txt");

接著同樣是判斷是否為空：

if(!filename.isEmpty()){

}

接著是使用 file 文件對所選擇的位置和保存文件名進行操作，并且此時不是 read 而是 write ：

QFile file(filename);
file.open(QIODevice::WriteOnly);

接著使用一個 QString 獲取當前的textEdit 的文本：

QString text = ui->textEdit->toPlainText();

創(chuàng)建一個 QByteArray 對象，并且將 textEdit 的文本轉(zhuǎn)為 QByteArray：

QByteArray ba=text.toUtf8();

隨后寫入文件，并且關(guān)閉文件即可，完整代碼如下：

void MainWindow::saveActionSlot(){
    QString filename = QFileDialog::getSaveFileName(this,"選擇一個文件",QCoreApplication::applicationFilePath(),"*.txt");
    if(!filename.isEmpty()){
        QFile file(filename);
        file.open(QIODevice::WriteOnly);
        QString text = ui->textEdit->toPlainText();
        QByteArray ba=text.toUtf8();
        file.write(ba);
        file.close();
    }
}

此時我們點擊保存后將會出現(xiàn)一個資源選擇框，我們選擇桌面路徑，隨后點擊保存即可對文件進行另存為操作：

查看桌面，文件保存成功并且內(nèi)容已寫入：

總結(jié)

本章節(jié)主要介紹了如何使用 qt 創(chuàng)建一個圖片瀏覽器以及一個文本編輯器，并且在其中使用 qt QFileDialog 對文件進行選擇已經(jīng)保存，鞏固了 qt 項目創(chuàng)建的基本流程；在此基礎(chǔ)上鞏固了信號與槽，在制作的過程中使用了垂直布局直接并有效的布局了整個 ui 界面。在此基礎(chǔ)上還學習了什么是 menu 以及什么是 menu 的 action，并且在 action 上通過使用取地址符的方式創(chuàng)建了對應的快捷按鈕，使其文本編輯器的操作更加的方便，這一節(jié)還學習了對應的定時器，了解了通過定時器可以對應的創(chuàng)建定時任務，例如制作一個壁紙切換的桌面、定時執(zhí)行一些重復操作等。文章來源地址http://www.zghlxwxcb.cn/news/detail-433962.html

到了這里，關(guān)于二、Qt定時器與文本編輯器制作《QT 入門到實戰(zhàn)》的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！