Python 入門指南 - GUI 的基本概念

圖形介面的元件有很多種，如標籤 (label) 、按鈕 (button) 、選單 (menu) 、文字方塊 (textfield) 等等




Tk 包含各種常用的 GUI 元件，如下列表

元件名稱	類別名稱
視窗區域	TkFrame
標籤	TkLabel
按鈕	TkButton
核取方塊	TkCheckButton
選取方塊	TkRadioButton
下拉式列表	TkComboBox
列表	TkListbox
捲動軸	TkScrollbar
文字方塊	TkEntry
文字區域	TkText

以下是個簡單例子

from tkinter import *

root = Tk()
some = Label(root, text="Tk's job!!", width="30", height="5")
some.pack()
root.mainloop()

# 《程式語言教學誌》的範例程式
# http://pydoing.blogspot.com/
# 檔名：tkdemo.py
# 功能：示範 Python 程式
# 作者：張凱慶
# 時間：西元 2012 年 12 月 

使用 Tk 首先要 import tkinter ，這裡用 from ， import 之後星號表示所有名稱，這使我們在程式中可以直接使用 tkinter 中的名稱，不需要連帶寫出 tkinter

from tkinter import *

然後建立 Tk 物件 (object)

root = Tk()

這個視窗只有一個文字標籤， Label 型態的 some

some = Label(root, text="Tk's job!!", width="30", height="5")

這裡用了幾個參數 (parameter) ，文字標籤的文字 text 為 Tk's job!! ，高 height 為 5 ，寬 width 為 30 。


來執行看看囉！結果如下



現在我們要把 GUI 的建置放在類別 (class) 中，每個元件都用實體屬性 (instance attribute) 建立，預計做出如下的 GUI



程式如下

from tkinter import *

class GUIDemo(Frame):
    def __init__(self, master=None):
        Frame.__init__(self, master)
        self.grid()
        self.createWidgets()

    def createWidgets(self):
        self.inputText = Label(self)
        self.inputText["text"] = "Input:"
        self.inputText.grid(row=0, column=0)
        self.inputField = Entry(self)
        self.inputField["width"] = 50
        self.inputField.grid(row=0, column=1, columnspan=6)

        self.outputText = Label(self)
        self.outputText["text"] = "Output:"
        self.outputText.grid(row=1, column=0)
        self.outputField = Entry(self)
        self.outputField["width"] = 50
        self.outputField.grid(row=1, column=1, columnspan=6)
        
        self.new = Button(self)
        self.new["text"] = "New"
        self.new.grid(row=2, column=0)
        self.load = Button(self)
        self.load["text"] = "Load"
        self.load.grid(row=2, column=1)
        self.save = Button(self)
        self.save["text"] = "Save"
        self.save.grid(row=2, column=2)
        self.encode = Button(self)
        self.encode["text"] = "Encode"
        self.encode.grid(row=2, column=3)
        self.decode = Button(self)
        self.decode["text"] = "Decode"
        self.decode.grid(row=2, column=4)
        self.clear = Button(self)
        self.clear["text"] = "Clear"
        self.clear.grid(row=2, column=5)
        self.copy = Button(self)
        self.copy["text"] = "Copy"
        self.copy.grid(row=2, column=6)

        self.displayText = Label(self)
        self.displayText["text"] = "something happened"
        self.displayText.grid(row=3, column=0, columnspan=7)

if __name__ == '__main__':
    root = Tk()
    app = GUIDemo(master=root)
    app.mainloop()

# 《程式語言教學誌》的範例程式
# http://pydoing.blogspot.com/
# 檔名：tkdemo2.py
# 功能：示範 Python 程式
# 作者：張凱慶
# 時間：西元 2012 年 12 月 

GUIDemo 類別直接繼承 (inherit) tkinter 中的 Frame ，繼承是物件導向程式設計 (object-oriented programming language) 的特性之一，使子類別 (subclass) 擁有父類別 (superclass) 的特性，同時子類別可擴充父類別的功能。此例 Frame 為沒有元件的視窗，因此我們可以在 GUIDemo 上加入需要的視窗元件

class GUIDemo(Frame):

__init__() 方法 (method) 需要預設參數 master ，這裡先呼叫 Frame 的 __init__()

def __init__(self, master=None):
    Frame.__init__(self, master)
    self.grid()
    self.createWidgets()

注意下面呼叫 grid() ，這是繼承自 Frame 的方法，表示我們在這個 GUI 中要使用格子式幾何版面管理 (grid geometry manager) ，最後呼叫的 createWidgets() 則是我們待會用來加入視窗元件的方法。


下面的 createWidgets() 建立共有三個 Label 、兩個 Entry 及七個 Button ，全都設定好相關的格子，其中

self.inputField.grid(row=0, column=1, columnspan=6)

這樣個設定是 self.inputField 在從上數下來第 0 列，從左往右第 1 行，然後水平擴展 6 格，注意，第幾列第幾行都是從 0 開始數。


目前按鈕都沒有動作，因為我們還沒設定相關事件 (event) 處理，這要設定 command 囉！

中英文術語對照
標籤	label
按鈕	button
選單	menu
文字方塊	textfield
物件	object
參數	parameter
類別	class
實體屬性	instance attribute
繼承	inherit
物件導向程式設計	object-oriented programming language
子類別	subclass
父類別	superclass
方法	method
格子式幾何版面管理	grid geometry manager
事件	event

您可以繼續參考

GUI 篇

• GUI 的基本概念
• 設定 command
• 整合 Encrypt 類別
• GUI 中的編碼與解碼
• 存檔與載入
• 完成版的 EncryptGUI
• 下一步

相關目錄

回 Python 入門指南
回 Python 教材
回首頁

參考資料

http://docs.python.org/3.1/library/tk.html
http://docs.python.org/3.1/library/tkinter.html