Python 程式設計之Tkinter的使用01

• 原文部落格連結地址
• Python提供了多個圖形開發介面的庫，幾個常用Python GUI庫如下：
• Tkinter：Tkinter模組(Tk 介面)是Python的標準 Tk GUI 工具包的介面.Tk和Tkinter可以在大多數的Unix平臺下使用, 同樣可以應用在Windows和Macintosh系統裡。Tk8.0的後續版本可以實現本地視窗風格,並良好地執行在絕大多數平臺中。
• wxPython：wxPython是一款開源軟體，是Python語言的一套優秀的GUI圖形庫，允許Python程式設計師很方便的建立完整的、功能健全的GUI使用者介面。
• Jython：Jython程式可以和Java無縫整合。除了一些標準模組，Jython使用Java的模組。Jython 幾乎擁有標準的Python中不依賴於C 語言的全部模組。比如，Jython的使用者介面將使用 Swing，AWT或者SWT。Jython 可以被動態或靜態地編譯成Java位元組碼

一. Tkinter介紹

• Tkinter是Python的標準GUI庫。Python使用 Tkinter可以快速的建立GUI應用程式。
• 由於Tkinter是內建到python的安裝包中、只要安裝好Python之後就能import Tkinter庫、而且IDLE也是用Tkinter編寫而成、對於簡單的圖形介面Tkinter還是能應付自如

需要注意: Python3.x版本使用的庫名為 tkinter,即首寫字母T為小寫

import tkinter
複製程式碼

• 建立一個GUI程式
  • 1、匯入tkinter模組
  • 2、建立控制元件
  • 3、指定這個控制元件的master，即這個控制元件屬於哪一個
  • 4、告訴GM(geometry manager)有一個控制元件產生了

1. 主視窗

• 在iOS中每一個APP都有一個主視窗window, 該window就是所有檢視嘴地城最基礎的檢視View
• 在Python中童謠也會有一個主視窗, 下面看一下tkinter生成主視窗的方法

# 主視窗
import tkinter

# 建立主視窗
window = tkinter.Tk()

# 設定標題
window.title(`Titanjun`)

# 設定視窗大小
window.geometry(`400x400`)

# 進入訊息迴圈
window.mainloop()
複製程式碼

效果如下

主視窗除了上述方法之外還有以下方法

# 框體大小的可調性, 分別表示x, y方向的可變性
window.resizable(0, 0)

# 退出
window.quit()

# 重新整理頁面
window.update()
複製程式碼

二. Tkinter元件

• Tkinter的提供各種控制元件，如按鈕，標籤和文字框，一個GUI應用程式中使用, 這些控制元件通常被稱為控制元件或者部件
• 目前有15種Tkinter的部件, 下面是對這些部件以及一個簡短的介紹

控制元件	描述
Label	標籤控制元件, 可以顯示文字和點陣圖
Button	按鈕控制元件, 在程式中顯示按鈕
Entry	輸入控制元件；用於顯示簡單的文字內容
Checkbutton	多選框控制元件；用於在程式中提供多項選擇框
Frame	框架控制元件；在螢幕上顯示一個矩形區域，多用來作為容器
Canvas	畫布控制元件；顯示圖形元素如線條或文字
Listbox	列表框控制元件；在Listbox視窗小部件是用來顯示一個字串列表給使用者
Menubutton	選單按鈕控制元件，由於顯示選單項。
Menu	選單控制元件；顯示選單欄,下拉選單和彈出選單
Message	訊息控制元件；用來顯示多行文字，與label比較類似
Radiobutton	單選按鈕控制元件；顯示一個單選的按鈕狀態
Scale	範圍控制元件；顯示一個數值刻度，為輸出限定範圍的數字區間
Scrollbar	滾動條控制元件，當內容超過視覺化區域時使用，如列表框
Text	文字控制元件；用於顯示多行文字
Spinbox	輸入控制元件；與Entry類似，但是可以指定輸入範圍值
PanedWindow	一個視窗布局管理的外掛，可以包含一個或者多個子控制元件
LabelFrame	一個簡單的容器控制元件, 常用與複雜的視窗布局
tkMessageBox	用於顯示你應用程式的訊息框

如果之前做過H5前端開發或者iOS等頁面相關開發工作的, 應該能到, 其實這些元件和其他開發語言提供的元件功能相似, 屬性也類似, 下面我們先看一下一些通用的屬性介紹

屬性值	屬性描述
bg	控制元件的背景顏色
fg	元件中的字型顏色
font	設定文字的字型樣式和字號
height	設定控制元件高度
width	設定控制元件寬度
bd	設定控制元件邊框的大小, 預設2個畫素
relief	設定邊框樣式, 有falt, sunken, raised, groove, ridge, 預設flat
text	設定文字內容
anchor	瞄點, 控制文字的位置, 預設居中(可選: n北, e東, s南, w西, center居中, ne se, sw, nw)
justify	顯示多行文字的時候,設定不同行之間的對齊方式(left, right, center)
wraplength	根據寬度限制控制元件每行顯示的字元的數量
underline	下劃線, 預設沒有; 取值就是帶下劃線的字串索引，為 0 時，第一個字元帶下劃線
padx	在x軸方向上的內邊距(padding)，是指控制元件的內容與控制元件邊緣的距離
pady	在y軸方向上的內邊距(padding)

1. Label控制元件

• Label控制元件用以顯示文字和圖片.
• Label通常被用來展示資訊, 而非與使用者互動
• Label也可以繫結點選等事件, 只是通常不這麼用

label = tkinter.Label(window,
                      text="我是一隻小鴨子",
                      bg=`#999999`,
                      fg=`white`,
                      font=(`黑體`, 13),
                      justify=`center`,
                      height=5,
                      width=30,
                      anchor=`n`,
                      # wraplength=30
                      underline=3,
                      bd=3,
                      relief=`flat`
                      )
#顯示出來
label.pack()
複製程式碼

顯示效果

部分屬性介紹

• anchor: 文字在空間中的顯示位置(按上北下南, 左西右東規則), 可選值有(n北 e東 s南 w西 center居中 ne西北 se東南 sw西南 nw東北)方向
• image: 顯示的圖片

2. Button控制元件

• Button控制元件是一個標準的Tkinter小部件，用於各種按鈕, 如果用滑鼠點選按鈕，可能會開始一些操作
• Button可以顯示文字和圖片
• 按鈕只能以單一字型顯示文字, 文字可以跨越多行

# 設定標題
window.title(`Titanjun`)

# 設定視窗大小
window.geometry(`400x400`)

# 建立按鈕
button1 = tkinter.Button(window,
                         text=`按鈕1`,
                         bg=`orange`,
                         height=3,
                         width=20,
                         bd=3,
                         relief=`sunken`,
                         activebackground=`orange`,
                         activeforeground=`white`,
                         command=action1
                         )
button1.pack()


button2 = tkinter.Button(window, text=`Titanjun`, height=3, command=window.quit())
button2.pack()

# 進入訊息迴圈
window.mainloop()
複製程式碼

效果樣式

部分屬性介紹

• activebackground: 當滑鼠放上去時，按鈕的背景色
• activeforeground: 當滑鼠放上去時，按鈕的文字顏色
• highlightcolor: 要高亮的顏色
• image: 按鈕上要顯示的圖片
• state: 設定按鈕元件狀態,可選的有(normal(預設), active, disabled)
• command: 按鈕的繫結函式方法, 接受一個函式名，注意函式名不要加引號

3. Entry輸入

輸入控制元件, 用於顯示簡單的文字內容, 和iOS中的UITextField一樣, 示例如下

vari = tkinter.Variable()
entry = tkinter.Entry(window, textvariable=vari)
entry.pack()

# 設定值
vari.set(`very good`)
# 取值
print(vari.get())
print(entry.get())

# 只讀輸入框
vari2 = tkinter.Variable()
entry2 = tkinter.Entry(window, textvariable=vari2, state=`disabled`)
entry2.pack()

# 設定值
vari2.set(`very bad`)
print(vari2.get())

# 密碼輸入框, 無論輸入什麼都顯示密文
vari3 = tkinter.Variable()
entry3 = tkinter.Entry(window, textvariable=vari3, show=`@`, bg=`red`, fg=`white`)
entry3.pack()
複製程式碼

效果樣式

監聽輸入框內文字的改變

• 這裡我們需要通過設定一下三個選項
• validate: 設定輸入框的監聽狀態
  • focus:當Entry元件獲得或失去焦點的時候驗證
  • focusin: 當Entry元件獲得焦點的時候驗證
  • focusout: 當Entry元件失去焦點的時候驗證
  • key:當輸入框被編輯的時候驗證
  • all: 當出現上邊任何一種情況的時候驗證
• validatecommand: 接受一個判斷輸入框內的文字是否符合要求的函式, 該函式只能返回 True 或 False 表示驗證的結果
• invalidcommand: 指定的函式只有在validatecommand的返回值為False的時候才被呼叫

# 主視窗
import tkinter

# 驗證輸入的文字
def varileText():
    text = entry4.get()
    if text == `1`:
        print(`對嘍`)
        return True
    print(`錯漏`)
    return False

#
def testInvaild():
    print(`invaildCommanf被呼叫`)
    return True

# 建立主視窗
window = tkinter.Tk()
# 設定標題
window.title(`Titanjun`)
# 設定視窗大小
window.geometry(`400x400`)


# 驗證輸入的內容是否符合要求
vari4 = tkinter.Variable()
entry4 = tkinter.Entry(window, textvariable=vari4, validate=`key`, validatecommand=varileText, invalidcommand=testInvaild)
entry4.pack()

# 進入訊息迴圈
window.mainloop()
複製程式碼

4. Text多行文字

• Text文字元件用於顯示和處理多行文字。
• 在Tkinter的所有元件中，Text元件顯得異常強大和靈活，它適用於處理多工
• 當建立一個Text元件的時候裡面是沒有內容的。為了給其插入內容，可以使用insert()以及INSERT或END索引號

4-1. 插入文字/控制元件/圖片

text = Text(window, bg=`yellow`, width=40, height=10)
#INSERT索引表示在游標處插入
text.insert(INSERT,`I Love`)
#END索引號表示在最後插入
text.insert(END,` you`)
text.pack()

def show():
    print(`好了, 你贏了`)

# text還可以插入按鈕  圖片等
b1 = Button(text, text=`點我點我`, command=show)
# 在text建立元件的命令
text.window_create(INSERT, window=b1)
複製程式碼

4-2. 索引值

• Indexes(索引)是用來指向Text元件中文字的位置，跟python的序列索引一樣，Text的元件索引也是對應實際字元之間的位置
• 值得注意的是： 行號以1開始 列號以0開始
• 例如: 2.4表示第2行第4列的字元

from tkinter import *
root = Tk()
text1=Text(root,width=30,height=3)
text1.insert(INSERT,`index的練習`)
#1.2到1.5的範圍之間
print(text1.get(1.2,1.5))
複製程式碼

4-3. Text中的Tags

Tags通常用於改變Text元件中內容的樣式和功能，你可以修改文字的字型，尺寸和顏色，另外Tags還允許你將文字、嵌入的元件和圖片與鍵盤相關聯，除了user-defined tags(使用者自定義的Tags)

text.insert(INSERT, `自定義標籤的名字`)

#第一個引數為自定義標籤的名字
#第二個引數為設定的起始位置，第三個引數為結束位置
#第四個引數為另一個位置
text.tag_add(`tag1`, `1.7`, `1.12`, `1.14`)

#用tag_config函式來設定標籤的屬性(這裡不要用簡寫, 否則報錯)
text.tag_config(`tag1`, font=17, background=`blue`, foreground=`red`)
# text.tag_config(`tag1`, bg=`yellow`, fg=`red`)
#新的tag會覆蓋舊的tag
複製程式碼

4-4. 帶滾動條

text = Text(window, bg=`yellow`, width=100, height=10)
# 新增右側滾動條
scroll = Scrollbar()
# side放到窗體的那一側   fill填充
scroll.pack(side=RIGHT, fill=Y)
text.pack(side=RIGHT, fill=Y)
# 兩者關聯
scroll.config(command=text.yview)
text.config(yscrollcommand=scroll.set)

str = ```致橡樹--舒婷

..........此處省略N個字...........

```

text.insert(INSERT, str)
複製程式碼

效果樣式

5. Checkbutton多選按鈕

• Checkbutton可以表示兩種狀態：On和Off，可以設定回撥函式，每當點選此按鈕時回撥函式被呼叫
• 這裡有一個示例: 選擇不同的核取方塊, 會有不同的文字顯示

def update():
    message = ``
    if tag1.get() == True:
        message += `titan 
`
    if tag2.get() == True:
        message += `jun 
`
    if tag3.get() == True:
        message += `coder 
`

    #清除text中的所有內容
    text.delete(0.0, END)
    # 插入新的文字內容
    text.insert(INSERT, message)

# 要繫結的變數
tag1 = BooleanVar()
check1 = Checkbutton(window, text = `Titan`, variable = tag1, command = update)
check1.pack()

tag2 = BooleanVar()
check2 = Checkbutton(window, text = `Juned`, variable = tag2, command = update)
check2.pack()

tag3 = BooleanVar()
check3 = Checkbutton(window, text = `Coder`, variable = tag3, command = update)
check3.pack()


text = Text(window, bg = `orange`, width = 50, height = 5)
text.pack()
複製程式碼

效果樣式

6. Radiobutton單選框

Radiobutton為單選按鈕，即在同一組內只能有一個按鈕被選中，每當選中組內的一個按鈕時，其它的按鈕自動改為非選中態，與其他控制元件不同的是：它有組的概念

def selectorAction():
    print(tag.get())

# 一組單選框要繫結同一個變數
tag = IntVar()
radio1 = Radiobutton(window, text = `one`, value = 23, variable = tag, command = selectorAction)
radio1.pack()
radio2 = Radiobutton(window, text = `two`, value = 32, variable = tag, command = selectorAction)
radio2.pack()
radio3 = Radiobutton(window, text = `ten`, value = 10, variable = tag, command = selectorAction)
radio3.pack()
複製程式碼

效果樣式

未完待續, 後期會繼續更新其他控制元件的相關介紹……….

---