Widget là thành phần của giao diện mà người dùng có thể tương tác. Hầu hết các giao diện được tạo thành từ nhiều widget và được sắp xếp trên màn hình.
Các widget cơ bản
Label
hiển thị văn bản, hình ảnh, icon,.. Người dùng chỉ xem không thể chỉnh sửa.
Line Edit
cung cấp hộp thoại cho phép người dùng nhập văn bản
Push Button
tạo nút nhấn.
Date Edit
: được sử dụng để cho phép người dùng chọn hoặc nhập ngày tháng.
Calendar Widget
hiển thị lịch ngày tháng và cho phép người dùng chọn ngày tháng cụ thể.
Stacked Widget
cho phép xếp chồng nhiều widget/trang lên nhau. Tại một thời điểm, nó chỉ hiển thị một trang duy nhất.
Thử thách: Tạo giao diện cho ứng dụng quản lý anime với các trang sau:
Trang chủ (trang hiển thị mặc định)
Trang hiển thị phim
Trang quản lý phim
Gợi ý:
Sử dụng Stacked Widget để quản lý 3 trang
Tạo một thanh điều hướng để chuyển giữa ba trang
Code mẫu load giao diện (ls7_sample/main1.py)
import sys
import os
from PyQt6 import uic
from PyQt6.QtWidgets import QMainWindow, QApplication
class MainWindow(QMainWindow):
# Định nghĩa vị trí của các file ui
UI_LOCATION = os.path.join("ui/main_window1.ui")
STYLE_LOCATION = os.path.join("ui/style_main1.qss")
def __init__(self, parent:QApplication):
super(MainWindow, self).__init__()
self.app = parent
# Load file giao diện .ui và .qss
self.ui = uic.loadUi(self.UI_LOCATION, self)
with open(self.STYLE_LOCATION, "r") as style_file:
style_config = style_file.read()
self.setStyleSheet(style_config)
# Luôn hiển thị trang home
self.ui.stackedWidget.setCurrentIndex(0)
# Hiển thị cửa sổ ra màn hình
self.show()
if __name__ == "__main__":
app = QApplication(sys.argv)
window = MainWindow(app)
sys.exit(app.exec())
QListWidget tạo một kiểu hiển thị theo kiểu danh sách, cho phép hiển thị danh sách đối tượng, thêm và xóa các phần tử đối tượng trong danh sách đó.
Tạo QListWidget
B1. Chọn List Widget từ Widget Box
B2. Kéo widget (đặt tên animeList) vào stackedWidget của file main_window.ui
B3. Tạo database và thêm các anime trong database vào animeList (ls7_sample/main2.py)
# Hiển thị trang CRUD
self.ui.stackedWidget.setCurrentIndex(2)
# Tạo database
self.dtb = models.AnimeDatabase()
self.dtb.load_data()
# Hiển thị danh sách anime
anime_titles = self.dtb.get_title_list()
self.ui.animeList.addItems(anime_titles)
# Hiển thị cửa sổ ra màn hình
self.show()
Kết quả:
Các thao tác với QListWidget:
Lấy vị trí của phần tử đang được chọn bằng phương thức currentRow(). Nếu đang không chọn phần tử nào thì phương thức trả về -1.
curr = self.ui.listWidget.currentRow()
Thêm (nhiều) phần tử vào danh sách bằng phương thức addItem()/addItems() hoặc thêm phần tử vào vị trí cụ thể insertItem()
self.ui.listWidget.insertItem(0, "Tiger")
Lấy phần tử tại vị trí cụ thể ra khỏi danh sách bằng phương thức takeItem()
self.ui.listWidget.takeItem(3)
Tìm phần tử matched_items trong danh sách bằng phương thức findItems()
from PyQt6.QtCore import Qt
matched_items = self.ui.listWidget.findItems("Dog", Qt.MatchFlag.MatchContains)
for i in range(self.ui.listWidget.count()):
it = self.ui.listWidget.item(i)
it.setHidden(it not in matched_items)
Lặp qua từng phần tử của listWidget bằng phương thức count() và dấu các phần tử còn lại bằng phương thức .setHidden()
Trang quản lý
Yêu cầu
Hiển thị danh sách đối tượng bằng List Widget
Có các nút: Tìm, Thêm, Sửa, Xóa
Có Line Edit để tìm đối tượng theo tên.
Giao diện CRUD tham khảo:
Add/Edit Dialog
Sử dụng để nhập mới hoặc thay đổi thông tin đối tượng khi thêm mới/cập nhật.
Yêu cầu
Sử dụng template Dialog with Buttons Bottom
Có các Label và LineEdit cho từng thuộc tính của đối tượng.
