Tạo GUI trong C++ Sử Dụng Qt

22/09/2020•4 min read

Giới thiệu Qt, hướng dẫn download, cài đặt tích hợp với Visual Studio và trình bày demo cơ bản để sử dụng Qt.

Qt là gì?

Qt là 1 ứng dụng đa nền tảng (phát triển ứng dụng trên các platform khác nhau: Windows, Linux/X11, iOS, Android, ...), 1 framework UI (cho phép tạo ứng dụng với giao diện đồ hoạ). Ứng dụng tạo ra bởi Qt có thể chạy trên desktop, mobile hay trên các hệ thống nhúng.

Hiện nay, Qt được xây dựng có cả bản thương mại và open source. Qt cho phép tạo giao diện 1 cách đơn giản là kéo thả.

Qt cho phép hiện thực hàm tạo và xử lý sự kiện bằng C++, và xây dựng nhiều class để hỗ trợ cho việc phát triển ứng dụng với giao diện đồ hoạ.

Với bản release mới nhất của Qt, có thể add-in vào Visual Studio.

Download và cài đặt

Download

Qt

Qt có các phiên bản tương thích với các hệ điều hành khác nhau:

Hoặc truy cập địa chỉ https://www.qt.io/download-qt-installer, trang web sẽ tự động lựa chọn phiên bản thích hợp cho hệ điều hành máy của bạn.

Visual Studio Add-in for Qt

Truy cập địa chỉ https://download.qt.io/official_releases/vsaddin/ để tải về phiên bản Visual Studio Add-in for Qt mới nhất.

Visual Studio Add-in phiên bản 2.5.2

Cài đặt

Thực hiện cài đặt 2 file trên sau khi download.

Đối với Qt, cài đặt tại thư mục: C:\Qt

Đối với Qt Add-in, cài đặt tại thư mục: C:\Program Files (x86)\Digia

Thiết lập môi trường

Vào menu Start, tìm đến "Edit Eviroment variables for your account": thêm đường dẫn đến thư mục bin của Qt vào variables PATH. Nếu chưa có variables PATH, có thể New để thêm.

Khởi động Visual Studio, trên thanh công cụ xuất hiện thêm tab mới QT5, vào QT5 → Qt Options → chọn Add Qt version.

Tạo project Demo

File → New → Project. Tạo Qt Application project. Như hình dưới.

Sau khi tạo project. Build chương trình để tự động tạo các file mặc định. Quan tâm tới 1 số file như sau:

stdio_demo_qt.ui: hỗ trợ thiết kế giao diện trực quan.

ui_stdio_demo_qt.h: quản lý các đối tượng trên UI (tạo, thiết lập thuộc tính, tạo kết nối sự kiện giữa các QObject).
class STDIO_DEMO_QT (stdio_demo_qt.cpp, stdio_demo_qt.h): cho phép tạo ra các function signals và slots để quản lý sự kiện xảy ra đối với các QObject.

Signals & Slots

Signals: hình dung nó như là các hàm kiểm tra sự kiện (click button, changeValue của comboBox, changeText của textBox, ...), Qt đã hỗ trợ sẵn 1 vài hàm kiểm tra sự kiện, tuy nhiên, cũng có thể tự định nghĩa tuỳ vào yêu cầu của project.
Slots: các hàm để xử lý sự kiện tương ứng với sự kiện được kích hoạt.

Chỉ có các lớp là lớp con kế thừa từ QObject mới có thể chứa Signals và Slots, đồng thời, các lớp này phải chứa từ khoá Q_OBJECT nằm ở đầu của khai báo lớp.

Để liên kết các Signals và Slots với nhau, cần phải thiết lập kết nối giữa các đối tượng thông qua function QObject::connect().

Khai báo, định nghĩa các hàm signals và Slots:

/*
* @File: stdio_demo_qt.h
*/
// Trong phần khai báo của subClasses QObject 
signals:
// function for check event
// example: void clickPushButton();
// Tuy nhiên, trong project này sử dụng function click() mặc định của Qt.
public slots:
	void showMessage()
	{
		QMessageBox::StandardButton reply;
		reply = QMessageBox::question(this, "Exit", "Are you sure you want to quit?", QMessageBox::Yes | QMessageBox::No);

		if (reply == QMessageBox::Yes)
			QApplication::quit();
	}

Thực hiện kết nối:

/*
* @File: stdio_demo_qt.cpp
*/ 
// Được gọi trong hàm khởi tạo của STDIO_DEMO_QTClass
// connect Button with MainWindow 
QObject::connect(ui.pushButton, SIGNAL(clicked()), this, SLOT(showMessage()));

Chạy ứng dụng không cài đặt Qt

Để thực thi chương trình trên 1 máy tính không cài đặt Qt, thư mục chứa file thực thi phải đi kèm với các file .dll (chứa trong C:\Qt\Qt5.5.0\5.5\msvc2013\bin) và folder platform (chứa trong C:\Qt\Qt5.5.0\5.5\msvc2013\plugins) của Qt. Xem hình dưới.

Kết quả chạy chương trình:

Download demo tại đây: STDIO_DEMO_QT