一、使用ui編輯器來佈局計算面積的一些控制元件

我們新建一個專案，專案名稱為CalArea。並且勾選建立圖形介面，基類選擇QWidget

然後我們將我們需要的一些控制元件拖到中間的區域，這個區域就是將要設計的頂層視窗部件。我們這個計算面積的小程式需要兩個QLabel 類的控制元件，兩個QLineEdit類的控制元件， 和一個QPushButton類的控制元件，之後我們需要在物件檢視器中改掉它們的命名，如圖所示

我們這個計算面積的小程式需要的功能就是：輸入半徑，然後單擊計算面積的按鈕，圓的面積就會在面積的框裡面顯示出來。

這個就要用到Qt的訊號和槽機制，我們滑鼠在計算面積的按鈕上右擊，然後轉到槽，然後單擊clicked()，Qt就會自動給我們轉到相應的槽函式。然後我們只要獲取半徑的值並且將計算完之後的值顯示在面積中就行了。

接下來我們就來看看這個槽函式怎麼寫。

void Widget::on_pushButton_clicked()
{
    int value = ui->lineEditR->text().toInt();
    double area = value * value * 3.14;
    QString temp;
    ui->lineEdit_Area->setText(temp.setNum(area));
}

這個函式名是QtCreator自動給我們生成的，所以我們只要在這個函式中寫具體操作就行了。

我們首先將LineEdit中獲取的內容轉換為int型別，然後計算面積，最後我們只要將這個結果轉換為QString型別，並且放到lineEdit_Area中就行了。最後我們只要編譯就能得到我們想要的結果了。

二、不使用ui編輯器，實現這個小功能

我們再新建一個專案，但是這時候我們不要勾選建立圖形介面，其他的和上面一樣。

這個專案就不會有ui編輯器了，這時候需要我們敲程式碼來實現這個功能，這裡需要的控制元件和上面的一樣，所以我們需要在Widget.h中的Widget類中新增一些成員變數，這些變數分別是QLabel物件， QPushButton物件，QLineEdit物件。還需要新增一個用來佈局的物件QGridLayout物件。

接著我們只需要在Widget的建構函式中初始化這些物件，並且給它們布好局就行了。

//對這些控制元件進行初始化
    RLabel = new QLabel("半徑");
    RLineEdit = new QLineEdit;
    AreaLabel = new QLabel("面積");
    AreaLineEdit = new QLineEdit;
    CalButton = new QPushButton("計算");
    mainLayout = new QGridLayout(this);

    //對這些控制元件進行佈局
    mainLayout->setMargin(15);//設定控制元件和視窗的邊距為15
    mainLayout->setSpacing(10);//設定每個控制元件之間的距離為10

    //將這些控制元件加入佈局中
    mainLayout->addWidget(RLabel, 0,0);
    mainLayout->addWidget(RLineEdit,0,1);
    mainLayout->addWidget(AreaLabel,0,2);
    mainLayout->addWidget(AreaLineEdit,0,3);
    mainLayout->addWidget(CalButton,1,3);
 

這裡需要注意一點的就是，我們需要手動的將訊號和槽函式繫結起來。因此我們需要在標頭檔案中新增一個槽函式，void cal() 。

然後我們需要連線訊號和槽

connect(CalButton, &QPushButton::clicked, this, &Widget::cal);

第一個引數是訊號的發出者，型別是指標型別的，

第二個引數是傳送的訊號， 形式是： &傳送訊號者所屬的類::訊號

第三個引數是訊號接收者，型別也是指標

第四個引數是接收訊號的函式，也就是訊號處理函式，  形式是： &訊號接收者所屬的類::處理訊號的函式

然後我們在槽函式中寫入計算面積的程式碼就行了，這段程式碼和之前的一樣。

void Widget::cal()
{
    int value = RLineEdit->text().toInt();
    double area = value * value * 3.14;
    AreaLineEdit->setText(QString().setNum(area));

}

這樣也能實現我們所需要的功能。

以上就是用Qt Creator編寫一個簡單的程式的過程。