Cách sử dụng Qt Designer để thiết kế UX/UI trong PyQt.

Trong bài viết này, bạn sẽ tìm hiểu cách sử dụng Qt Designer, một công cụ mạnh mẽ giúp bạn thiết kế giao diện người dùng (UI) trực quan cho các ứng dụng PyQt. Thay vì viết mã giao diện từ đầu, Qt Designer cho phép bạn kéo thả các thành phần giao diện, sau đó tự động tạo mã Python cần thiết. Điều này giúp tối ưu hóa thời gian phát triển và nâng cao hiệu suất cho các dự án lớn. Qua đó, bạn sẽ nắm vững quy trình thiết kế và tích hợp giao diện từ Qt Designer vào mã nguồn Python, giúp xây dựng ứng dụng hiệu quả và chuyên nghiệp hơn.

Cài đặt PyQt và các công cụ hỗ trợ

PyQt6 hiện tại tương thích với Python 3.9. Vì vậy, bạn cần cài đặt Python 3.9 để tiếp tục theo dõi hướng dẫn.

Nếu bạn đã có phiên bản Python 3.10 hoặc cao hơn, bạn có thể cài đặt Python 3.9 ở một thư mục riêng và sử dụng công cụ PyQt6. Ví dụ, bạn có thể cài đặt Python 3.9 trong thư mục C:\Python39 trên Windows.

Tạo môi trường ảo mới

Đầu tiên, tạo một thư mục để lưu các dự án PyQt6, ví dụ D:\pyqt6:

Bài viết này được đăng tại [free tuts .net]

mkdir pyqt6

Sau đó, tạo một môi trường ảo với Python 3.9 bằng cách sử dụng module venv:

python -m venv D:\pyqt6\pyqt6-env

Kích hoạt môi trường ảo

Điều hướng đến thư mục môi trường ảo pyqt6-env:

cd D:\pyqt6\pyqt6-env

Tiếp theo, đi vào thư mục Scripts:

cd Scripts

Kích hoạt môi trường ảo bằng lệnh:

activate

Nếu thành công, bạn sẽ thấy dòng sau trên Windows:

(pyqt6-env) d:\pyqt6\pyqt6-env\Scripts>

Cài đặt PyQt6 và các công cụ liên quan

Chạy lệnh sau để cài đặt gói PyQt6 vào môi trường ảo:

pip install pyqt6

Tiếp theo, cài đặt gói pyqt6-tools, bao gồm Qt Designer và các công cụ liên quan:

pip install pyqt6-tools

Qt Designer sẽ được cài đặt tại vị trí sau:

D:\pyqt6\pyqt6-env\Lib\site-packages\qt6_applications\Qt\bin\designer.exe

Kiểm tra phiên bản của pyuic6 trong môi trường ảo bằng lệnh sau:

pyuic6 -V

Kết quả sẽ hiển thị phiên bản, ví dụ:

6.1.0

Lệnh pyuic6 dùng để chuyển đổi file thiết kế .ui được tạo bởi Qt Designer thành file Python .py.

Mở Qt Designer

Từ dòng lệnh, chạy lệnh sau để mở Qt Designer:

(pyqt6-env) d:\pyqt6\pyqt6-env\Scripts>designer

Tạo form đăng nhập

Chúng ta sẽ tạo một form đăng nhập đơn giản bằng cách sử dụng Qt Designer và tải nó vào chương trình Python.

• Chọn File > New hoặc nhấn phím tắt Ctrl-N để mở hộp thoại New Form.

• Chọn Widget từ danh sách mẫu và nhấp nút Create.

• Giao diện QWidget sẽ xuất hiện, bạn có thể kéo thả các widget từ Widget Box vào form.

Thiết lập thuộc tính cho các widget

Trong Property Editor, bạn có thể đặt tên cho widget, ví dụ: login_form, và tiêu đề cho cửa sổ.

Thêm các widget vào form đăng nhập

Thêm các widget QLabel, QLineEdit, và QPushButton vào form. Bảng dưới đây mô tả các trường, loại widget, và tên đối tượng tương ứng:

• Thiết lập chế độ ẩn ký tự cho trường mật khẩu (password_line_edit) bằng cách đặt Echo Mode thành Password.

• Nhấp chuột phải vào form và chọn Set Layout > Form Layout để đặt layout cho form.

• Điều chỉnh kích thước của nút Đăng nhập bằng cách thay đổi thuộc tính Horizontal Size Policy thành Fixed.

• Lưu form vào thư mục D:\pyqt6 dưới tên login_form.ui.

• Chọn Form > Preview... hoặc nhấn Ctrl-R để xem trước form.

Sử dụng file .ui trong chương trình Python

Có hai cách để sử dụng file login_form.ui trong chương trình Python:

• Chuyển đổi file .ui thành file mã Python.
• Sử dụng trực tiếp file .ui trong chương trình.

Chuyển đổi file .ui thành mã Python

Chạy lệnh sau để chuyển file login_form.ui thành file Python login_form.py:

pyuic6 -o login_form.py login_form.ui

Lưu ý không chỉnh sửa file login_form.py sau khi nó được tạo, vì các thay đổi sẽ bị mất nếu bạn chỉnh sửa lại file .ui và tạo lại file .py.

Tạo chương trình đăng nhập từ file đã chuyển đổi

Tạo file login.py và nhập lớp Ui_login_form từ file login_form.py:

import sys
from PyQt6.QtWidgets import QApplication, QWidget
from login_form import Ui_login_form

class Login(QWidget):
    def __init__(self):
        super().__init__()
        self.ui = Ui_login_form()
        self.ui.setupUi(self)
        self.show()

if __name__ == '__main__':
    app = QApplication(sys.argv)
    login_window = Login()
    sys.exit(app.exec())

Chạy file login.py để hiển thị form đăng nhập:

python login.py

Tham chiếu các widget con

Bạn có thể tham chiếu các widget con thông qua biến self.ui. Ví dụ, thêm một chức năng kiểm tra xác thực khi người dùng nhấp vào nút Đăng nhập:

import sys
from PyQt6.QtWidgets import QApplication, QWidget, QMessageBox
from login_form import Ui_login_form

class Login(QWidget):
    def __init__(self):
        super().__init__()
        self.ui = Ui_login_form()
        self.ui.setupUi(self)
        self.ui.btn_login.clicked.connect(self.authenticate)
        self.show()

    def authenticate(self):
        email = self.ui.email_line_edit.text()
        password = self.ui.password_line_edit.text()

        if email == 'john@test.com' and password == '123456':
            QMessageBox.information(self, 'Thành công', "Bạn đã đăng nhập thành công!")
        else:
            QMessageBox.critical(self, 'Lỗi', "Email hoặc mật khẩu không hợp lệ.")

if __name__ == '__main__':
    app = QApplication(sys.argv)
    login_window = Login()
    sys.exit(app.exec())

Cách này kết nối nút btn_login với hàm xác thực và hiển thị thông báo thành công hoặc thất bại tùy vào kết quả kiểm tra.

Sử dụng file .ui trực tiếp

Thay vì chuyển đổi file .ui thành mã Python, bạn có thể sử dụng trực tiếp file .ui bằng cách sử dụng hàm loadUi() từ module uic:

from PyQt6.QtWidgets import QApplication, QWidget, QMessageBox
from PyQt6 import uic
import sys

class Login(QWidget):
    def __init__(self):
        super().__init__()
        self.ui = uic.loadUi('login_form.ui', self)
        self.ui.btn_login.clicked.connect(self.authenticate)
        self.show()

    def authenticate(self):
        email = self.ui.email_line_edit.text()
        password = self.ui.password_line_edit.text()

        if email == 'john@test.com' and password == '123456':
            QMessageBox.information(self, 'Thành công', "Bạn đã đăng nhập thành công!")
        else:
            QMessageBox.critical(self, 'Lỗi', "Email hoặc mật khẩu không hợp lệ.")

if __name__ == '__main__':
    app = QApplication(sys.argv)
    login_window = Login()
    sys.exit(app.exec())

Khi nào nên sử dụng Qt Designer?

File .ui do Qt Designer tạo ra cung cấp một lớp trừu tượng giữa widget và mã chương trình. Nếu bạn mới bắt đầu học PyQt, nên tự viết mã UI thủ công để hiểu rõ cách các widget hoạt động. Tuy nhiên, khi làm việc với các dự án lớn, việc sử dụng Qt Designer sẽ giúp tiết kiệm thời gian và tăng năng suất.

Kết bài

Qua bài hướng dẫn này, bạn đã học cách sử dụng Qt Designer để thiết kế giao diện cho các ứng dụng PyQt lớn một cách hiệu quả. Việc kết hợp công cụ pyuic6 để chuyển đổi file .ui thành mã Python giúp tự động hóa quy trình và tiết kiệm thời gian. Ngoài ra, sử dụng hàm loadUi() từ module uic để tải trực tiếp file .ui cung cấp một cách tiếp cận linh hoạt trong việc làm việc với giao diện người dùng. Bằng cách nắm vững những công cụ này, bạn có thể phát triển ứng dụng PyQt một cách nhanh chóng và chuyên nghiệp, đặc biệt là trong các dự án lớn và phức tạp.