Raspberry Pi OS Qt5 與 GTK4 GUI 開發入門指引

– 9 分鐘閱讀

在嵌入式系統中，圖形使用者介面（GUI）的開發扮演著至關重要的角色。Qt5 和 GTK4 作為兩種主流的 GUI 工具包，為開發者提供了便捷的跨平台開發方案。本文將引導讀者如何在 Raspberry Pi OS 環境下，利用這兩個工具包構建 GUI 應用程式，從安裝到基本程式碼範例，逐步深入 Qt5 的訊號與槽機制，並比較 C++ 回撥函式的異同，最後探討其應用場景與未來發展趨勢。藉由清晰的步驟說明和程式碼解析，讓即使是初學者也能快速掌握 GUI 開發的基礎技巧，並為進一步的學習奠定堅實的基礎。

Raspberry Pi OS 系統管理：Qt5 與 GTK4 工具包基礎

Qt5 與 GTK4 工具包概觀

在這一章節中，我們將簡要介紹 Qt5 和 GTK4 這兩個強大的軟體框架。這些框架提供了一種實用且有效的方法，讓初學者能夠快速上手使用 X Window System 進行圖形使用者介面（GUI）開發。這些框架的核心模型可以總結為：

  • 資料生成
  • 視窗生成/建構
  • 資料對映到建構好的視窗

這種模型的主要目的是展示一種實際且有用的方法，讓初學者能夠輕鬆理解並應用 X Window System 的程式設計技術。這些框架並不要求讀者具備深厚的 C 或 C++ 程式語言知識，只需基本的程式設計經驗即可。

Qt5 與 GTK4 的應用範圍

Qt5 和 GTK4 都能建立非常基本的 GUI 元素，例如一個空白的視窗。而在進階設計和實施中，甚至可以建立完整的視窗管理系統。這些框架提供了一個簡單易用的中介工具，減少了直接處理 X 協定結構和 Xlib 或 XCB 函式的編碼複雜度。

Qt5 框架

安裝 Qt5 框架

首先，我們需要在系統中安裝 Qt5 框架。以下是安裝 Qt5 的步驟：

sudo apt update
sudo apt install qt5-default qtcreator

建立可執行的 Qt5 程式

接下來，我們將從命令列建立一個簡單的 Qt5 程式。以下是範例程式碼：

#include <QApplication>
#include <QWidget>

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

    QWidget window;
    window.resize(300, 200);
    window.setWindowTitle("Hello, Qt!");
    window.show();

    return app.exec();
}

編譯與執行

將上述程式碼儲存為 main.cpp，然後使用以下命令進行編譯：

qmake -project
qmake
make

編譯完成後，執行以下命令執行程式：

./yourappname

內容解密：

以上範例程式碼展示瞭如何使用 Qt5 建立一個簡單的視窗應用程式。以下是詳細解說：

  • #include <QApplication>：包含 Qt 的應用程式類別。
  • #include <QWidget>：包含 Qt 的基礎視窗類別。
  • QApplication app(argc, argv);：建立一個 Qt 應用程式物件。
  • QWidget window;：建立一個基礎視窗物件。
  • window.resize(300, 200);：設定視窗大小為 300x200 畫素。
  • window.setWindowTitle("Hello, Qt!");：設定視窗標題。
  • window.show();：顯示視窗。
  • return app.exec();：進入應用程式事件迴圈。

GTK4 基礎及建立簡單小工具

GTK4 是另一個強大的 GUI 工具包，與 Qt5 有著相似的目標。以下是如何在 Raspberry Pi OS 上安裝和使用 GTK4 的基本步驟。

安裝 GTK4

首先，我們需要安裝 GTK4：

sudo apt update
sudo apt install libgtk-4-dev

建立簡單小工具

以下是使用 GTK4 建立一個簡單小工具的範例程式碼：

#include <gtk/gtk.h>

int main(int argc, char *argv[]) {
    gtk_init(&argc, &argv);

    GtkWidget *window = gtk_window_new();
    gtk_window_set_title(GTK_WINDOW(window), "Hello, GTK!");
    gtk_window_set_default_size(GTK_WINDOW(window), 300, 200);
    g_signal_connect(window, "destroy", G_CALLBACK(gtk_main_quit), NULL);
    gtk_widget_show(window);

    gtk_main();
    return 0;
}

編譯與執行

將上述程式碼儲存為 main.c，然後使用以下命令進行編譯：

gcc main.c -o myapp `pkg-config --cflags --libs gtk4`

編譯完成後，執行以下命令執行程式：

./myapp

內容解密：

以上範例程式碼展示瞭如何使用 GTK4 建立一個簡單的視窗應用程式。以下是詳細解說：

  • #include <gtk/gtk.h>：包含 GTK 的標頭檔。
  • gtk_init(&argc, &argv);：初始化 GTK 函式庫。
  • GtkWidget *window = gtk_window_new();：建立一個新的視窗物件。
  • gtk_window_set_title(GTK_WINDOW(window), "Hello, GTK!");：設定視窗標題。
  • gtk_window_set_default_size(GTK_WINDOW(window), 300, 200);：設定視窗大小為 300x200 畫素。
  • g_signal_connect(window, "destroy", G_CALLBACK(gtk_main_quit), NULL);：連線視窗關閉訊號到離開函式。
  • gtk_widget_show(window);：顯示視窗。
  • gtk_main();：進入 GTK 主事件迴圈。

探索與學習

Qt5 和 GTK4 都有豐富的線上檔案和內建幫助系統，鼓勵讀者進一步探索和實驗。這兩個框架都能夠建立從基本 GUI 元素到複雜視窗管理系統的一系列應用程式。

透過這些框架，初學者可以輕鬆上手並快速掌握 GUI 開發的基本技巧，而不需要深入瞭解 Xlib 或 XCB 的底層細節。這樣的抽象層次讓開發過程更加高效且直觀。

使用 Qt5 開發桌面應用程式的實務指引

介紹 Qt5 開發環境

Qt5 是一個功能強大且廣泛使用的跨平台 C++ 底層框架，適合開發圖形使用者介面（GUI）應用程式。它提供了豐富的類別和工具，能夠簡化應用程式的開發過程。Qt5 的主要功能包括訊號與插槽機制、內建的 GUI 元件（如按鈕、標籤、文字編輯框等）以及靈活的佈局管理系統。

安裝 Qt5 開發環境

在開始使用 Qt5 之前，首先需要下載並安裝 Qt5 開發環境。以下是使用命令列安裝 Qt5 的步驟：

$ sudo apt-get update
$ sudo apt-get install qtbase5-dev qtchooser
$ sudo apt-get install qt5-qmake qtbase5-dev-tools
$ sudo apt-get install qtcreator
$ sudo apt-get install qtdeclarative5-dev

安裝完成後，Qt Creator 會自動新增到 Raspberry Pi 的程式開發選單中。可以透過 Qt Creator 的幫助系統取得更多資訊。

建立並執行 Qt5 專案

Qt5 提供了自己的編譯、連結和組裝流程，以下是如何在命令列中建立並執行 Qt5 專案的步驟：

步驟一：建立專案目錄

首先，在家目錄下建立一個新的目錄，例如 qtprogs1，並進入該目錄。

$ mkdir ~/qtprogs1
$ cd ~/qtprogs1

步驟二：編寫 Qt5 原始碼

使用你喜歡的文字編輯器建立一個名為 hello.cpp 的檔案，並新增以下程式碼：

#include <QApplication>
#include <QLabel>

int main(int argc, char **argv) {
    QApplication app(argc, argv);
    QLabel label("Hello, world!");
    label.show();
    return app.exec();
}

這段程式碼建立了一個簡單的 Qt5 應用程式視窗，顯示 “Hello, world!” 的文字。

步驟三：生成專案檔案

在當前目錄下執行 qmake -project 命令生成專案檔案。

$ qmake -project

步驟四：生成 Makefile

接著執行 qmake 命令生成 Makefile。

$ qmake

步驟五：編輯 hello.pro 檔案

開啟 hello.pro 檔案，新增以下內容：

INCLUDEPATH += .
QT += gui widgets

這些設定將確保編譯器能夠找到必要的函式庫和標頭檔案。

步驟六：編譯應用程式

執行 make 命令來編譯應用程式。

$ make

步驟七：執行應用程式

最後，執行編譯出的可執行檔案 ./hello。

$ ./hello

這樣就可以看到一個顯示 “Hello, world!” 的視窗了。

探討 Qt5 處理事件

Qt5 應用程式中，事件處理是非常重要的一部分。以下是一個簡單的範例，展示如何在 Qt5 中建立和顯示一個內建的文字編輯視窗。

輸入範例程式碼

建立一個名為 textedit.cpp 的檔案，並在其中新增以下程式碼：

#include <QApplication>
#include <QTextEdit>

int main(int argv, char **args) {
    QApplication app(argv, args);
    QTextEdit textEdit;
    textEdit.show();
    return app.exec();
}

說明程式碼邏輯

內容解密：
  • #include 和 #include ：這兩行包含了所需的類別標頭檔案。
  • QApplication app(argv, args);：建立了一個 QApplication 物件，這是所有 Qt 應用程式的核心部分。
  • QTextEdit textEdit;：建立了一個 QTextEdit 物件。
  • textEdit.show();：將 QTextEdit 物件顯示在螢幕上。
  • return app.exec();：進入事件迴圈並等待事件觸發。

新增離開按鈕

為了讓應用程式更加完整，我們可以新增一個離開按鈕。以下是完整的範例程式碼：

#include <QApplication>
#include <QTextEdit>
#include <QPushButton>
#include <QVBoxLayout>
#include <QWidget>

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

    QWidget window;
    QVBoxLayout *layout = new QVBoxLayout;

    QTextEdit *textEdit = new QTextEdit;
    layout->addWidget(textEdit);

    QPushButton *quitButton = new QPushButton("Quit");
    layout->addWidget(quitButton);

    window.setLayout(layout);
    window.show();

    QObject::connect(quitButton, &QPushButton::clicked, &app, &QApplication::quit);

    return app.exec();
}

說明程式碼邏輯

內容解密：
  • #include 命令：這些包含了所需的類別標頭檔案。
  • QWidget window;：建立了一個主視窗。
  • QVBoxLayout *layout = new QVBoxLayout;：建立了一個垂直佈局管理器。
  • layout->addWidget(textEdit); 和 layout->addWidget(quitButton);：將 QTextEdit 和離開按鈕新增到佈局中。
  • window.setLayout(layout);：設定主視窗的佈局。
  • window.show();：顯示主視窗。
  • connect: 建立連線，當按鈕被點選時離開應用程式。

使用 Qt 的訊號與槽機制

Qt 是一個跨平台的 C++ 應用程式框架，提供了豐富的 GUI 元件和強大的訊號與槽機制。這些機制使得應用程式之間的通訊變得更加簡單且靈活。本文將探討 Qt 的訊號與槽機制，並透過具體的範例來說明其應用。

訊號與槽的基本概念

訊號與槽是 Qt 中用於物件之間通訊的機制。當一個物件發出訊號時，與該訊號連線的所有槽函式都會被呼叫。這種機制類別似於 C/C++ 的回撥函式，但更加靈活且型別安全。

範例程式碼

以下是一個簡單的 Qt 應用程式範例，展示瞭如何使用訊號與槽機制來實作離開功能：

#include <QtGui>
#include <QApplication>
#include <QTextEdit>
#include <QPushButton>
#include <QObject>
#include <QVBoxLayout>
#include <QWidget>

int main(int argc, char **argv)
{
    QApplication app(argc, argv);
    QTextEdit *textEdit = new QTextEdit;
    QPushButton *quitButton = new QPushButton("&Quit");
    QObject::connect(quitButton, SIGNAL(clicked()), qApp, SLOT(quit()));
    QVBoxLayout *layout = new QVBoxLayout;
    layout->addWidget(textEdit);
    layout->addWidget(quitButton);
    QWidget window;
    window.setLayout(layout);
    window.show();
    return app.exec();
}

內容解密：

  • 行 1 到 7：這些是包含 Qt5 GUI 類別所需的標頭檔。
  • 行 8：宣告兩個指標物件，用於參考以下類別的物件。
  • 行 10：這一行使用 Qt 的訊號與槽機制來使應用程式在按下「離開」按鈕時結束。quit() 是 QApplication 的一個槽函式，當呼叫時會離開應用程式；clicked() 是 QPushButton 在按下時發出的訊號。
  • 行 14 到 17：這些行建立了一個 QVBoxLayout。widgets 可以包含其他 widgets。雖然可以直接設定子 widgets 的範圍（位置和大小），但通常使用佈局會更容易。佈局管理子 widgets 的範圍。QVBoxLayout 將子 widgets 放置在垂直排列中。
  • 行 19：顯示視窗。
  • 行 20：啟動事件迴圈。

比較 C++ 的回撥函式

為了更好地理解 Qt 的訊號與槽機制，我們來看一個使用 C++ 的回撥函式的範例：

#include <stdio.h>

// Callback function type definition
typedef void (*OperationCallback)(int, int);

// Function that takes two integers and a callback function as arguments
void performOperation(int a, int b, OperationCallback callback) {
    printf("Performing operation on %d and %d:\n", a, b);
    callback(a, b);
}

// Callback function implementations
void addCallback(int a, int b) {
    printf("Sum: %d\n", a + b);
}

void multiplyCallback(int a, int b) {
    printf("Product: %d\n", a * b);
}

int main() {
    int num1 = 10, num2 = 5;
    // Using the performOperation function with addCallback
    performOperation(num1, num2, addCallback);
    // Using the performOperation function with multiplyCallback
    performOperation(num1, num2, multiplyCallback);
    return 0;
}

內容解密：

  • 行 3：定義了一個回撥函式型別 OperationCallback。
  • 行 6：定義了一個函式 performOperation，它接受兩個整數和一個回撥函式作為引數。
  • 行 9：回撥函式 addCallback 處理兩個整數的加法運算。
  • 行 13：回撥函式 multiplyCallback 處理兩個整數的乘法運算。
  • 行 16 和 行 18：在 main 函式中，分別使用 addCallback 和 multiplyCallback 作為回撥函式來呼叫 performOperation。

應用場景與未來趨勢

訊號與槽機制在非 GUI 的程式設計中也有廣泛應用，例如非同步 I/O、事件通知等。隨著技術的發展，Qt 框架中的訊號與槽機制將會變得更加強大和靈活，支援更多複雜的應用場景。

次段落標題

小段落標題：進階應用

訊號與槽機制可以用於處理多執行緒程式設計中的事件同步問題。例如，在 Python 中使用多執行緒時，可以透過訊號與槽來實作執行緒間的通訊和同步。

次段落標題：技術選型分析

在選擇使用 Qt 框架時，需要考慮其跨平台性、豐富的 GUI 元件函式庫以及強大的事件處理機制。Qt 框架適合需要快速開發、跨平台佈署且需要豐富 UI 元件的應用場景。

次段落標題：實務案例

在玄貓的一個專案中，我們使用了 Qt 框架來開發一個跨平台的桌面應用程式。透過訊號與槽機制，我們成功地實作了應用程式中的多個模組之間的無縫通訊和協同工作。

次段落標題：未來趨勢預測

未來，Qt 框架將會進一步融合更多現代化技術，如人工智慧和機器學習，使得開發者能夠更方便地構建智慧化應用。隨著技術的不斷進步，Qt 框架中的訊號與槽機制將會變得更加高效和靈活。

網路資源整合圖示

  graph TD
A[Qt Application] --> B[Signal]
B --> C[Slot]
C --> D[Event Handling]
D --> E[GUI Update]
E --> F[User Interaction]
F --> A

網路資源整合圖示解說：

此圖示展示了 Qt 應用程式中的事件處理流程。當使用者進行操作時，會觸發相應的訊號；這些訊號連線到對應的槽函式中；槽函式處理事件並更新 GUI；最後反饋給使用者進行下一步操作。這種機制使得應用程式能夠高效地處理各種事件並保持回應性。

玄貓

玄貓

技術愛好者，專注於分享程式開發、雲端技術與 AI 應用的心得體會。