Khái niệm bố cục:
Bố cục là sự sắp xếp các thành phần trên trang giao diện sao cho hợp lý với mục đích tạo ra một sản phẩm dễ nhìn và hấp dẫn về mặt thẩm mỹ.
04 kiểu bố cục:
QHBoxLayout - Bố cục ngang tuyến tính:
Bố trí widget nằm ngang theo khung giao diện. Các widget sẽ được sắp xếp theo thứ tự thêm vào.
Một số ứng dụng phổ biến của bố cục này thường là:
Các thành phần dạng thanh như thanh công cụ, thanh tìm kiếm, thanh điều hướng…
QVBoxLayout - Bố cục dọc tuyến tính:
Bố cục sắp xếp các thành phần theo chiều dọc, từ trên xuống dưới. Các widget sẽ được sắp xếp theo thứ tự thêm vào.
Một số ứng dụng phổ biến của bố cục này thường là:
Các thành phần dạng danh sách như danh sách sản phẩm, danh sách bài viết, danh sách nhiệm vụ, v.v.
Các thành phần dạng form như form đăng ký, form đăng nhập, form đặt hàng, v.v.
QGridLayout - Bố cục dạng lưới:
Bố cục sắp xếp các thành phần thành các ô của một lưới theo hàng và cột. Widget có thể được đặt ở bất kỳ ô nào của lưới, và có thể được lặp lại trong nhiều ô.
Một số ứng dụng phổ biến của bố cục này thường là:
Các thành phần dạng bảng như bảng dữ liệu, bảng tính, v.v.
Các thành phần dạng lưới như lưới ô vuông, lưới lưới ô chữ, v.v.
QStackedLayout - Bố cục dạng chồng lên nhau:
Bố cục sắp xếp các widget theo thứ tự chồng lên nhau theo trang. Chỉ có một trang được hiển thị
Một số ứng dụng phổ biến của bố cục này thường là:
Các thành phần dạng tab như tab ứng dụng, tab cửa sổ, tab trang web, v.v.
Các thành phần dạng menu như menu ứng dụng, menu trang web, menu trò chơi, v.v.
Container là widget được sử dụng để chứa các widget. Chúng giúp sắp xếp và tổ chức các widget trong giao diện người dùng tốt hơn.
Các thành phần Container trong Qt Designer bao gồm:
QGroupBox 
: Một hộp thoại chứa các widget có liên quan đến nhau.
QScrollArea 
: Một vùng cuộn (có thể lăn chuột được) chứa các widget.
QStackedWidget 
: Một cửa sổ chứa các widget có thể chồng lên nhau.
QTabWidget 
: Một cửa sổ chứa các widget được chia thành các tab.
Áp dụng bố cục vào Container:
Các container trong QtDesigner đã có áp dụng bố cục cho các thành phần khi được đặt bên trong nó. Tuy nhiên có một số thành phần container chưa áp dụng bố cục như:
- QWidget 
- QFrame: 
Các bước áp dụng bố cục cho container bằng kéo thả
Kéo các thành phần giao diện vào container
Nhấn chuột phải vào container.
Chọn Layout -> Chọn các bố cục muốn áp dụng cho container.
Ngoài ra, có thể kéo thả Layout trong QtDesigner để có các container đã áp dụng sẵn bố cục
Các bước áp dụng bố cục cho container bằng lập trình
import sys
from PyQt6.QtWidgets import (
QApplication, QCheckBox, QComboBox,
QDateEdit, QFontComboBox, QLineEdit,
QMainWindow, QPushButton, QRadioButton,
QSlider, QSpinBox, QVBoxLayout, QWidget,
)
class MainWindow(QMainWindow):
def __init__(self):
super().__init__()
self.setWindowTitle("Widgets App")
self.layout = QVBoxLayout()
self.widgets = [QCheckBox,
QComboBox,
QDateEdit,
QFontComboBox,
QLineEdit,
QPushButton,
QRadioButton,
QSlider,
QSpinBox]
for w in self.widgets:
self.layout.addWidget(w())
self.central_widget = QWidget()
self.central_widget.setLayout(self.layout)
self.setCentralWidget(self.central_widget)
if __name__ == "__main__":
app = QApplication(sys.argv)
window = MainWindow()
window.show()
sys.exit(app.exec())
Trong đó,
QVBoxLayout() tạo layout dạng xếp dọc.
layout.addWidget() là phương thức thêm widget vào layout đã tạo.
central_widget.setLayout() là phương thức gán layout cho container đã tạo.
Gợi ý sử dụng sample Pet Adoption:
Phân tích bố cục trang chủ
Trang chủ có thể áp dụng bố cục theo chiều ngang như sau:
Phần 1: Container để chứa các thành phần có trong thanh điều hướng.
Phần 2: Container để chứa các nội dung chính của cửa sổ. Ở phần 2 bao gồm nhiều thành phần giao diện nên cần áp dụng bố cục theo chiều dọc.
Tương tự phân tích chi tiết cho từng phần còn lại của cửa sổ và cách trang còn lại.
Giao diện mẫu để phân tích:
