Hướng dẫn dùng button tkinter python

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.

Sr.No.Option & Description1

activebackground

Background color when the button is under the cursor.

2

activeforeground

Foreground color when the button is under the cursor.

3

bd

Border width in pixels. Default is 2.

4

bg

Normal background color.

5

command

Function or method to be called when the button is clicked.

6

fg

Normal foreground [text] color.

7

font

Text font to be used for the button's label.

8

height

Height of the button in text lines [for textual buttons] or pixels [for images].

9

highlightcolor

The color of the focus highlight when the widget has focus.

10

image

Image to be displayed on the button [instead of text].

11

justify

How to show multiple text lines: LEFT to left-justify each line; CENTER to center them; or RIGHT to right-justify.

12

padx

Additional padding left and right of the text.

13

pady

Additional padding above and below the text.

14

relief

Relief specifies the type of the border. Some of the values are SUNKEN, RAISED, GROOVE, and RIDGE.

15

state

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.

16

underline

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.

17

width

Width of the button in letters [if displaying text] or pixels [if displaying an image].

18

wraplength

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 −

Sr.No.Method & Description1

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.

2

invoke[]

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:

  1. import Tkinter module.
  2. Tạo cửa sổ chính của ứng dụng GUI.
  3. Thêm một hoặc nhiều widget nói trên vào ứng dụng GUI.
  4. 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, ImageTk
0

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, ImageTk
1

Chúng ta thiết kế một cửa sổ hiển thị form đánh giá.

from PIL import Image, ImageTk
2

Đầ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, ImageTk
3

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, ImageTk
4

Trong frame thứ ba chúng ta đặt một L

label1 = Label[self, image=bardejov]
9 và một T
label1.image = bardejov
0. 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 = bardejov
1.

from PIL import Image, ImageTk
5

Đ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, ImageTk
6

Chúng ta quy định kiểu phông chữ thông qua tham số

label1.image = bardejov
2 và khoảng cách của frame với cửa sổ thông qua tham số padding.

from PIL import Image, ImageTk
7

Hai phương thức

label1.image = bardejov
3và 
label1.image = bardejov
4quy định khoảng cách giữa các widget.

from PIL import Image, ImageTk
8

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 = bardejov
5 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, ImageTk
9

Nút

label1.image = bardejov
6 đượ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 = bardejov
7hiể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 = bardejov
8 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.

Chủ Đề