Chuyển tới nội dung chính

Bài 5 - Layout Grid

1. Khái niệm​

Trong guizero, khi bạn tạo một Box(layout="grid"), bạn đang nói với guizero rằng:

"Tôi muốn sắp xếp các widget con theo dạng bảng (table), mỗi widget nằm trong một ô (cell) xác định bởi hàng (row) và cột (column)."

👉 Grid rất hữu ích khi bạn làm form, giao diện đăng nhập, bảng điều khiển, …

2. Cú pháp grid​

Khi thêm một widget vào Box có layout="grid", bạn dùng tham số grid:

widget = Widget(parent, grid=[c, r, cs, rs])

Trong đó:

  • c (column) → vị trí cột (bắt đầu từ 0)
  • r (row) → vị trí hàng (bắt đầu từ 0)
  • cs (columnspan) → số cột chiếm (mặc định = 1)
  • rs (rowspan) → số hàng chiếm (mặc định = 1)

3. Ví dụ cơ bản​

from guizero import App, Box, Text

app = App("Grid Example", width=400, height=200)

box = Box(app, layout="grid")

Text(box, text="(0,0)", grid=[0,0])
Text(box, text="(1,0)", grid=[1,0])
Text(box, text="(0,1)", grid=[0,1])
Text(box, text="(1,1)", grid=[1,1])

app.display()

Minh họa sơ đồ grid:​

👉 Bạn thấy bảng có 2 hàng × 2 cột.

  • (0,0) ở hàng 0, cột 0.
  • (1,0) ở hàng 0, cột 1.
  • (0,1) ở hàng 1, cột 0.
  • (1,1) ở hàng 1, cột 1.

4. Ví dụ nâng cao: Nút chiếm nhiều cột​

from guizero import App, Box, Text, PushButton

app = App("Grid Example", width=400, height=250)
box = Box(app, layout="grid")

Text(box, text="Username:", grid=[0,0])
Text(box, text="Password:", grid=[0,1])

# TextBox đặt ở cột 1
from guizero import TextBox
username = TextBox(box, grid=[1,0])
password = TextBox(box, grid=[1,1], hide_text=True)

# Nút chiếm 2 cột (columnspan = 2)
btn = PushButton(box, text="Login", grid=[0,2,2,1])
btn.width = "fill"

app.display()

Minh họa sơ đồ grid:​

5. Tính năng hay khi dùng grid​

  • Columnspan (cs): làm widget chiếm nhiều cột → thường dùng cho nút bấm hoặc thanh tiêu đề.
  • Rowspan (rs): làm widget chiếm nhiều hàng → dùng cho sidebar hoặc logo.
  • width="fill" / height="fill": để widget giãn hết ô.

6. Câu hỏi trắc nghiệm​

Câu 1: Trong guizero, tham số grid dùng để làm gì?

Câu 2: Trong grid=[2,1], số 2 biểu thị gì?

Câu 3: Cú pháp đầy đủ của grid trong guizero có bao nhiêu tham số?

Câu 4: Để một widget chiếm 3 cột liên tiếp, ta dùng grid như thế nào?

Câu 5: Tham số nào quyết định số hàng mà widget chiếm?

Câu 6: Để nút Login trải ngang 2 cột, ta viết:

Câu 7: Trong guizero, để widget lấp đầy chiều ngang trong ô, ta dùng:

Câu 8: Row và Column trong grid bắt đầu đếm từ:

Câu 9: Khi không khai báo grid, widget sẽ được sắp xếp như thế nào?

Câu 10: Ứng dụng phổ biến nhất của grid trong guizero là gì?