Hello Tkinter Label

下面我們將以 Tkinter 中最簡單的控制元件: Label 控制元件, 開始這個系列的教程. 在 Tkinter 中, Label 控制元件用以顯示文字和圖片. Label 通常被用來展示資訊, 而非與使用者互動. (譯者注: Label 也可以繫結點選等事件, 只是通常不這麼用).

程式設計師的教程, 怎麼能少了 Hello World . 我們尊重這個傳統, 但我們不說 Hello World, 讓我們來秀出 Hello Tkinter 吧.

下面的 Python 指令碼用 Tkinter 建立了一個帶有 "Hello Tkinter" 字樣的視窗. 你可以在 Python 的命令列直譯器中逐行輸入下面的指令碼, 也可以將之存入一份檔案, 比如 hello.py .

from Tkinter import *
# if you are working under Python 3, comment the previous line and comment out the following line
#from tkinter import *

root = Tk()

w = Label(root, text="Hello Tkinter!")
w.pack()

root.mainloop()

執行例子

如果你將上述指令碼存入檔案 hello.py, 那麼可以這樣啟動它:

$ python hello.py

如果你在 Linux Gnome 環境下執行上述命令, 會顯示如下視窗:

在 Windows 系統下是這個樣子:

逐行解釋

在 Tkinter 程式設計中, 一定少不了 Tkinter 中的 Tk 類. 上例中我們通過星號 ( * ) 來將 Tkinter 中的所有模組引入名稱空間.

from Tkinter import *

要初始化一個 Tkinter 程式, 我們需要一個 root 控制元件, 即根視窗, 它包括標題欄和其他一些由本地視窗系統提供的裝飾. root 控制元件需要在建立其他控制元件前建立, 並且一個視窗只能有一個 root 控制元件.

root = Tk()

這之後的一行程式碼, 我們建立了一個 Label 控制元件. 它的第一個引數是其父控制元件, 在我們這個例子裡就是上面的 root 控制元件. 因此這個 Label 控制元件是上面的 root 控制元件的一個子控制元件. 這個 Label 控制元件的第二個引數指示其所要顯示的文字.

w = Label(root, text="Hello Tkinter!")

pack() 方法指示這個 Label 的大小為正好可以包裹其中的文字.

w.pack()

當我們啟動了 Tkinter 的訊息迴圈 (event loop) 後, 視窗就會被顯示出來:

root.mainloop()

上面的指令碼會一直執行在這個訊息佇列中, 直到這個視窗被關閉.

在 Label 中顯示圖片

上面我們已經提到, Label 既可以顯示文字, 也可以顯示圖片. 下面的例子中我們將建立兩個 Label, 一個用以顯示文字, 一個用以顯示圖片:

from Tkinter import *

root = Tk()
logo = PhotoImage(file="../images/python_logo_small.gif")
w1 = Label(root, image=logo).pack(side="right")
explanation = """At present, only GIF and PPM/PGM
formats are supported, but an interface 
exists to allow additional image file
formats to be added easily."""
w2 = Label(root, 
           justify=LEFT,
           padx = 10, 
           text=explanation).pack(side="left")
root.mainloop()

上面的指令碼執行後, 在 Ubuntu 下顯示如下:

"justify" 引數指示文字的對齊方向, 可選值為 RIGHT, CENTER, LEFT, 預設為 Center.

"padx" 引數指定水平方向的邊距, 預設為1畫素.

"pady" 引數指定豎直方向的邊距, 預設為1畫素.

上面的例子中, 如果去掉 justify 和 padx 引數, 那麼上面的視窗會顯示為這個樣子:

想讓文字顯示在圖片上面? 好辦! 我們只需要在一個 Label 控制元件中同時使用圖片和文字的相關選項即可. 預設情況下, 如果為一個 Label 控制元件指定了圖片, 那麼這個 Label

就會只顯示圖片. 要讓圖片和文字一同顯示, 就要使用 compound 選項. 設定 compound 為 CENTER 將使文字顯示在圖片上方:

from Tkinter import *

root = Tk()
logo = PhotoImage(file="../images/python_logo_small.gif")
explanation = """At present, only GIF and PPM/PGM
formats are supported, but an interface 
exists to allow additional image file
formats to be added easily."""
w = Label(root, 
          compound = CENTER,
          text=explanation, 
          image=logo).pack(side="right")

root.mainloop()

我們可以讓圖片顯示在左側, 文字顯示在右側, 讓文字向左對齊, 並在左右兩側空出 10 畫素的邊距:

w = Label(root, 
          justify=LEFT,
          compound = LEFT,
          padx = 10, 
          text=explanation, 
          image=logo).pack(side="right")

設定 compound 為 BOTTOM, LEFT, RIGHT, TOP, 圖片就會顯示在相應的位置上.

顏色和字型

諸如 Label, Text, Canvas 等控制元件, 支援指定字型, 通過 "font" 屬性設定即可實現. 需要特別注意的是字型不是平臺獨立的.

"fg" 屬性可以指定字型的顏色, "bg" 屬性可以指定控制元件的背景顏色.

from Tkinter import *

root = Tk()

Label(root, 
		 text="Red Text in Times Font",
		 fg = "red",
		 font = "Times").pack()
Label(root, 
		 text="Green Text in Helvetica Font",
		 fg = "light green",
		 bg = "dark green",
		 font = "Helvetica 16 bold italic").pack()
Label(root, 
		 text="Blue Text in Verdana bold",
		 fg = "blue",
		 bg = "yellow",
		 font = "Verdana 10 bold").pack()

root.mainloop()

上例指令碼執行後顯示如下:

改變控制元件內容

在下面的例子中, Label 中的文字將被自動加1, 直到按鈕被點選時停止計數:

import Tkinter as tk

counter = 0 
def counter_label(label):
  def count():
    global counter
    counter += 1
    label.config(text=str(counter))
    label.after(1000, count)
  count()
 
 
root = tk.Tk()
root.title("Counting Seconds")
label = tk.Label(root, fg="green")
label.pack()
counter_label(label)
button = tk.Button(root, text='Stop', width=25, command=root.destroy)
button.pack()
root.mainloop()

上面的指令碼執行後窗口顯示如下:

譯者水平有限, 如有疏漏, 歡迎指正.