Tiện ích nút được sử dụng để thêm các loại nút khác nhau vào ứng dụng Python. Python cho phép chúng tôi định cấu hình giao diện của nút theo yêu cầu của chúng tôi. Các tùy chọn khác nhau có thể được đặt hoặc đặt lại tùy thuộc vào các yêu cầu.
The Button widget is used to add buttons in a Python application. These buttons can display text or images that convey the purpose of the buttons. You can attach a function or a method to a button which is called automatically when you click the button.
Syntax
Here is the simple syntax to create this widget −
w = Button [ master, option=value, ... ]
Parameters
master − This represents the parent window.
options − Here is the list of most commonly used options for this widget. These options can be used as key-value pairs separated by commas.
activebackground
Background color when the button is under the cursor.
2activeforeground
Foreground color when the button is under the cursor.
3bd
Border width in pixels. Default is 2.
4bg
Normal background color.
5command
Function or method to be called when the button is clicked.
6fg
Normal foreground [text] color.
7font
Text font to be used for the button's label.
8height
Height of the button in text lines [for textual buttons] or pixels [for images].
highlightcolor
The color of the focus highlight when the widget has focus.
10image
Image to be displayed on the button [instead of text].
11justify
How to show multiple text lines: LEFT to left-justify each line; CENTER to center them; or RIGHT to right-justify.
12padx
Additional padding left and right of the text.
13pady
Additional padding above and below the text.
14relief
Relief specifies the type of the border. Some of the values are SUNKEN, RAISED, GROOVE, and RIDGE.
15state
Set this option to DISABLED to gray out the button and make it unresponsive. Has the value ACTIVE when the mouse is over it. Default is NORMAL.
16underline
Default is -1, meaning that no character of the text on the button will be underlined. If nonnegative, the corresponding text character will be underlined.
17width
Width of the button in letters [if displaying text] or pixels [if displaying an image].
18wraplength
If this value is set to a positive number, the text lines will be wrapped to fit within this length.
Methods
Following are commonly used methods for this widget −
flash[]
Causes the button to flash several times between active and normal colors. Leaves the button in the state it was in originally. Ignored if the button is disabled.
2invoke[]
Calls the button's callback, and returns what that function returns. Has no effect if the button is disabled or there is no callback.
Python cung cấp các tùy chọn khác nhau để phát triển giao diện người dùng đồ họa [GUI]. Quan trọng nhất được liệt kê dưới đây.
Nội dung chính Show
- Tkinter: Tkinter là giao diện Python cho bộ công cụ Tk GUI. Chúng ta sẽ học Tkinter trong chương này.
- wxPython: Đây là một giao diện Python mã nguồn mở cho wxWindows //wxpython.org/
- JPython: JPython là một cổng Python dành cho Java, cho phép các tập lệnh Python truy cập vào các thư viện Java trên máy cục bộ //www.jython.org/
Lập trình Tkinter trong Python
Tkinter là thư viện GUI tiêu chuẩn cho Python. Tkinter trong Python cung cấp một cách nhanh chóng và dễ dàng để tạo các ứng dụng GUI. Tkinter cung cấp giao diện hướng đối tượng cho bộ công cụ Tk GUI.
Sau đây là các bước để tạo một ứng dụng Tkinter:
- import Tkinter module.
- Tạo cửa sổ chính của ứng dụng GUI.
- Thêm một hoặc nhiều widget nói trên vào ứng dụng GUI.
- Gọi vòng lặp sự kiện chính để các hành động có thể diễn ra trên màn hình máy tính của người dùng.
Ví dụ:
# import Tkinter module from tkinter import * # Tạo cửa sổ chính của ứng dụng GUI top = Tk[] # Gọi vòng lặp sự kiện chính để các hành động có thể diễn ra trên màn hình máy tính của người dùng top.mainloop[]
Kết quả:
Các Widget của Tkinter trong Python
Có nhiều widget khác nhau như button, canvas, checkbutton, entry, ... chúng được sử dụng để xây dụng các ứng dụng GUI trong Python.
Trong Tkinter có hai loại widget, loại thứ nhất là các widget thường như nút bấm, textbox… loại thứ hai là containter, đây là những widget chứa các widget khác, chúng còn có một cái tên nữa là layout.
Trong Tkinter có 3 loại layout 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 layout tự do, thuật ngữ gọi là Absolute Positioning, tức là bạn sẽ phải tự quy định vị trí cũng như kích thước của các widget. Layout
Style[].configure["TFrame", background="#333"]5sắp xếp các widget của bạn theo chiều ngang và chiều dọc. Còn layout
Style[].configure["TFrame", background="#333"]2sắp xếp widget theo dạng bảng.
Thiết kế tự do
Thường thì khi thiết kế giao diện chúng ta dùng layout nhiều hơn là thiết kế theo kiểu tự do. Khi thiết kế theo kiểu tự do này chúng ta sẽ phải tự quy đị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ự do 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ể dùng module
Style[].configure["TFrame", background="#333"]7 trong gói
Style[].configure["TFrame", background="#333"]8 nhưng module này rất hạn chế nên ở đây mình dùng module
Style[].configure["TFrame", background="#333"]9 và
bard = Image.open["C:\\bardejov.jpg"] bardejov = ImageTk.PhotoImage[bard]0 trong thư viện Pillow, thư viện này không có sẵn trong Python 3 mà bạn phải tự down về và cài vào.
Style[].configure["TFrame", background="#333"]
Dòng trên sẽ tô màu nền cửa sổ là màu xám đen.
bard = Image.open["C:\\bardejov.jpg"] bardejov = ImageTk.PhotoImage[bard]
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.
label1 = Label[self, image=bardejov]
Chúng ta tạo đối tượng
bard = Image.open["C:\\bardejov.jpg"] bardejov = ImageTk.PhotoImage[bard]1, đây là một lớp dùng để hiển thị chữ và ảnh.
label1.image = bardejov
Chúng ta phải lưu lại tham chiếu đến ảnh nếu không sẽ bị xóa.
label1.place[x=20, y=20]
Chúng ta đặt ảnh tại vị trí x = 20 và y = 20.
Button
Trong ví dụ dưới đây, chúng ta sẽ hiển thị hai button [nút bấm] ở góc trái màn hình sử dụng layout
Style[].configure["TFrame", background="#333"]1.
from tkinter import Tk, RIGHT, BOTH, RAISED
from tkinter.ttk import Frame, Button, Style
class Example[Frame]:
def __init__[self, parent]:
Frame.__init__[self, parent]
self.parent = parent
self.initUI[]
def initUI[self]:
self.parent.title["Button"]
self.style = Style[]
self.style.theme_use["default"]
frame = Frame[self, relief=RAISED, borderwidth=1]
frame.pack[fill=BOTH, expand=True]
self.pack[fill=BOTH, expand=True]
closeButton = Button[self, text="Close"]
closeButton.pack[side=RIGHT, padx=5, pady=5]
okButton = Button[self, text="OK"]
okButton.pack[side=RIGHT]
root = Tk[]
root.geometry["300x200+300+300"]
app = Example[root]
root.mainloop[]
Chúng ta tạo ra 2 frame, frame đầu tiên là layout chính dùng để chứa toàn bộ widget. Frame thứ hai chúng ta đặt như lên frame đầu tiên và cho kích thước dãn ra theo cả chiều ngang và chiều dọc. Hai button được đặt theo chiều ngang ở góc bên phải của cửa sổ.
frame = Frame[self, relief=RAISED, borderwidth=1] frame.pack[fill=BOTH, expand=True]
Hai dòng code trên tạo ra
bard = Image.open["C:\\bardejov.jpg"] bardejov = ImageTk.PhotoImage[bard]3thứ hai, frame này sẽ chiếm phần lớn diện tích
bard = Image.open["C:\\bardejov.jpg"] bardejov = ImageTk.PhotoImage[bard]4 chính. Tham số
bard = Image.open["C:\\bardejov.jpg"] bardejov = ImageTk.PhotoImage[bard]5mô phỏng hiệu ứng hiển thị 3D của
bard = Image.open["C:\\bardejov.jpg"] bardejov = ImageTk.PhotoImage[bard]6ngoài giá trị RAISED bạn có thể thử một số giá trị khác như FLAT, SUNKEN, GROOVE, và RIDGE. Tham số
bard = Image.open["C:\\bardejov.jpg"] bardejov = ImageTk.PhotoImage[bard]7 hiển thị đường viền của frame, mặc định tham số này là 0 nên bạn ko thể thấy đường viền.
closeButton = Button[self, text="Close"] closeButton.pack[side=RIGHT, padx=5, pady=5]
Ở hai dòng trên chúng ta tạo nút close và tham chiếu đến đối tượng
bard = Image.open["C:\\bardejov.jpg"] bardejov = ImageTk.PhotoImage[bard]8. Phương thức
Style[].configure["TFrame", background="#333"]1
label1 = Label[self, image=bardejov]0quy định cách hiển thị của button trên cửa sổ, tham số
label1 = Label[self, image=bardejov]1 sẽ đưa button vào vị trí bên phải,
label1 = Label[self, image=bardejov]2 và
label1 = Label[self, image=bardejov]3 duy định khoảng cách giữa button với các widget khác và với đường viền cửa sổ chính, ở đây khoảng cách là 5 pixel.
from PIL import Image, ImageTk0
Nút OK cũng được tạo ra tương tự và cũng được đưa sang phía bên phải màn hình, sát bên cạnh nút Close với khoảng cách 5 pixel.
Tạo Form
Trong ví dụ dưới đây, chúng ta tiếp tục tìm hiểu về layout
label1 = Label[self, image=bardejov]4
from PIL import Image, ImageTk1
Chúng ta thiết kế một cửa sổ hiển thị form đánh giá.
from PIL import Image, ImageTk2
Đầu tiên chúng ta tạo frame chính để chứa các widget còn lại kể cả các frame khác.
from PIL import Image, ImageTk3
Chúng ta tạo một frame và đặt 2 widget vào đó, đó là một label và một entry.
bard = Image.open["C:\\bardejov.jpg"] bardejov = ImageTk.PhotoImage[bard]1 là widget dùng để hiển thị text,
label1 = Label[self, image=bardejov]6 là widget tạo nhập text. Label có độ dài cố định còn entry thì có độ dài tự động thay đổi theo kích thước cửa sổ nhờ vào 2 tham số
label1 = Label[self, image=bardejov]7 và
label1 = Label[self, image=bardejov]8. Frame thứ hai cũng tương tự.
from PIL import Image, ImageTk4
Trong frame thứ ba chúng ta đặt một L
label1 = Label[self, image=bardejov]9 và một T
label1.image = bardejov0. Label được đặt về phía trên của frame, còn text tự động co dãn theo kích thước cửa sổ.
Grid layout
Tiếp theo chúng ta sẽ tìm hiểu về layout
label1.image = bardejov1.
from PIL import Image, ImageTk5
Đoạn code 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ố
label1.image = bardejov2 và khoảng cách của frame với cửa sổ thông qua tham số padding.
from PIL import Image, ImageTk7
Hai phương thức
label1.image = bardejov3và
label1.image = bardejov4quy định khoảng cách giữa các widget.
from PIL import Image, ImageTk8
Chúng ta tạo một Entry để hiển thị số cũng như kết quả tính toán. Tham số
label1.image = bardejov5 quy định cách thức co dãn theo kích thước cửa sổ, W+E tức là co dãn theo chiều từ trái sang phải.
from PIL import Image, ImageTk9
Nút
label1.image = bardejov6 đượ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
label1.image = bardejov7hiển thị các widget lê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
label1.image = bardejov8 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 text bên trong, ngoài ra không có tham số truyền vào thì phương thức này sẽ đặt layout ở vị trí trên cùng của frame. Bạn có thể kéo dãn cửa sổ để thấy cách nó hoạt động.