Qt5——從零開始的Hello World教程(Qt Creator)

簡單Qt教程

一、打開Qt Creator

　　本次的目的是用Qt Creator建立一個Hello World項目，在安裝Qt之后，首先要打開Qt Creator。

　　就是它啦，打開后會顯示如下頁面。

二、建立新項目

　　點擊文件——新建文件或項目 或者使用快捷鍵Ctrl+N便可以打開新建項目菜單。

　　這里選擇其他項目——Empty qmake Project創建一個空的qt項目 HelloWorld_Qt。

　　一路下一步到完成之后就可以看到已經成功建立的項目HelloWorld_Qt。

　　這個生成的新項目包含兩個文件。

 

　　HelloWorld_Qt.pro是qt的工程文件，HelloWorld_Qt.pro.user是用於記錄該次編譯所用的打開工程的路徑，編譯器、構建的工具鏈、生成目錄、打開工程的qt-creator的版本等的文件，更換編譯環境是需刪除。

　　這樣建立Qt項目便完成了。

　　由於這里建立的是一個空項目，我們需要添加文件來編寫代碼，右擊項目HelloWorld_Qt點擊Add New，選擇C++中的C++ Source File添加一個c++源代碼文件，起名叫main一路下一步到完成。

　　這樣就有了一個可以用來編寫代碼的main.cpp

三、編寫代碼

　　打開main.cpp在其中編寫代碼我們需要建立一個Qt應用程序，需要引入Qt應用程序類QApplication所以我們引用它

#include<QApplication>

 

　　但是這里報錯了，編譯器告訴我們‘QApplication’類文件沒有找到，這是因為沒有連接Qt Widgets庫，打開HelloWorld_Qt.pro引入Qt Widgets庫，添加一句QT += widgets按下Ctrl+S保存，之后回到main.cpp

　　果然，錯誤消失了。

　　繼續編寫代碼，我們還需要有一個窗體，需要引入QWidget類

　　

#include<QWidget>

　　之后便可以開始設計主函數了。

#include<QApplication>
#include<QWidget>
int main(int argc, char* argv[]){
    //在程序編譯完成后會生成一個.exe后綴的可執行文件
    //argc是命令行參數個數
    //argv[0]記錄程序名
    //argv[1]~argv[argc-1]記錄的輸入參數
    //argc argv是標識符，可以修改名稱
    //main()函數有argc和argv或沒有，即int main() 或void main，都是合法的。
    QApplication app(argc, argv);
    //應用程序抽象類
    //使用在argv中的argc個命令行參數構造一個名為app的QApplication對象。
    //QApplication 類管理圖形用戶界面應用程序的控制流和主要設置
    //任何一個使用Qt的圖形用戶界面應用程序，都存在一個QApplication對象

    QWidget w;
    //QWidget類是所有用戶界面對象的基類
    //在這里可以把它看作一個窗口，構造了一個窗口對象
    w.setWindowTitle("Hello World!");
    //將窗口的標題設為Hello World!
    w.show();
    //顯示窗體
    return app.exec();
    //exec()函數有一個消息循環，在調用之后，程序就被鎖定。等待窗口的關閉
}

　　執行一下

　　成功顯示HelloWorld窗口。 

　　窗口建好之后我們便可以向窗口中添加控件了，現在需要在窗體中顯示Hello World！，我們可以通過QLabel標簽實現，要向窗體中添加QLabel標簽則同樣需要引入QLabel類。

#include <QLabel>

　　之后構造一個標簽對象

    textLabel.resize(100,15);
    //設定標簽寬40高15
    textLabel.move(150, 170);
    //將標簽移動到距離左上角水平100px垂直130px的位置
    textLabel.setText("Hello World!");
    //標簽的初始顯示字符串NULL
    textLabel.setParent(&w);

　　標簽QLabel也是一個窗體，它繼承自QFrame，而QFrame又繼承自QWidget，若想讓他顯示在我們構造的窗口w中就需要將QLabel對象textLabel的父對象設為w。

　　在這個程序中w是主窗口，主窗口是指沒有父對象的窗口。

　　若在此處不使用textLable.setParent(w),text標簽將單獨彈出一個窗口。

　　這就說明了，所有最終繼承至QFrame的控件如果不把控件的父對象設置為當前主窗口，控件將單獨作為一另個主窗口彈出。

　　

　　注釋textLable.setParent(w),text后的效果

　　

　　正確效果

　　源代碼：

#include <QApplication>
#include <QWidget>
#include <QLabel>

int main(int argc, char* argv[]){
    //在程序編譯完成后會生成一個.exe后綴的可執行文件
    //argc是命令行參數個數
    //argv[0]記錄程序名
    //argv[1]~argv[argc-1]記錄的輸入參數
    //argc argv是標識符，可以修改名稱
    //main()函數有argc和argv或沒有，即int main() 或void main，都是合法的。
    QApplication app(argc, argv);
    //應用程序抽象類
    //使用在argv中的argc個命令行參數構造一個名為app的QApplication對象。
    //QApplication 類管理圖形用戶界面應用程序的控制流和主要設置
    //任何一個使用Qt的圖形用戶界面應用程序，都存在一個QApplication對象
    QWidget w;
    w.resize(400, 400);
    //QWidget類是所有用戶界面對象的基類
    //在這里可以把它看作一個窗口，構造了一個窗口對象
    w.setWindowTitle("Hello World!");
    //將窗口的標題設為Hello World!
    QLabel textLabel;
    //構造一個標簽
    textLabel.resize(100,15);
    //設定標簽寬40高15
    textLabel.move(150, 170);
    //將標簽移動到距離左上角水平100px垂直130px的位置
    textLabel.setText("Hello World!");
    //標簽的初始顯示字符串NULL
    textLabel.setParent(&w);
    textLabel.show();
    w.show();
    //顯示窗體
    return app.exec();
    //exec()函數有一個消息循環，在調用之后，程序就被鎖定。等待窗口的關閉
}

 四、Hello New World!

　　在成功完成上述項目后我們已經不能滿足於單單在窗口中顯示Hello World！了，這次我們希望用一個按鈕來將Hello World！改為 Hello New World！。

　　新建一個空的Qt項目，名為Hello New World。

　　一路下一步到完成，打開HelloNewWorld.pro引入Qt Widgets庫，添加一句QT += widgets。

　　這次我們不像上一個項目一樣一個main函數到底，我們添加一個C++類作為主窗口框架。

 　　右擊HelloNewWorld選擇Add New添加一個C++ Class

　　我們想讓這個類作為我們主窗口的對象類型，我們將其命名為MainWidget，既然MainWidget是一個窗口，我們就讓MainWidget作為QWidget的一個子類。

　　將MainWidget的基類設為QWidget。

　　一路下一步到結束。

　　可以發現項目中多了兩個文件，mainwidget.h 與 mainwidget.cpp。

　　我們的MainWidget類就聲明在mainwidget.h中

mainwidget.h:

#ifndef MAINWIDGET_H
#define MAINWIDGET_H

#include <QWidget>

class MainWidget : public QWidget   //MainWidget的聲明
{
    Q_OBJECT
public:
    explicit MainWidget(QWidget *parent = nullptr);
    //MainWidget類的構造函數 因為使用了explicit所以為顯式構造函數
    //c++ 類構造函數默認情況下即聲明為implicit(隱式)
    //關於顯示與隱式的區別這里就不介紹了，諸位若不知道可以搜索
signals:
    //這里可以用來聲明信號函數
public slots:
    //這里可以用來聲明槽函數
};

#endif // MAINWIDGET_H

mainwidget.cpp:

#include "mainwidget.h"

MainWidget::MainWidget(QWidget *parent) : QWidget(parent)
{
    //顯示調用MainWidget構造函數
    //調用順序是先調用父類QWidget的構造函數，再調用派生類的構造函數
    //具體可以看https://www.cnblogs.com/findumars/p/9231742.html這篇博客
}

　　之后便可以設計一下我們的主窗口了，根據本次的要求，我們希望主窗口中有一個標簽來顯示我們的Hello World與Hello New World，有一個按鈕來實現點擊按鈕轉換文字，這樣就可以確定我們的MainWidget中會有兩個成員控件，一個QLabel一個QPushButton。

　　在MainWidget的聲明中添加它們。

#ifndef MAINWIDGET_H
#define MAINWIDGET_H

#include <QWidget>
//添加成員變量QPushButton與QLabel標簽需要引入QPushButton與QLabel類。
#include <QPushButton>
#include <QLabel>

class MainWidget : public QWidget
{
    Q_OBJECT
public:
    explicit MainWidget(QWidget *parent = nullptr);
    //MainWidget類的構造函數 因為使用了explicit所以為顯式構造函數
    //c++ 類構造函數默認情況下即聲明為implicit(隱式)
    //關於顯示與隱式的區別這里就不介紹了，諸位若不知道可以搜索

    QPushButton* button;    //成員控件按鈕
    QLabel* label;  //成員控件標簽

signals:
    //這里可以用來聲明信號函數
public slots:
    //這里可以用來聲明槽函數
};

#endif // MAINWIDGET_H

　　之后便可以在mainwidget.cpp中編寫代碼了，我們希望將主窗口設計為一個400*400，文字和按鈕顯示在中間，文字在按鈕上方，在mainwidget.cpp中，MainWidget構造函數處做如下更改 。

MainWidget::MainWidget(QWidget *parent) : QWidget(parent)
{
    //顯示調用MainWidget構造函數
    //調用順序是先調用父類QWidget的構造函數，再調用派生類的構造函數
    //具體可以看https://www.cnblogs.com/findumars/p/9231742.html這篇博客
    resize(400, 400);
    //設置窗口大小為400px * 400px
    label = new QLabel("Hello World!", this);
    //初始化控件lable文字顯示為Hello World!， 父對象為當前MainWidget窗口對象
    label->setGeometry(150, 100, 130, 50);
    //lable的位置在x = 150px y = 100px 寬為100px高為50px
    button = new QPushButton("change", this);
    //初始化控件button文字顯示為change， 父對象為當前MainWidget窗口對象
    button->setGeometry(150, 175, 130, 50);
    //button的位置在x = 150px y = 175px 寬為100px高為50px
}

　　之后設計主函數，在主函數中構建一個MainWidget窗口w，將它顯示出來。

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

    MainWidget w;   //構建一個MainWidget窗口w
    w.show();   //顯示w

    return app.exec();
}

　　不要忘記引入QApplication。

　　以下為當前mainwidget.cpp的全部代碼

　　

#include "mainwidget.h"
#include<QApplication>

MainWidget::MainWidget(QWidget *parent) : QWidget(parent)
{
    //顯示調用MainWidget構造函數
    //調用順序是先調用父類QWidget的構造函數，再調用派生類的構造函數
    //具體可以看https://www.cnblogs.com/findumars/p/9231742.html這篇博客
    resize(400, 400);
    //設置窗口大小為400px * 400px
    label = new QLabel("Hello World!", this);
    //初始化控件lable文字顯示為Hello World!， 父對象為當前MainWidget窗口對象
    label->setGeometry(150, 100, 130, 50);
    //lable的位置在x = 150px y = 100px 寬為100px高為50px
    button = new QPushButton("change", this);
    //初始化控件button文字顯示為change， 父對象為當前MainWidget窗口對象
    button->setGeometry(150, 175, 130, 50);
    //button的位置在x = 150px y = 175px 寬為100px高為50px
}
int main(int argc, char* argv[]){
    QApplication app(argc, argv);

    MainWidget w;   //構建一個MainWidget窗口w
    w.show();   //顯示w

    return app.exec();
}

　　運行一下

　　

　　一個符合我們設計要求的窗口已經完成了。

　　之后就要開始完成點擊按鈕更換文字的功能了，這里就用到了信號和槽的知識。

　　在QObject類中有一個connect函數其中要求傳入四個參數，第一個參數為被用戶操作的對象（發出信號的對象當前為我們的change按鈕），第二個參數是一個被操作信號（當前為按鈕被點擊clicked()），第三個參數是我們要進行操作的對象（接受信號的對象當前為我們的主窗體w），第四個參數為對應的槽函數（這就需要我們自己設計一個槽函數了，我們將這個槽函數命名為changeText）。

　　

 QObject::connect(w.button, SIGNAL(clicked()), &w, SLOT(changeText()));

　　當然，Qt中QObject是絕大多數類的基類，包括QWidget，而我們的MainWidget又是QWidget的子類，所以如下寫法依然正確。

MainWidget::connect(w.button, SIGNAL(clicked()), &w, SLOT(changeText()));

　　之后我們就要在MainWidget的聲明中去聲明和定義槽函數了（可以只聲明，在mainwidget.cpp中定義）。

public slots:
    //這里可以用來聲明槽函數
    void changeText(){
        label->setText("Hello New World!");
    }
};

　　運行一下

　　點擊change

　　完整代碼：

　　HelloNewWorld.pro:

QT += widgets

HEADERS += 
    mainwidget.h

SOURCES += 
    mainwidget.cpp

　　mainwidget.h:

#ifndef MAINWIDGET_H
#define MAINWIDGET_H

#include <QWidget>
//添加成員變量QPushButton與QLabel標簽需要引入QPushButton與QLabel類。
#include <QPushButton>
#include <QLabel>

class MainWidget : public QWidget   //MainWidget的聲明
{
    Q_OBJECT
public:
    explicit MainWidget(QWidget *parent = nullptr);
    //MainWidget類的構造函數 因為使用了explicit所以為顯式構造函數
    //c++ 類構造函數默認情況下即聲明為implicit(隱式)
    //關於顯示與隱式的區別這里就不介紹了，諸位若不知道可以搜索

    QPushButton* button;    //成員控件按鈕
    QLabel* label;  //成員控件標簽

signals:
    //這里可以用來聲明信號函數
public slots:
    //這里可以用來聲明槽函數
    void changeText(){
        label->setText("Hello New World!");
    }
};

#endif // MAINWIDGET_H

　　mainwidget.cpp:

#include "mainwidget.h"
#include<QApplication>

MainWidget::MainWidget(QWidget *parent) : QWidget(parent)
{
    //顯示調用MainWidget構造函數
    //調用順序是先調用父類QWidget的構造函數，再調用派生類的構造函數
    //具體可以看https://www.cnblogs.com/findumars/p/9231742.html這篇博客
    resize(400, 400);
    //設置窗口大小為400px * 400px
    label = new QLabel("Hello World!", this);
    //初始化控件lable文字顯示為Hello World!， 父對象為當前MainWidget窗口對象
    label->setGeometry(150, 100, 130, 50);
    //lable的位置在x = 150px y = 100px 寬為100px高為50px
    button = new QPushButton("change", this);
    //初始化控件button文字顯示為change， 父對象為當前MainWidget窗口對象
    button->setGeometry(150, 175, 130, 50);
    //button的位置在x = 150px y = 175px 寬為100px高為50px
}
int main(int argc, char* argv[]){
    QApplication app(argc, argv);

    MainWidget w;   //構建一個MainWidget窗口w
    w.show();   //顯示w

    QObject::connect(w.button, SIGNAL(clicked()), &w, SLOT(changeText()));

    return app.exec();
}