Author: 絕世壞蛋

QT中的窗體

在上一節中，我允諾會在本節介紹一個空白元件來作為窗體的“襯底”，也就是所有其他元件的父元件。

這個空白的元件的名字是QWidget，我不知道上一節中我貼出來的QT中類的結構簡圖你有沒有仔細看。假如仔細看過應該會記得QPushButton以及其他所有的可視的窗體元件都是繼承自QWidget的。

這應該很好理解，QWidget是所有可視元件的基類，擁有一個元件的基本屬性——可以設定尺寸、設定標題、設定是否允許最大化及最小化等。

是不是被我說暈了？潛意識裡認定明明只有窗體才擁有標題以及最大最小化這些按鈕，為什麼元件也可以？

這是因為在QT中其實並沒有嚴格意義上的“窗體”，前面兩節中咱們執行的程式展現出的窗體實際上都是元件本身——當一個不存在父元件的元件被呼叫show方法時，他就會顯示出窗體的外邊框。

下圖是上一節中編寫的程式，他的窗體外邊框（標紅部分）來自不存在父元件的button1物件，而button2物件的父元件是button1，所以button2的窗體外邊框被隱藏了。

簡而言之，QWidget擁有一個元件的基本能力，同時他預設不顯示任何內容也不提供任何功能。

雖然QT中沒有專門作為窗體的東西，但我們完全可以把QWidget這個元件當成純粹的窗體來使用。

改進上一節的程式

非常簡單，我們只需要把button1物件換成一個來自QWidget類的物件就好啦！

#include <QApplication>
#include <QPushButton>
#include <QWidget> // 引入QWidget元件

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    // 例項化一個QWidget物件window
    QWidget *window = new QWidget();
    // 注意這裡將button2的父元件修改為window
    QPushButton *button2 = new QPushButton("Hi", window);

    // 這裡修改要顯示的元件為window
    window->show();

    return a.exec();
}

執行程式

還是很簡陋，但是比上一節中那個兩個按鈕疊羅漢的程式可是好多了哈~

下一節中我將介紹QT元件的方法和屬性，那時我們就可以利用新學的知識再度美化一下介面了。

Parenting system介紹

這是我要介紹的QT程式的第一個重要的概念——Parenting system，原諒我不知道怎麼翻譯=_=。

這個機制的實現由QObject類提供，該類是QT中絕大部分元件的基類。QT中類的關係簡圖如下：

可以看到，我們在上一節中所使用的QPushButton元件也繼承自QObject類，所以該元件也支援Parenting system機制。

程式碼演示

接下來我將透過一段程式碼來演示Parenting system機制的作用：

#include <QApplication>
#include <QPushButton>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    QPushButton *button1 = new QPushButton("Hello World");
    // 例項化button2，在建構函式的第二個引數中填入button1的地址
    // 此時button2就是button1的子元件
    QPushButton *button2 = new QPushButton("Hi", button1);

    // 只需要顯示父元件，其下的子元件就會一同顯示
    // 另外子元件也不需要單獨呼叫delete()，他會隨著父元件一起被釋放
    button1->show();

    return a.exec();
}

執行後顯示是這樣的：

我們將窗體拉大，變成如下：

解讀

可以看到，button2是顯示在了button1的上面。這就很實際了，因為我們常見的Windows窗體都是在一個元件上疊加其他元件來顯示的，例如：

每一個顏色的框框代表一個元件（沒有把所有元件都標記出來，只摘取部分說明問題）。可以發現這樣一個很複雜的窗體，就是一個面積很大的元件上面無限層次的疊加小元件來最終實現的。

而維護這種元件之間的父子關係的方法就是我們本篇文章所介紹的——Parenting system機制。

但是我們剛剛的程式還存在一個問題，就是父元件button1是一個按鈕，試想一下如果把button1換成一個顯示空白的元件是不是會更好一些？相關內容將在下一篇文章中詳述。

剛新建完的QT專案包含五個檔案，分別是：

• main.cpp
• mainwindow.cpp
• mainwindow.h
• mainwindow.ui
• untitled.pro

嘗試執行一下這個預設專案，執行的方法如下所示。

執行起來的程式：

是一個標題為MainWindow的空窗體，裡面什麼也沒有。即便如此，這個窗體的程式碼對於初學者而言依然過於複雜，接下來我們刪除掉窗體顯示相關程式碼，只保留QT程式最基本的框架，隨後再一點一點向裡面填充內容。

刪掉除了main.cpp和untitled.pro之外的其他檔案。最後整個專案變成這樣：

我們看main.cpp，這個檔案的初始內容如下：

#include "mainwindow.h"

#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    MainWindow w;
    w.show();
    return a.exec();
}

下面簡單修改一下這個檔案，刪除掉對mainwindow.h檔案的引用和對MainWindow類的例項化相關程式碼。我們在之前看到的那個標題為MainWindow的窗體實際上就是這個類生成的。刪除後的程式碼如下所示：

#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    
    return a.exec();
}

現在看到的就是一個QT程式的最基本框架了。下面我們填充一個按鈕到這個QT程式裡，讓按鈕顯示Hello World。

#include <QApplication>
#include <QPushButton> // QPushButton這個類提供按鈕元件

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    // 例項化一個按鈕，這裡傳給建構函式的值會被設定為按鈕顯示的文字
    // 除此之外還可以透過按鈕類提供的setText方法來設定，後面會講
    QPushButton *button = new QPushButton("Hello World"); 
    button->show(); // 呼叫show方法，顯示元件。

    return a.exec();
}

之後執行程式就可以看到第一個QT程式跑起來了~他可能很簡陋，但戰略意義遠大於戰術意義。

QT開發環境安裝

在下面的地址中找到適合你的作業系統的最新的安裝包，下載之。

http://download.qt.io/archive/qt/

安裝步驟就是一路點選“下一步”，直到出現如下介面的時候需要手工勾選一下，只勾選我標記出來的選項即可。

隨後繼續下一步，直到安裝完成。

建立一個新專案

QT自帶的開發工具叫QT Creator，是一個C++ IDE，你也可以使用微軟的VS來開發QT，這裡只介紹QT Creator。

QT安裝好後QT Creator的快捷方式並不會建立在系統桌面上，需要你去開始選單裡找。

QT Creator啟動後長這個樣子：

建立專案的流程是：檔案->新建檔案或專案，然後調出如下介面，按照我選的選一下，之後一路無腦下一步。選的過程中可以簡單看看介面的文字介紹瞭解一下這一步大概做了哪些工作，實在搞不懂的也別去糾結，該懂的以後自然會懂~

這樣一個QT專案就建立好了，如下所示：

前言

為什麼稱之為“快速學習筆記”？是因為我本人學東西就是一個“莽”字，啥也不會的時候就橫衝直撞觀其大略習其思想，瞅的差不多了直接融入到專案裡應用，再在開發過程中對細節問題隨時查缺補漏。當然這種學習方法並不適合所有人，有的自律性強耐得住寂寞的人就比較喜歡穩紮穩打，從基礎開始一點點學。

哦，對了——你可能想問學習QT是不是要精通C++才行？我必須告訴你並不是，因為我本人就是個C++白痴（約等於什麼也不會的那種），按照我的學習思路，C++的語法是到用到的時候才會去查手冊的，並不會在學習QT時提前去學。當然，這樣做的前提是，你必須擁有其他至少一門OOP程式語言的使用經驗，否則還是先簡單學習下C++再來看這個系列的文章吧。

QT簡介

QT是一個C++的開發庫，裡面包括多執行緒、網路、GUI等等的模組。很多人把QT當成是一個GUI庫其實是片面了，因為QT更像一個大雜燴，GUI只是其功能的一部分。

QT學習資料

除了本系列文章之外你還可以參考官方的學習手冊。其實我是很推薦你看看官方手冊的，因為我所寫的是我按照我的理解方式總結出來的，也許你自己翻一遍官方手冊會有不一樣的感悟呢。英文不好沒關係，我也是藉著谷歌翻譯看的=_=

QT官方入門手冊（推薦初學者閱讀）

https://wiki.qt.io/Qt_for_Beginners

QT官方完全開發手冊（推薦做專案的時候隨用隨查）

https://doc.qt.io/qt-5/reference-overview.html

QT的應用案例

列舉四個比較有名的專案

• 國產Deepin作業系統的DDE桌面環境
• KDE桌面環境
• WPS辦公軟體
• HBuilderX前端開發者工具