Qt初學——我的第一個UI

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

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

Step1：界面設計

首先，要創建一個項目。

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

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

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

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

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

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

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

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

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

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QPushButton>

namespace Ui {
class MainWindow;
}

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();

private:
    Ui::MainWindow *ui;
    QPushButton *button;
};

#endif // 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;
}

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;
}

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

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

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

大致過程是這樣的：

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QPushButton>

namespace Ui {
class MainWindow;
}

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();

signals:
    void signal();

private slots:
    void on_button_clicked();
    void receive_signal();

private:
    Ui::MainWindow *ui;
    QPushButton *button;
};

#endif // MAINWINDOW_H

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

#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::on_button_clicked);
    QObject::connect(this,&MainWindow::signal,this,&MainWindow::receive_signal);
}

MainWindow::~MainWindow()
{
    delete ui;
}

void MainWindow::on_button_clicked()
{
    emit signal();
}

void MainWindow::receive_signal()
{
    this->close();
}

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實戰一二三

 

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