Qt 的拖拉 widget 與事件

Qt 的拖拉 widget 與事件

前言

  在之前的 Qt Creator 入門 裡建置了基本的專案，這次會拖拉 widget 並增加事件，在此做個紀錄。

內容

  由於 Qt 的每個 widget 有各自的用法，所以我在  [ GitLab ] HelloQt 放了個專案來儲存這些用法的範例，這次會使用到 (HelloQt' directory)/PushButton/Basic 裡的專案來解說，用 Qt Creator 來開啟該資料夾的專案檔(HelloQt.pro)，如下圖

開啟專案

接著會看到選擇組態的畫面，如下圖

選擇組態

這裡選擇需要的組態，組態會引響使用的編譯器與作業系統的位元數，圖中所選的編譯器是 MSVC 位元數為 64 位元，選擇完後按下右下角的"Configure project"，專案的組態就完成了。

  在專案的組態完成後，在 UI 的檔案雙擊滑鼠到設計介面，如下圖

雙擊 UI 的檔案到設計介面

設計介面如下圖

設計介面

區塊1裡會有 Qt 提供的 Widget 的工具箱，用滑鼠拖曳到區塊2就可以新增 widget ，整個 UI 會被記錄成一個樹狀的結構，這個結構會顯示在區塊3，而區塊4會顯示目前所選的 widget 的屬性。這次我使用 PushButton 這個 widget ，其實就是很常見的按鈕，點選區塊2裡已經拖好的 widget 看它的屬性，如下圖

按鈕的屬性

按鈕的屬性裡有一個"objectName"，這個是 widget 的名稱，所有的 widget 的名稱必須是唯一的，用 C++ 控制 widget 時會用這個名稱作為變數的名稱，待會會說明，而 "text"可以調整按鈕上所顯示的文字。

  接著先同步專案，如果有更動到 widget 的名稱，不論是新增、修改或移除時請先同步一次專案，如何同步呢?如下圖

同步專案

先清除專案後，再執行 qmake ，這樣就完成同步專案。

  接著來為按鈕增加事件，回到專案的 mainwindow.cpp 檔裡實驗一下專案是否同步

確認專案是否同步

在 MainWindow::MainWindow() 裡輸入"ui->"後，看 IDE跳出來的變數裡有沒有按鈕的名稱( pushButton )，如果沒有表示專案沒同步，請做一次同步的動作。

  接著來綁定按鈕的事件，我們需要先做一個當按鈕被按下後會啟動的 function ，可以在 mainwindow.h 裡找到它，如下

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>

QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE

class MainWindow : public QMainWindow
{
  Q_OBJECT

public:
  MainWindow(QWidget *parent = nullptr);
  ~MainWindow();
private slots:
  void onPushButton_Clicked(bool checked);
private:
  Ui::MainWindow *ui;
};
#endif // MAINWINDOW_H

紅色的部分是新增的部分，要注意有個 C++ 沒有的"slots"，實作的內容如下

void MainWindow::onPushButton_Clicked(bool checked)
{
  qDebug("Hello Qt");
}

qDebug() 是 Qt 裡提供顯示 debug 訊息的 function ，用法類似 printf() ，接著綁定事件的部分在
 MainWindow::MainWindow() 裡，如下

connect(ui->pushButton,&QPushButton::clicked,this,&MainWindow::onPushButton_Clicked);

參數1就是按鈕的變數，參數2是按鈕的事件，參數3是當事件發生後要被通知的對象，範例的對象就是 MainWindow 自己，參數4 則是要被喚起的 funciton ，綁訂完後執行，按下"HelloQt"按鈕，如下圖

按下按鈕後顯示訊息

在應用程式輸出的分頁裡可以看到訊息。如果要解除事件綁定可以用以下

disconnect(ui->pushButton,&QPushButton::clicked,this,&MainWindow::onPushButton_Clicked);

參數的形式和 connect() 一樣，範例中在 MainWindow::~MainWindow() 解除綁定，但其實這個動作是沒有必要的， Qt 在 widget 被刪除時會自動解除綁定，此處只是做個解除的示範而已。

相關文章

Qt Creator 入門
[ GitLab ] HelloQt