Giới thiệu
Trong Python, chúng tôi sử dụng thư viện tkinter để tạo các thành phần GUI và tạo giao diện người dùng tốt hơn.
Trong bài viết này, bạn sẽ tìm hiểu các phương pháp để xây dựng một ứng dụng máy tính dựa trên GUI đơn giản.
Bắt đầu
Trước khi bắt tay vào làm, trước tiên chúng ta cần tổ chức một số việc.
Hãy để chúng tôi bắt đầu bằng cách tải xuống thư viện hình ảnh của Python mà chúng tôi sẽ sử dụng để lấy hình ảnh từ hệ thống cục bộ của chúng tôi. Để cài đặt PIL (Pillow), hãy khởi chạy thiết bị đầu cuối của bạn và nhập lệnh bên dưới.
pip install Pillow
Bây giờ bạn đã cài đặt gói. Bạn sẽ phải tải xuống các biểu tượng cần thiết cho máy tính.
Bạn có thể truy cập hình ảnh của Google và tải xuống các biểu tượng cần thiết. Tuy nhiên, nếu bạn muốn có cùng một bộ biểu tượng mà tôi đã sử dụng cho dự án này, bạn có thể tải xuống từ -
https://www.dropbox.com/sh/0zqd6zd9b8asmor/AAC3d2iOvMRl8INkbCuMUo_ya?dl=0.
Đảm bảo rằng bạn tải tất cả các biểu tượng xuống một thư mục có tên là “tài sản”.
Tiếp theo, chúng ta cần nhập các mô-đun được yêu cầu.
from tkinter import * from PIL import Image # pip install Pillow from PIL import ImageTk
Và đó là nó. Bây giờ bạn phải thiết lập mọi thứ và sẵn sàng để bắt đầu.
Tạo các hàm
Đầu tiên, chúng ta phải tạo các chức năng mà các thành phần GUI sẽ sử dụng.
Có ba chức năng chính, một khi nhấn số hoặc ký hiệu, một chức năng khác khi nhấn nút bằng và cuối cùng là khi nhấn nút xóa.
Đầu tiên chúng ta hãy khởi tạo một số biến toàn cục -
txt = "" res = False ans = 0
Ví dụ
Chức năng khi số phím được nhấn -
def press(num): global txt, ans, res if (res==True): txt = ans res = False txt = txt + str(num) equation.set(txt)
Ví dụ1
Chức năng khi nhấn nút bằng -
def equal():
try:
global txt, ans, res
ans = str(eval(txt))
equation.set(ans)
res = True
except:
equation.set("ERROR : Invalid Equation")
txt="" Chức năng khi nhấn nút xóa -
Ví dụ
def clear():
global txt, ans, res
txt = ""
equation.set("")
res = False Bây giờ chúng tôi đã xác định các chức năng, chúng tôi có thể bắt đầu chức năng chính và bắt đầu làm việc trên các thành phần GUI.
if __name__ == "__main__":
window = Tk()
window.configure(background="black")
window.title("Calculator")
window.iconbitmap("assets\Calculator\Logo.ico")
window.geometry("343x417")
window.resizable(0,0) Các dòng mã trên sẽ cấu trúc một máy tính hoàn hảo.
Lưu ý - Để tránh gặp lỗi, hãy đảm bảo bạn tuân theo cấu trúc tệp chính xác như đoạn mã trên. Lưu biểu tượng logo bên trong thư mục Máy tính nằm trong thư mục nội dung.
Thực hiện theo định dạng dưới đây -
+---Working Directory +---Calculator.py +---assets +---Calculator +---All the icons.
Tiếp theo, chúng ta hãy thiết kế trường văn bản nơi chúng ta sẽ thấy các con số.
equation = StringVar()
txt_field = Entry(relief=RIDGE,textvariable=equation,bd=10,font=("Aerial",20),bg="powder blue")
txt_field.grid(columnspan=4,ipady=10,ipadx=10,sticky="nsew") Bây giờ, chúng ta sẽ làm theo quy trình lặp đi lặp lại là thêm từng biểu tượng vào cửa sổ GUI. Dưới đây là một ví dụ đơn lẻ về nó, hãy làm theo nó cho phần còn lại hoặc chỉ cần sao chép nó từ mã hoàn chỉnh ở cuối bài viết này.
Ví dụ
width=80
height=80
img1 = Image.open("assets/Calculator/one.PNG")
img1 = img1.resize((width,height))
oneImage = ImageTk.PhotoImage(img1)
button1 = Button(window, image=oneImage,bg="white",command = lambda:press(1),height=height,width=width)
button1.grid(row=2,column=0,sticky="nsew") Tương tự như các dòng trên, hãy làm theo button2, button3 và bật cho đến khi bạn bao gồm tất cả các số và ký hiệu.
Và đó là nó. Nếu bạn chạy chương trình ngay bây giờ, bạn phải thấy một máy tính trông rất trừu tượng.
Trong trường hợp bạn không thể theo dõi, bạn có thể lấy mã hoàn chỉnh từ bên dưới.
Ví dụ
from tkinter import *
from PIL import Image
from PIL import ImageTk
txt = ""
res = False
ans = 0
def press(num):
global txt, ans, res
if (res==True):
txt = ans
res = False
txt = txt + str(num)
equation.set(txt)
def equal():
try:
global txt, ans, res
ans = str(eval(txt))
equation.set(ans)
res = True
except:
equation.set("ERROR : Invalid Equation")
txt=""
def clear():
global txt, ans, res
txt = ""
equation.set("")
res = False
if __name__ == "__main__":
window = Tk()
window.configure(background="black")
window.title("Calculator")
window.iconbitmap("assets\Calculator\Logo.ico")
window.geometry("343x417")
window.resizable(0,0)
equation = StringVar()
txt_field = Entry(relief=RIDGE,textvariable=equation,bd=10,font=("Aerial",20),bg="powder blue")
txt_field.grid(columnspan=4,ipady=10,ipadx=10,sticky="nsew")
width=80
height=80
img1 = Image.open("assets/Calculator/one.PNG")
img1 = img1.resize((width,height))
oneImage = ImageTk.PhotoImage(img1)
button1 = Button(window, image=oneImage,bg="white",command = lambda:press(1),height=height,width=width)
button1.grid(row=2,column=0,sticky="nsew")
img2 = Image.open("assets/Calculator/two.PNG")
img2 = img2.resize((width,height))
twoImage = ImageTk.PhotoImage(img2)
button2 = Button(window, image=twoImage,bg="white",command = lambda:press(2),height=height,width=width)
button2.grid(row=2,column=1,sticky="nsew")
img3 = Image.open("assets/Calculator/three.PNG")
img3 = img3.resize((width,height))
threeImage = ImageTk.PhotoImage(img3)
button3 = Button(window, image=threeImage,bg="white",command = lambda:press(3),height=height,width=width)
button3.grid(row=2,column=2,sticky="nsew")
img4 = Image.open("assets/Calculator/four.PNG")
img4 = img4.resize((width,height))
fourImage = ImageTk.PhotoImage(img4)
button4 = Button(window, image=fourImage,bg="white",command = lambda:press(4),height=height,width=width)
button4.grid(row=3,column=0,sticky="nsew")
img5 = Image.open("assets/Calculator/five.PNG")
img5 = img5.resize((width,height))
fiveImage = ImageTk.PhotoImage(img5)
button5 = Button(window, image=fiveImage,bg="white",command = lambda:press(5),height=height,width=width)
button5.grid(row=3,column=1,sticky="nsew")
img6 = Image.open("assets/Calculator/six.PNG")
img6 = img6.resize((width,height))
sixImage = ImageTk.PhotoImage(img6)
button6 = Button(window, image=sixImage,bg="white",command = lambda:press(6),height=height,width=width)
button6.grid(row=3,column=2,sticky="nsew")
img7 = Image.open("assets/Calculator/seven.PNG")
img7 = img7.resize((width,height))
sevenImage = ImageTk.PhotoImage(img7)
button7 = Button(window, image=sevenImage,bg="white",command = lambda:press(7),height=height,width=width)
button7.grid(row=4,column=0,sticky="nsew")
img8 = Image.open("assets/Calculator/eight.PNG")
img8 = img8.resize((width,height))
eightImage = ImageTk.PhotoImage(img8)
button8 = Button(window, image=eightImage,bg="white",command = lambda:press(8),height=height,width=width)
button8.grid(row=4,column=1,sticky="nsew")
img9 = Image.open("assets/Calculator/nine.PNG")
img9 = img9.resize((width,height))
nineImage = ImageTk.PhotoImage(img9)
button9 = Button(window, image=nineImage,bg="white",command = lambda:press(9),height=height,width=width)
button9.grid(row=4,column=2,sticky="nsew")
img0 = Image.open("assets/Calculator/zero.PNG")
img0 = img0.resize((width,height))
zeroImage = ImageTk.PhotoImage(img0)
button0 = Button(window, image=zeroImage,bg="white",command = lambda:press(0),height=height,width=width)
button0.grid(row=5,column=1,sticky="nsew")
imgx = Image.open("assets/Calculator/multiply.PNG")
imgx = imgx.resize((width,height))
multiplyImage = ImageTk.PhotoImage(imgx)
buttonx = Button(window, image=multiplyImage,bg="white",command = lambda:press("*"),height=height,width=width)
buttonx.grid(row=2,column=3,sticky="nsew")
imgadd = Image.open("assets/Calculator/add.PNG")
imgadd = imgadd.resize((width,height))
addImage = ImageTk.PhotoImage(imgadd)
buttonadd = Button(window, image=addImage,bg="white",command = lambda:press("+"),height=height,width=width)
buttonadd.grid(row=3,column=3,sticky="nsew")
imgdiv = Image.open("assets/Calculator/divide.PNG")
imgdiv = imgdiv.resize((width,height))
divImage = ImageTk.PhotoImage(imgdiv)
buttondiv = Button(window, image=divImage,bg="white",command = lambda:press("/"),height=height,width=width)
buttondiv.grid(row=5,column=3,sticky="nsew")
imgsub = Image.open("assets/Calculator/subtract.PNG")
imgsub = imgsub.resize((width,height))
subImage = ImageTk.PhotoImage(imgsub)
buttonsub = Button(window, image=subImage,bg="white",command = lambda:press("- "),height=height,width=width)
buttonsub.grid(row=4,column=3,sticky="nsew")
imgeq = Image.open("assets/Calculator/equal.PNG")
imgeq = imgeq.resize((width,height))
eqImage = ImageTk.PhotoImage(imgeq)
buttoneq = Button(window, image=eqImage,bg="white",command = equal,height=height,width=width)
buttoneq.grid(row=5,column=2,sticky="nsew")
imgclear = Image.open("assets/Calculator/clear.PNG")
imgclear = imgclear.resize((width,height))
clearImage = ImageTk.PhotoImage(imgclear)
buttonclear = Button(window, image=clearImage,bg="white",command = clear,height=height,width=width)
buttonclear.grid(row=5,column=0,sticky="nsew")
window.mainloop() Nếu bạn đang gặp sự cố định dạng với chương trình trên, bạn cũng có thể lấy nó từ https://github.com/SVijayB/PyHub/blob/master/Graphics/Simple%20Calculator.py.
Đầu ra
