PyQt| Qt Designer Định dạng thành phần giao diện
Khái niệm “Qt Style sheet”:
Ngoài những thuộc tính sẵn có trên thanh Property Editor, Qt style sheet là cách thức hữu ích cho phép người dùng điều chỉnh kiểu dáng và giao diện của Widgets bằng cách cung cấp một bộ quy tắc bao gồm từng cặp thuộc tính đi kèm giá trị. Cú pháp như sau:
thuoc_tinh : gia_tri;
Các quy tắc kiểu dáng trong StyleSheet có thể điều chỉnh các thuộc tính như màu sắc, font chữ, kích thước, độ bo góc, hình nền, và nhiều thuộc tính khác của các phần tử giao diện.
Cách áp dụng điều chỉnh kiểu dáng:
- Click chuột phải vào phần tử cần định dạng
- Chọn “Change styleSheet…”
- Nhập các cấp thuộc tính theo cú pháp vào. Ví dụ để thay đổi màu chữ thành đỏ như sau:
- Chọn apply để lưu sau đó chọn cancel để thoát.
Một số thuộc tính phổ biến style sheet phổ biến:
Thay đổi màu nền, áp dụng cho hầu hết các thành phần giao diện. Ví dụ:
Giá trị của thuộc tính màu nền có thể là tên màu trong tiếng Anh ,mã Hex hoặc mã Decimal (R, G, B)
- Thay đổi màu chữ, áp dụng cho các thành phần giao diện có chứa nội dung văn bản. Ví dụ:
- Thiết lập font chữ: Thuộc tính này cho phép định rõ font chữ, kích thước chữ, kiểu chữ và các thuộc tính khác của văn bản cho các phần tử giao diện người dùng trong ứng dụng. Cú pháp:
font-style là kiểu chữ (italic, normal, oblique).
font-weight là độ đậm của chữ (normal, bold, bolder, lighter, hoặc số từ 100 đến 900).
font-size là kích thước của chữ (dưới dạng số và đơn vị là pixel).
font-family là font chữ được sử dụng (ví dụ: Arial, Times New Roman, ...)
Box model: khái niệm quản lý không gian, khoảng cách trong cách thành phần giao diện.
content (Nội dung):
Phần nội dung chính của widget, là nơi hiển thị văn bản hoặc hình ảnh.
padding (Đệm):
Khoảng cách giữa nội dung và viền (border) của widget.
Thuộc tính: padding, padding-top, padding-right, padding-bottom, padding-left.
border (Viền):
Đường viền bao quanh widget, nằm giữa padding và margin.
Các thuộc tính liên quan: border, border-width, border-style, border-color, border-radius.
margin (Lề):
Khoảng cách giữa đường viền (border) và các phần tử xung quanh widget.
Các thuộc tính: margin, margin-top, margin-right, margin-bottom, margin-left.
Ví dụ về Box Model trong QSS
Giải thích:
padding: 10px 20px;: Tạo khoảng cách 10px từ nội dung đến viền trên/dưới và 20px từ nội dung đến viền trái/phải.
border: 2px solid blue;: Tạo viền màu xanh, dày 2px, kiểu solid.
border-radius: 5px;: Bo tròn các góc viền với bán kính 5px.
margin: 10px;: Tạo khoảng cách 10px từ viền đến các phần tử xung quanh.