Trong bài viết hướng dẫn này, bạn sẽ được tìm hiểu về cách sử dụng lớp QPushButton của thư viện PyQt6 để tạo một nút ấn.

Giới thiệu về QPushButton trong PyQt

Lớp QPushButton cho phép bạn khởi tạo ra một nút ấn, một sự kiện thông thường khi nhấn vào nút ấn thì một chức năng nào đó được thực hiện.
Để tạo ra một nút ấn, ta thực hiện theo các bước như sau:
Đầu tiên, ta thêm lớp QPushButton từ thư viện PyQt6.QtWidgets:

from PyQt6.QtWidgets import QPushButton

Thứ hai, ta gọi lớp QPushButton() để tạo ra một đối tượng như là một thể hiện của QPushButton, ta truyền vào một chuỗi ký tự để làm nhãn hiển thị trên nút ấn:

button = QPushButton("Nhấn vào tôi")

Thứ ba, ta lập trình để kết nối giữa sự kiện clicked với một hàm được thực thi:

button.clicked.connect(self.on_clicked)

Lưu ý: hàm on_clicked() là một hàm mà nó được thực hiện khi sự kiện nhấn vào nút ấn được kích hoạt.
Chương trình sau là một ví dụ minh chứng cho việc tạo một nút ấn trên cửa sổ chương trình:

import sys
from PyQt6.QtWidgets import QApplication, QWidget, QPushButton, QVBoxLayout

class MainWindow(QWidget):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)

        self.setWindowTitle('Ví dụ khởi tạo nút ấn')
        self.setGeometry(100, 100, 320, 210)

        # tạo một nút ấn
        button = QPushButton('Nhấn vào đây')

        # thiết lập vị trí các thành phần trên giao diện
        layout = QVBoxLayout()
        layout.addWidget(button)
        self.setLayout(layout)

        # hiển thị cửa sổ
        self.show()

if __name__ == '__main__':
    app = QApplication(sys.argv)

    # tạo một đối tượng thể hiện của cửa sổ chính
    window = MainWindow()

    # bắt đầu một vòng lặp sự kiện
    sys.exit(app.exec())

Kết quả của chương trình trên như sau:

Tạo Button từ QPushButton

Tạo nút ấn với biểu tượng icon

Để tạo một nút ấn với một icon, ta thực hiện theo các bước sau:
Đầu tiên, ta thêm lớp QIcon từ thư viện PyQt6.QtGui:

from PyQt6.QtGui import QIcon

Thứ hai, tạo một đối tượng như là một thể hiện của QPushButton:

button = QPushButton('Thêm')

Thứ ba, thêm icon vào nút ấn bằng cách gọi đến phương thức setIcon() của lớp QPushButton với một đối tượng từ lớp QIcon:

button.setIcon(QIcon('plus.png'))

Lưu ý: ta truyền vào một đường dẫn đến nơi lưu trữ icon để sinh ra đối tượng thể hiện của lớp QIcon.
Để nút ấn được tương thích với giao diện hơn, ta có thể thiết lập về kích thước của nút ấn bằng cách gọi đến phương thức setFixedSize().
Kích thước của nút ấn được xác định bởi đối tượng sinh ra từ lớp QSize với hai đối số được truyền vào là sự thể hiện của width và height. Để làm được điều đó, ta cần thêm vào lớp Qsize từ lớp PyQt6.QtCore.
Chương trình dưới đây nhằm hiển thị ra một nút ấn với một icon:

import sys
from PyQt6.QtWidgets import QApplication, QWidget, QPushButton, QVBoxLayout
from PyQt6.QtCore import QSize
from PyQt6.QtGui import QIcon

class MainWindow(QWidget):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)

        self.setWindowTitle('Ví dụ thêm icon vào nút ấn')
        self.setGeometry(100, 100, 320, 210)

        # tạo nút ấn
        button = QPushButton('Thêm')
        # thêm icon vào nút ấn
        button.setIcon(QIcon('plus.png'))
        # thiết lập kích thước của nút ấn
        button.setFixedSize(QSize(100, 30))

        # thiết lập bố cục trên giao diện
        layout = QVBoxLayout()
        layout.addWidget(button)
        self.setLayout(layout)

        # hiển thị giao diện
        self.show()

if __name__ == '__main__':
    app = QApplication(sys.argv)

    # khởi tạo đối tượng của sổ
    window = MainWindow()

    # bắt đầu vòng lặp sự kiện
    sys.exit(app.exec())

Kết quả của chương trình trên như sau:

Thêm icon vào Button

Tạo một kết nối đến một hàm

Lớp QPushButton có thuộc tính checkable mà ở đó cho phép bạn sử dụng nút ấn như một trạng thái kiểm tra có thực hiện chức năng nào đó hay không.
Trạng thái chuyển đổi sẽ có hai trạng thái: on hoặc off. Nếu nhấn vào nút ấn thì trạng thái xác định đã nhấn hay chưa sẽ là true. Ngược lại sẽ là false.
Chương trình sau đây là ví dụ cho việc kết nối sự kiện nhấn nút ấn để thực hiện chức năng nào đó:

import sys
from PyQt6.QtWidgets import QApplication, QWidget, QPushButton, QVBoxLayout
from PyQt6.QtCore import QSize
from PyQt6.QtGui import QIcon

class MainWindow(QWidget):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)

        self.setWindowTitle('Ví dụ thêm icon vào nút ấn')
        self.setGeometry(100, 100, 320, 210)

        # tạo nút ấn
        button = QPushButton('Thêm')
        # thêm icon vào nút ấn
        button.setIcon(QIcon('plus.png'))
        # thiết lập kích thước của nút ấn
        button.setFixedSize(QSize(100, 30))

        button.setCheckable(True)
        button.clicked.connect(self.hien_thi)

        # thiết lập bố cục trên giao diện
        layout = QVBoxLayout()
        layout.addWidget(button)
        self.setLayout(layout)

        # hiển thị giao diện
        self.show()

    # hàm hiển thị thông báo đã nhấn vào nút ấn
    def hien_thi(self, checked):
        print(checked)

if __name__ == '__main__':
    app = QApplication(sys.argv)

    # khởi tạo đối tượng của sổ
    window = MainWindow()

    # bắt đầu vòng lặp sự kiện
    sys.exit(app.exec())

Kết quả chương trình trên là:

Kết nối giữa nút ấn với hàm

Giới thiệu về QLabel

Trong bài viết này chúng ta dược tìm hiểu về cách sử dụng lớp QLabel trong thư viện PyQt6. QLabel là một widget được dùng để hiển thị dữ liệu dạng văn bản, hình ảnh (hiển thị ảnh với nhiều định dạng như jpg, png, svg, …)
Để tạo một label widget, ta thực hiện theo các bước như sau:
Đầu tiên, thêm lớp QLabel widget từ thư viện PyQt6.QtWidgets:

from PyQt6.QtWidgets import QLabel

Thứ hai, tạo một đối tượng là một thể hiện (instance) của lớp QLabel:

label = QLabel("Hiển thị nội dung văn bản.")

Trong cú pháp trên, bạn đã truyền một chuỗi ký tự (string) mà bạn muốn hiển thị lên giao diện bằng QLabel.
Tuy nhiên, bạn cũng có thể sử dụng phương thức setText() để thiết lập giá trị chuỗi ký tự mà bạn muốn hiển thị sau khi tạo một đối tượng từ QLabel:

label = QLabel()
label.setText("Hiển thị nội dung văn bản.")

Bên trên là ta hiển thị nội dung văn bản lên giao diện, vậy, làm như nào để lấy nội dung mà ta thấy trên giao diện đã có. Để lấy giá trị nội dung văn bản của QLabel, bạn dùng phương thức text():

label.text()

Để xoá bỏ dữ liệu văn bản của QLabel, ta sử dụng phương thức clear():

label.clear()

Ví dụ về QLabel đầu tiên

Trong chương trình dưới đây, ta lập trình để hiển thị một nội dung văn bản bằng QLabel:

import sys
from PyQt6.QtWidgets import QApplication, QWidget, QLabel, QVBoxLayout

class MainWindow(QWidget):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)

        self.setWindowTitle("Ví dụ 1")
        self.setGeometry(150, 150, 320, 210)

        # tạo một QLabel
        label = QLabel("Hiển thị nội dung văn bản bằng QLabel")

        # thiết lập vị trí của QLabel trên giao diện
        layout = QVBoxLayout()
        layout.addWidget(label)
        self.setLayout(layout)

        # hiển thị trên giao diện
        self.show()

# chương trình chính
if __name__ == "__main__":
    app = QApplication(sys.argv)

    # tạo của sổ chính
    window = MainWindow()

    # tạo vòng lặp sự kiện
    sys.exit(app.exec())

Kết quả chương trình trên như sau:

Hiển thị văn bản bằng QLabel

Sử dụng QLabel để hiển thị một ảnh

Để hiển thị ảnh bằng strong QLabel, ta thực hiện theo các bước sau:
Đầu tiên, thêm lớp QPixmap từ thư viện PyQt6.QtGui:

from PyQt6.QtGui import QPixmap

Thứ hai, tạo đối tượng là một thể hiện của lớp QPixmap cùng với một đường dẫn đến vị trí lưu trữ ảnh:

pixmap = QPixmap("anh_dong_vat.jpg")

Với cú pháp trên, bạn phải chắc chắn rằng ảnh được lưu cùng thư mục chứa chương trình lập trình.
Thứ ba, tạo một đối tượng từ QLabel và sử dụng phương thức setPixmap() để hiển thị ảnh:

label = QLabel()
label.setPixmap(pixmap)

Chương trình hoàn chỉnh sau đây nhằm hiển thị ảnh trên giao diện sử dụng QLabel:

import sys
from PyQt6.QtWidgets import QApplication, QWidget, QLabel, QVBoxLayout
from PyQt6.QtGui import QPixmap

class MainWindow(QWidget):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)

        self.setWindowTitle('Ví dụ 2')
        self.setGeometry(200, 200, 700, 700)

        # tạo thể hiện của QLabel
        label = QLabel()
        # đối tượng lưu trữ ảnh
        pixmap = QPixmap('anh_dong_vat.jpg')
        # gán ảnh lên label
        label.setPixmap(pixmap)

        # thiết lập vị trí trên giao diện
        layout = QVBoxLayout()
        layout.addWidget(label)
        self.setLayout(layout)

        # hiển thị trên giao diện
        self.show()

if __name__ == "__main__":
    app = QApplication(sys.argv)

    # tạo đối tượng cửa sổ chính
    window = MainWindow()

    # tạo vòng lặp sự kiện
    sys.exit(app.exec())

Kết quả chương trình trên như sau:

Hiển thị ảnh bằng QLabel

Hiển thị ảnh hoạt hoạ bằng QLabel

Để hiển thị một ảnh hoạt hoạ, ta cần thực hiện các bước sau:
Thứ nhất, ta thêm lớp QMovie từ lớp PyQt6.QtGui:

from PyQt6.QtGui import QMovie

Thứ hai, tạo đối tượng như là một thể hiện của lớp QMovie cùng với đường dẫn đến ảnh hoạt hoạ:

movie = QMovie("dog-running.gif")

Thứ ba, tạo một đối tượng từ lớp QLabel:

label = QLabel()

Thứ tư, thiết lập hiển thị ảnh hoạt hoạ bằng QLabel sử dụng phương thức setMovie():

label.setMovie(movie)

Cuối cùng, gọi phương thức start() để chạy ảnh hoạt hoạ:

movie.start()

Chương trình dưới đây nhằm hiển thị ảnh hoạt hoạ bằng QLabel:

import sys
from PyQt6.QtWidgets import QApplication, QWidget, QLabel, QVBoxLayout
from PyQt6.QtGui import QMovie

class MainWindow(QWidget):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)

        self.setWindowTitle("Ví dụ 3")
        self.setGeometry(200, 200, 200, 200)

        # tạo đối tượng label
        label = QLabel()
        # tạo đối tượng movie
        movie = QMovie("dog-running.gif")
        # gán movie vào label
        label.setMovie(movie)
        # bắt đầu movie
        movie.start()

        # thiết lập vị trí trên giao diện
        layout = QVBoxLayout()
        layout.addWidget(label)
        self.setLayout(layout)

        # hiển thị cửa sổ
        self.show()


if __name__ == '__main__':
    app = QApplication(sys.argv)

    # tạo đối tượng cửa sổ
    window = MainWindow()

    # bắt đầu vòng lặp sự kiện
    sys.exit(app.exec())

Kết quả chương trình trên như sau:

Hiển thị ảnh hoạt hoạ bằng QLabel

Trong bài viết này, các bạn sẽ được tìm hiểu về Signals và Slots khi làm việc với PyQt và chúng có cách hoạt động như nào trong một chương trình PyQt.

1. Giới thiệu về Signals và Slots

Thông thường, một chương trình Python có thứ tự thực hiện từ trái sang phải, từ trên xuống dưới:

• Nhận thông tin đầu vào.
• Xử lý dữ liệu đầu vào để tạo ra đầu vào.
• Ghi kết quả ra màn hình hoặc vào tệp.

⇒Đây là một chương trình theo Phương pháp lập trình hướng cấu trúc.
Trong khi các bạn xây dựng một chương trình có giao diện GUI (Graphical User Interface) thì bạn sẽ sử dụng chính xác Phương pháp lập trình hướng sự kiện. Theo đó, trong mô hình lập trình theo hướng sự kiện, một chương trình sẽ có luồng như sau:

• Tạo các thành phần trên giao diện như Label (nhãn), Line Edit (nhập dữ liệu từ bàn phím) và Button (nút ấn).
• Bắt đầu một vòng lặp sự kiện và chờ các sự kiện được xảy ra.
• Phản hồi các sự kiện khi chúng được xảy ra bằng cách gọi các hàm thực thi tương ứng.

⇒Để kết nối các sự kiện với các hàm thực thi trong chương trình, ta sử dụng cơ chế Signals và Slots trong PyQt.

Signals

Signals là một thuộc tính đặc biệt của một đối tượng được phát ra khi một sự kiện được “phát động“. Ở đây, một sự kiện có thể là hành động của người dùng (như bấm chuột, kéo và thả, …), thời gian chờ hoặc thời gian hoàn thành một hoạt động không đồng bộ.

Slots

Một Slot được gọi là callable (có khả năng gọi được) khi nó có thể nhận một Signal và phản hồi lại nó.
Để phản hồi lại các sự kiện, bạn cần kết nối Signal với các Slot tương ứng. Theo đó, mỗi khi sự kiện được sinh ra, sự kiện phát sinh Signal và Slot được gọi và thực thi.
Trong PyQt, tất cả các lớp con của lớp QObject có thể gửi và nhận tín hiệu. Hầu như tất cả các lớp trong PyQt đều là lớp con của lớp QObject.

Ví dụ về Signals và Slots trong PyQt

Quan sát vào chương trình sau đây. Chương trình sau nhằm mục đích hiển thị một cửa sổ có một nút ấn, mỗi khi bạn nhấn vào nút ấn đó thì bạn sẽ nhận được thông báo clicked trong cửa sổ CMD (Command Prompt).

import sys
from PyQt6.QtWidgets import (QApplication, QWidget, QPushButton, QLineEdit, QVBoxLayout)

class MainWindow(QWidget):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)

        # thiết lập tiêu ề cửa sổ
        self.setWindowTitle('PyQt6 Signals & Slots')
        self.setGeometry(200, 200, 200, 200)

        # khởi tạo một nút ấn và kết nối với một Signal
        button = QPushButton("Click Me!")
        button.clicked.connect(self.display_information)

        # đặt button lên trên cửa sổ dùng vertical box layout
        layout = QVBoxLayout()
        self.setLayout(layout)
        layout.addWidget(button)

        # hiển thị cửa sổ
        self.show()

    # xây dựng hàm
    def display_information(self):
        print("Clicked")

# chương trình chính
if __name__ == '__main__':
    app = QApplication(sys.argv)
    window = MainWindow()
    sys.exit(app.exec())

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

Signals và Slots trong PyQt

button = QPushButton("Click Me!")

Thứ hai, kết nối sự kiện clicked tới hàm display_information:

button.clicked.connect(self.display_information)

Tổng quát chung, cú pháp để kết nối một Signal với Slot như sau:

Ngoài ra, bạn cũng có thể kết nối Signal với Slot khi truyền một vào đối số như sau:

button = QPushButton('Click Me!', clicked=self.display_information)

Thứ ba, định nghĩa hàm display_information. Hàm này chỉ nhằm một mục đích là hiển thị thông báo ra màn hình CMD:

    def display_information(self):
        print("Clicked")

⇒Khi bạn nhấn vào nút ấn, nút ấn sẽ phát ra một Signal để gọi đến hàm được kết nối.
Lưu ý: đoạn code đặt nút ấn trên cửa sổ sử dụng bố cục theo phương dọc, các bạn sẽ được tìm hiểu trong những bài sau:

# đặt button lên trên cửa sổ dùng vertical box layout
        layout = QVBoxLayout()
        self.setLayout(layout)
        layout.addWidget(button)

Ví dụ sử dụng Signal để gửi dữ liệu

Một Signal có thể mang theo dữ liệu cung cấp trạng thái của một đối tượng khi sự kiện xảy ra. Ví dụ, Signal textChanged của QLineEdit có văn bản được nhập vào ô textbox.
Nếu Signal mang theo dữ liệu thì Slot được kết nối cũng nhận được dữ liệu đó.
Chương trình sau đây hiển thị QLineEdit và QLabel với nhiệm vụ như sau: khi bạn nhập cái gì đó vào QLineEdit thì QLabel sẽ hiển thị tương ứng.

import sys
from PyQt6.QtWidgets import (QApplication, QWidget, QPushButton, QLineEdit, QVBoxLayout, QLabel)

class MainWindow(QWidget):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)

        # thiết lập tiêu ề cửa sổ
        self.setWindowTitle('PyQt6 Signals & Slots')
        self.setGeometry(200, 200, 200, 200)

        # tạo các thành phần giao diện
        label = QLabel()
        line_edit = QLineEdit()
        line_edit.textChanged.connect(label.setText)

        # đặt các widgets lên trên giao diện
        layout = QVBoxLayout()
        layout.addWidget(label)
        layout.addWidget(line_edit)
        self.setLayout(layout)

        # hiển thị cửa sổ
        self.show()

# chương trình chính
if __name__ == '__main__':
    app = QApplication(sys.argv)
    window = MainWindow()
    sys.exit(app.exec())

Cùng xem kết quả của chương trình trên:

Sử dụng tín hiệu gửi dữ liệu

label = QLabel()

Thứ hai, tạo một QLineEdit mới:

line_edit = QLineEdit()

Thứ ba, kết nối Signal textChanged với phương thức setText của QLabel:

line_edit.textChanged.connect(label.setText)

⇒Khi đó, bạn gõ nội dung gì đó vào QLineEdit thì:

• Signal textChanged sẽ gửi nội dung văn bản được nhập.
• QLabel nhận văn bản và chuyển nó tới phương thức setText().

Trong bài viết này, chúng ta thực hiện viết chương trình đầu tiên có sử dụng thư viện PyQt6. Chương trình này nhằm mục đích tạo ra một cửa sổ ứng dụng đơn giản. Qua đó, ta được tìm hiểu những lệnh cơ bản trong thư viện PyQt6, khởi tạo một ứng dụng và thực hiện lập trình bằng mã lệnh một cách thuần là như nào. Chúng ta hãy cùng bắt đầu với …

Chương trình đầu tiên với PyQt6

Quan sát vào chương trình dưới đây, chương trình này nhằm tạo ra một cửa sổ có tiêu đề là Hello World trên màn hình.

# khai báo thư viện
from PyQt6.QtWidgets import QApplication, QWidget
import sys

# tạo ứng dụng
app = QApplication(sys.argv)

# tạo cửa sổ chính
window = QWidget(windowTitle = 'Hello World')
window.show()

# khởi động vòng lặp sự kiện
app.exec()

Để chạy chương trình trên, ta dùng lệnh sau trong CMD với cú pháp:

python first_program.py

Trong đó, first_program.py chính là tên tệp mã nguồn python.
Ta quan sát kết quả:

Cửa sổ ứng dụng Hello World bằng PyQt

Chương trình trên hoạt động như nào?

Đầu tiên, ta cần khai báo các lớp cần thiết như QApplication và QMainWidget từ thư viện PyQt6.Widgets.

from PyQt6.QtWidgets import QApplication, QWidget

Thứ hai, ta tạo một đối tượng từ lớp QApplication:

app = QApplication(sys.argv)

Thứ ba, tạo một “thể hiện” (instance) của QWidget với tiêu đề là “Hello World” và gọi đến phương thức show() để hiện thị cửa sổ:

window = QWidget(windowTitle = 'Hello World')
window.show()

Cuối cùng, gọi đến phương thức exec() của QMainApplication để bắt đầu vòng lặp sự kiện.

app.exec()

Giới thiệu về Vòng lặp sự kiện (event loop)

Mỗi ứng dụng PyQt cần có một thể hiện của lớp QApplication. Đối tượng của QApplication lưu trữ vòng lặp sự kiện của ứng dụng.
Vòng lặp sự kiện chịu trách nhiệm quản lý các sự kiện của ứng dụng bao gồm các tương tác của người dùng lên GUI.
Khi ta tương tác với ứng dụng PyQt, ví dụ như nhấn phím hoặc nhấn nút bấm, PyQt sẽ tạo một sự kiện và đặt nó vào Hàng đợi sự kiện.
Vòng lặp sự kiện liên tục kiểm tra hàng đợi sự kiện. Nếu vòng lặp sự kiện tìm thấy sự kiện, nó sẽ chuyển tiếp sự kiện đó đến trình xử lý sự kiện cụ thể.
Trình xử lý sự kiện nhằm xử lý sự kiện và chuyển quyền điều khiển trở lại vòng lặp sự kiện để xử lý các sự kiện tiếp theo.

Hoạt động của Vòng lặp sự kiện