Trong Tkinter có hai loại widget, loại thứ nhất là các widget thường như nút bấm, hộp văn bản… loại thứ hai là container, đây là những widget chứa các widget khác, chúng còn có một tên nữa là bố cục
Trong Tkinter có 3 loại bố cục là
Style[].configure["TFrame", background="#333"]1,
Style[].configure["TFrame", background="#333"]2và
Style[].configure["TFrame", background="#333"]3 Trong đó
Style[].configure["TFrame", background="#333"]4là kiểu bố cục tự do, thuật ngữ gọi là Định vị tuyệt đối, tức là bạn sẽ phải tự định vị trí cũng như kích thước của các tiện ích. Bố cục
Style[].configure["TFrame", background="#333"]5sắp xếp các tiện ích của bạn theo chiều ngang và chiều dọc. Còn bố cục
Style[].configure["TFrame", background="#333"]2sắp xếp tiện ích con theo dạng bảng
Design tự do
Thường thì khi thiết kế giao diện chúng ta sử dụng layout nhiều hơn là thiết kế theo kiểu tự do. Khi thiết kế theo kiểu tự làm này, chúng ta sẽ phải sắp xếp thứ tự định vị trí và kích thước cho các widget trên màn hình, nếu kích thước cửa sổ thay đổi thì kích thước và vị trí của các widget không thay đổi. Thiết kế theo kiểu tự động cũng rất bất tiện khi bạn muốn thay đổi, thêm hay bớt các widget thì hầu như bạn sẽ phải sắp xếp lại toàn bộ widget
from PIL import Image, ImageTk
from tkinter import Tk, Label, BOTH
from tkinter.ttk import Frame, Style
class Example[Frame]:
def __init__[self, parent]:
Frame.__init__[self, parent]
self.parent = parent
self.initUI[]
def initUI[self]:
self.parent.title["Absolute positioning"]
self.pack[fill=BOTH, expand=1]
Style[].configure["TFrame", background="#333"]
bard = Image.open["C:\\bardejov.jpg"]
bardejov = ImageTk.PhotoImage[bard]
label1 = Label[self, image=bardejov]
label1.image = bardejov
label1.place[x=20, y=20]
rot = Image.open["C:\\rotunda.jpg"]
rotunda = ImageTk.PhotoImage[rot]
label2 = Label[self, image=rotunda]
label2.image = rotunda
label2.place[x=40, y=160]
minc = Image.open["C:\\mincol.jpg"]
mincol = ImageTk.PhotoImage[minc]
label3 = Label[self, image=mincol]
label3.image = mincol
label3.place[x=170, y=50]
root = Tk[]
root.geometry["300x280+300+300"]
app = Example[root]
root.mainloop[]
Trong ví dụ trên, chúng ta hiển thị 3 ảnh lên cửa sổ
from PIL import Image, ImageTk
Để hiển thị ảnh thì chúng ta có thể sử dụng mô-đun
Style[].configure["TFrame", background="#333"]7 trong gói
Style[].configure["TFrame", background="#333"]8 nhưng mô-đun này rất hạn chế nên ở đây mình sử dụng mô-đun
Style[].configure["TFrame", background="#333"]9 và
Style[].configure["TFrame", background="#333"]10 trong Gối thư viện, thư viện này không có sẵn trong Python 3 mà bạn phải tự động down về
Style[].configure["TFrame", background="#333"]
Dòng trên sẽ tô màu nền cửa sổ là màu xám đen
Style[].configure["TFrame", background="#333"]1
Hai dòng trên sẽ tạo các đối tượng ảnh và tải chúng vào chương trình
Style[].configure["TFrame", background="#333"]4
Chúng ta tạo các đối tượng
Style[].configure["TFrame", background="#333"]11, đây là một lớp dùng để hiển thị chữ và ảnh
Style[].configure["TFrame", background="#333"]6
Chúng ta phải lưu lại các tham chiếu đến ảnh nếu không sẽ bị xóa
Style[].configure["TFrame", background="#333"]7
Chúng ta đặt ảnh tại vị trí x = 20 và y = 20
Cái nút
Trong ví dụ dưới đây, chúng ta sẽ hiển thị hai nút [nút nhấn] ở góc trái màn hình sử dụng bố cục
Style[].configure["TFrame", background="#333"]1
Style[].configure["TFrame", background="#333"]9
Chúng ta tạo ra 2 frame, frame đầu tiên là layout chính dùng để chứa toàn bộ widget. Khung thứ hai chúng ta đặt như khung đầu tiên lên và mở rộng kích thước theo cả chiều ngang và chiều dọc. Hai nút được đặt theo chiều ngang ở góc bên phải của cửa sổ
Style[].configure["TFrame", background="#333"]0
Hai dòng mã trên được tạo ra bởi
Style[].configure["TFrame", background="#333"]13 thứ hai, khung này sẽ chiếm phần lớn diện tích của
Style[].configure["TFrame", background="#333"]14 chính. Tham số ________ 115 hiệu ứng mô phỏng mô phỏng hiển thị 3D của
Style[].configure["TFrame", background="#333"]16 bên ngoài giá trị RAISED bạn có thể thử một số giá trị khác như FLAT, SUNKEN, GROOVE và RIDGE. Tham số
Style[].configure["TFrame", background="#333"]17 hiển thị đường viền của khung, mặc định tham số này là 0 nên bạn không thể thấy đường viền
Style[].configure["TFrame", background="#333"]6
Ở hai dòng trên chúng ta tạo nút đóng và tham chiếu đến đối tượng
Style[].configure["TFrame", background="#333"]18. Phương thức
Style[].configure["TFrame", background="#333"]1
Style[].configure["TFrame", background="#333"]40quy định cách hiển thị của nút trên cửa sổ, tham số
Style[].configure["TFrame", background="#333"]41 sẽ đưa nút vào vị trí bên phải,
Style[].configure["TFrame", background="#333"]42 và
Style[].configure["TFrame", background="#333"]43 duy trì khoảng cách giữa nút với các tiện ích khác và với đường viền cửa sổ chính, ở khoảng cách này
from PIL import Image, ImageTk0
Nút OK cũng được tạo ra tương tự và cũng được đưa sang bên phải màn hình, ở bên cạnh nút Đóng với khoảng cách 5 pixel
Tạo biểu mẫu
Trong ví dụ dưới đây, chúng ta tiếp tục tìm hiểu về bố cục
Style[].configure["TFrame", background="#333"]44
from PIL import Image, ImageTk1
Chúng ta thiết kế một cửa sổ hiển thị biểu mẫu đánh giá
from PIL import Image, ImageTk2
Đầu tiên chúng ta tạo khung chính để chứa các widget còn lại kể cả các khung khác nhau
from PIL import Image, ImageTk3
Chúng ta tạo một khung và đặt 2 tiện ích vào đó, đó là một nhãn và một mục nhập.
Style[].configure["TFrame", background="#333"]11 là widget dùng để hiển thị văn bản,
Style[].configure["TFrame", background="#333"]46 là widget tạo văn bản nhập. Nhãn có độ dài cố định còn mục nhập thì độ dài tự động thay đổi theo kích thước cửa sổ nhờ vào 2 tham số
Style[].configure["TFrame", background="#333"]47 và
Style[].configure["TFrame", background="#333"]48. Frame thứ hai cũng tương tự
from PIL import Image, ImageTk4
Trong khung thứ ba chúng ta đặt một L____149 và một T
Style[].configure["TFrame", background="#333"]60. Nhãn được đặt ở phía trên của khung, còn văn bản tự động co giãn theo kích thước cửa sổ
Bố cục lưới
Tiếp theo chúng ta sẽ tìm hiểu về bố cục
Style[].configure["TFrame", background="#333"]61
from PIL import Image, ImageTk5
Đoạn mã trên thiết kế giao diện của một chiếc máy tính bỏ túi
from PIL import Image, ImageTk6
Chúng ta quy định kiểu phông chữ thông qua tham số
Style[].configure["TFrame", background="#333"]62 và khoảng cách của khung với cửa sổ thông qua tham số đệm
from PIL import Image, ImageTk7
Hai phương thức ________ 163và ________ 164 quy định khoảng cách giữa các widget
from PIL import Image, ImageTk8
Chúng ta tạo một mục nhập để hiển thị số cũng như kết quả tính toán. Tham số
Style[].configure["TFrame", background="#333"]65 quy định cách thức co mở rộng theo kích thước cửa sổ, W+E tức là co mở rộng theo chiều từ trái sang phải
from PIL import Image, ImageTk9
Nút
Style[].configure["TFrame", background="#333"]66 được đặt tại vị trí hàng 1 cột 0, chỉ số hàng và cột bắt đầu từ 0
Style[].configure["TFrame", background="#333"]0
Phương thức ________ 167 hiển thị các tiện ích con trên màn hình và khởi tạo kích thước cho chúng. Nếu chúng ta chỉ gọi
Style[].configure["TFrame", background="#333"]68 mà không đưa các tham số vào như trên thì kích thước của các widget luôn luôn là kích thước vừa đủ để bao bọc lấy đoạn văn bản bên trong, bên ngoài ra không có tham số truyền vào thì phương thức này sẽ . Bạn có thể kéo mở rộng cửa sổ để thấy cách nó hoạt động