雲林SONG: Python 3 Tkinter介紹：一個簡易的四則運算機(A Simple Calculator with Tkinter)

若您覺得文章寫得不錯，請點選文章上的廣告，來支持小編，謝謝。

本教學文章會先介紹一些常用的Python GUI 套件工具，接著會用幾個範例呈現 Python Tkinter控制項元件的用法，最後會以一個簡易的四則運算機當例子作為結尾。

常見的 Python GUI 套件工具：

Tkinter：為Python內建的GUI套件。
wxPython ：包裝了跨平台的GUI套件wxWidgets，是個開源的套件。
其他：可參考 GUI Programming in Python。

第一個 Python 3 Tkinter 視窗
建立Tkinter視窗有幾個步驟：

匯入 Tkinter 模組。
建立主視窗。
建立視窗控制項元件。
進入事件處理迴圈以處理不同的視窗訊息。

要建立一個空白的視窗的話，可以省略第三步驟，例如底下範例：

#!/usr/bin/python

# 步驟一：匯入 tkinter 模組。
import tkinter
# 步驟二：建立主視窗。
mainWin = tkinter.Tk()
# 視窗標題
mainWin.title("Hello 雲林SONG")
# 視窗大小
mainWin.geometry("320x240")
# 步驟四： 進入事件處理迴圈。
mainWin.mainloop()

執行結果如下：

練習題：
修改視窗的標題(Title)。
修改視窗的大小(Geometry)。

好，接下來開始慢慢加進一些控制項吧。

標籤 Label
Label的用法說明如下：
labelVariable = Label(主元件，參數一，參數二...)

例如若想在第一個 Tkinter 視窗增加一個標籤，語法如下：

1 2	labelVariable = tkinter.Label(mainWin, text="這是標籤") labelVariable.pack()

詳細的參數說明可參考 https://www.tutorialspoint.com/python/tk_label.htm。

按鈕 Button

Button的用法說明如下：
buttonVariable = Button(主元件，參數一，參數二...)

例如若想在第一個 Tkinter 視窗增加一個按鈕，語法如下：

1 2	buttonVariable = tkinter.Button(mainWin, text="這是按鈕") buttonVariable.pack()

詳細的參數說明可參考 https://www.tutorialspoint.com/python/tk_button.htm。

文字方塊 Entry

文字方塊的用法說明如下：
entryVariable = Entry(主元件，參數一，參數二...)

例如若想在第一個 Tkinter 視窗增加一個文字方塊，語法如下：

1 2	entryVariable = tkinter.Entry(mainWin, text="這是文字方塊") entryVariable.pack()

詳細的參數說明可參考 https://www.tutorialspoint.com/python/tk_entry.htm。

單選按鈕 RadioButton
單選按鈕的用法說明如下：
radioButtonVariable = Radiobutton(主元件，參數一，參數二...)

例如若想在第一個 Tkinter 視窗增加一個單選按鈕，語法如下：

1 2	radioButtonVariable = tkinter.Radiobutton(mainWin, text="這是單選按鈕") radioButtonVariable.pack()

詳細的參數說明可參考 https://www.tutorialspoint.com/python/tk_radiobutton.htm。

將以上的範例整合在一起的結果如下圖：

若按下按鈕程式是不會有任何動作的，這是因為還需要加上處理按鈕按下的程式碼，此部分的觀念可參考筆者的文章：程式設計師需要知道的圖形使用者介面(GUI)觀念。在 Tkinter 中，每個元件(Widget)都有command參數，以Button為例，就是設定按鈕按一下(Click)時會處理的CallBack function。本例的按鈕CallBack function如下：

1
2
3

# 按鈕 Click 事件處理函式
def btnCallBack():
    tkinter.messagebox.showinfo( "雲林SONG", "按鈕Click")

接著修改Button的參數：

1 2	# 建立按鈕 buttonVariable = tkinter.Button(mainWin, text="這是按鈕", command=btnCallBack)

此時，按下按鈕就會出現如下圖的MessageBox視窗(需要import tkinter.messagebox)：

好，最後使用上述的Widget來製作一個簡易的四則運算機，UI的設計方式如下：

使用Grid manager來做UI版面的排版，此部分請參考 http://effbot.org/tkinterbook/grid.htm。

程式執行影片：

程式碼：

	#!/usr/bin/python

	# 步驟一：匯入 tkinter 模組。
	from tkinter import Tk, Label, Entry, Radiobutton, IntVar

	# 步驟二：建立主視窗。
	mainWin = Tk()
	var = IntVar()
	operation = [ '+', '-', '*', '/']

	# 視窗標題
	mainWin.title("Hello 雲林SONG")
	# 視窗大小
	mainWin.geometry("480x140")

	# 步驟三：建立視窗控制項元件。
	# 建立標籤
	firstNumLabel = Label(mainWin, text="數字1")
	secondNumLabel = Label(mainWin, text="數字2")
	resultNumLabel = Label(mainWin, text="結果：")

	# 按鈕 Click 事件處理函式
	def cal():
	exp = firstNum.get() +operation[var.get()] + secondNum.get()
	result = "結果：" + str(eval(exp))
	resultNumLabel.config(text = result)

	# 建立文字方塊
	firstNum = Entry(mainWin, text="Num1")
	secondNum = Entry(mainWin, text="Num2")

	# 建立單選按鈕 aBtn ==> addition, sBtn ==> subtraction, mBtn ==> multiplication, dBtn ==> division
	aBtn = Radiobutton(mainWin, text="+", variable=var, value=0, command=cal)
	sBtn = Radiobutton(mainWin, text="-", variable=var, value=1, command=cal)
	mBtn = Radiobutton(mainWin, text="*", variable=var, value=2, command=cal)
	dBtn = Radiobutton(mainWin, text="/", variable=var, value=3, command=cal)

	# 版面配置
	firstNumLabel.grid(row=1,column=0)
	secondNumLabel.grid(row=1,column=3)
	resultNumLabel.grid(row=4,column=4)
	firstNum.grid(row=1,column=1)
	secondNum.grid(row=1,column=4)
	aBtn.grid(row=0,column=2)
	sBtn.grid(row=1,column=2)
	mBtn.grid(row=2,column=2)
	dBtn.grid(row=3,column=2)

	# 步驟四：進入事件處理迴圈。
	mainWin.mainloop()

view raw TkDemo.py hosted with ❤ by GitHub

參考資料：

[1] https://docs.python.org/3/library/tk.html
[2] https://www.python-course.eu/python_tkinter.php
[3] https://www.tutorialspoint.com//python/python_gui_programming.htm

Python 3 Tkinter介紹：一個簡易的四則運算機(A Simple Calculator with Tkinter)

沒有留言: