Cách sử dụng QGridLayout trong PyQt

Trong giao diện người dùng với PyQt, việc sắp xếp các thành phần (widget) một cách hợp lý và trực quan là một yếu tố quan trọng để tạo ra các ứng dụng thân thiện với người dùng. Một trong những công cụ mạnh mẽ giúp bạn thực hiện điều này là QGridLayout. Trong bài viết này, bạn sẽ học cách sử dụng QGridLayout để sắp xếp các widget theo các hàng và cột đều nhau, giúp bạn tạo ra các bố cục linh hoạt và dễ quản lý hơn.

Giới thiệu về PyQt QGridLayout

QGridLayout cho phép bạn đặt các widget trong các hàng và cột đều nhau của một lưới. Ví dụ, hình dưới đây minh họa một lưới bao gồm bốn cột và ba hàng:

Các hàng và cột đều được đánh số bắt đầu từ 0. Điều này có nghĩa là hàng đầu tiên có chỉ số là 0, hàng thứ hai có chỉ số là 1, và tiếp tục như vậy. Tương tự, cột đầu tiên có chỉ số là 0, cột thứ hai có chỉ số là 1, v.v.

Giao điểm giữa một hàng và một cột được gọi là ô. Một ô là không gian nơi bạn có thể đặt một widget.

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

Các hàng và cột có thể mở rộng. Ví dụ, hình dưới đây minh họa rằng cột thứ hai của hàng đầu tiên mở rộng qua hai cột, và hàng thứ hai của cột thứ hai mở rộng qua hai hàng:

Nếu một widget chiếm ít không gian hơn ô chứa nó, bạn có thể căn chỉnh nó trong ô bằng cách sử dụng một trong các tùy chọn căn chỉnh sau:

Sử dụng QGridLayout trong PyQt

Để sử dụng QGridLayout, bạn thực hiện các bước sau:

Tạo một đối tượng QGridLayout:

layout = QGridLayout()

Thiết lập layout cho widget cha:

parent.setLayout(layout)

Đặt các widget con vào layout lưới:

layout.addWidget(widget, row, column, rowSpan, columnSpan, alignment)

Trong đó:

• widget là widget con mà bạn muốn đặt vào lưới.
• row là chỉ số hàng, bắt đầu từ 0.
• column là chỉ số cột, bắt đầu từ 0.
• rowSpan là số hàng mà bạn muốn mở rộng.
• columnSpan là số cột mà bạn muốn mở rộng.
• alignment chỉ định căn chỉnh của widget trong ô.

Để lấy giá trị căn chỉnh, bạn import Qt từ PyQt6.QtCore:

from PyQt6.QtCore import Qt

và sử dụng một trong các giá trị của enum Qt.AlignmentFlag, ví dụ:

Qt.AlignmentFlag.AlignRight

Ví dụ về PyQt QGridLayout

Ví dụ sau đây minh họa cách tạo một form đăng nhập bằng cách sử dụng QGridLayout:

import sys
from PyQt6.QtWidgets import QApplication, QWidget, QPushButton, QLineEdit, QLabel, QGridLayout
from PyQt6.QtCore import Qt


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

        self.setWindowTitle('Login Form')

        # Thiết lập layout lưới
        layout = QGridLayout()
        self.setLayout(layout)

        # Username
        layout.addWidget(QLabel('Username:'), 0, 0)
        layout.addWidget(QLineEdit(), 0, 1)

        # Password
        layout.addWidget(QLabel('Password:'), 1, 0)
        layout.addWidget(QLineEdit(echoMode=QLineEdit.EchoMode.Password), 1, 1)

        # Các nút bấm
        layout.addWidget(QPushButton('Log in'), 2, 0,
                         alignment=Qt.AlignmentFlag.AlignRight)
        layout.addWidget(QPushButton('Close'), 2, 1,
                         alignment=Qt.AlignmentFlag.AlignRight)

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


if __name__ == '__main__':
    app = QApplication(sys.argv)
    window = MainWindow()
    sys.exit(app.exec())

Output:

Hình ảnh giao diện form đăng nhập với các widget được sắp xếp bằng QGridLayout.

Cách hoạt động:

Tạo một đối tượng QGridLayout:

layout = QGridLayout()
self.setLayout(layout)

Đặt một QLabel vào ô (0,0) và QLineEdit vào ô (0,1) để tạo trường nhập Username:

layout.addWidget(QLabel('Username:'), 0, 0)
layout.addWidget(QLineEdit(), 0, 1)

Đặt một QLabel vào ô (1,0) và QLineEdit vào ô (1,1) để tạo trường nhập Password:

layout.addWidget(QLabel('Password:'), 1, 0)
layout.addWidget(QLineEdit(echoMode=QLineEdit.EchoMode.Password), 1, 1)

Đặt nút Log in vào ô (2,0) và căn chỉnh nó với cạnh trái. Đồng thời, đặt nút Close vào ô (2,1) và căn chỉnh nó với cạnh phải:

# Các nút bấm
layout.addWidget(QPushButton('Log in'), 2, 0,
                 alignment=Qt.AlignmentFlag.AlignRight)
layout.addWidget(QPushButton('Close'), 2, 1,
                 alignment=Qt.AlignmentFlag.AlignRight)

Kết bài

Với QGridLayout, bạn có thể dễ dàng sắp xếp các widget theo hàng và cột đều nhau, giúp tạo ra các giao diện phức tạp một cách hiệu quả và linh hoạt. Việc hiểu và áp dụng thành thạo QGridLayout sẽ giúp bạn tối ưu hóa bố cục giao diện, mang lại trải nghiệm người dùng tốt hơn và tăng tính thẩm mỹ cho ứng dụng của mình.