本節(jié)知識(shí)大綱：

本節(jié)知識(shí)框架

Python里的圖形化界面（GUI）模塊主要有Tkinter(python自帶)、PyQt、wxPython，我們這節(jié)主要講解Tkinter組件：

一、Tkinter介紹

tkinter模塊只要用戶安裝好Python環(huán)境就可以直接使用；

1. 第一個(gè)tkinter程序

2. 設(shè)置屬性并添加控件

設(shè)置窗體標(biāo)題、指定窗體大小、添加按鈕、輸入框、標(biāo)簽并布局

import tkinter as tk  root = tk.Tk()# 為窗體設(shè)置一個(gè)標(biāo)題root.title('第一個(gè)tkinter窗體')# 指定窗體的大小，這里的乘號(hào)是小寫字母xroot.geometry('400x300')# 添加一個(gè)標(biāo)簽Label01 = Label(root,text = '第一個(gè)label標(biāo)簽')# 將標(biāo)簽布局到窗體上Label01.pack() # 添加一個(gè)按鈕,可以在創(chuàng)建按鈕的同時(shí)在句尾調(diào)用pack語句進(jìn)行布局Button01 = Button(root,text = '確定').pack()# 添加一個(gè)單行文本框Entry01 = Entry(root).pack()# 展示窗體root.mainloop()

二、控件的屬性

1. tkinter常用的控件屬性

（1）定義控件的名稱使用參數(shù)text，傳入的字符串值即為控件的名稱；

（2）定義控件高度使用參數(shù)hight，寬度使用參數(shù)width，傳入的值為整形數(shù)值；

（3）定義控件在空間中的位置，使用參數(shù)anchor，傳入的字符參數(shù)為e、s、w、n以地圖的東南西北來定義為右下左上，也可以同時(shí)設(shè)置左下sw、左上nw、右下se、右上ne；

（4）定義控件的背景色，使用參數(shù)bg，前景色使用參數(shù)fg，傳入字符值可以直接是對(duì)應(yīng)顏色的英文名稱；

（5）設(shè)置布局在pack()函數(shù)里，使用參數(shù)side，傳入的值為常量tk.LEFT或者tk.RIGHT，表示從左到右或者從右到左布局

（6）創(chuàng)建圖片控件時(shí)，圖片控件的文件源使用參數(shù)file，傳入的字符值為為文件路徑，在控件中使用圖片則使用參數(shù)image，傳入的值為圖片控件變量；

（7）設(shè)置整個(gè)窗體的尺寸，使用參數(shù)geometry，傳入的值為字符值，注意乘號(hào)用小寫字母x代替；如果要設(shè)置長(zhǎng)400寬300的窗體則使用語句geometry = '400x300'

（8）設(shè)置控件與邊界的距離在pack函數(shù)里使用參數(shù)padx，設(shè)置左右距離；使用pady設(shè)置上下距離。

2. 案例演示:畫出一個(gè)簡(jiǎn)單的窗體布局

效果演示：

簡(jiǎn)單窗體布局

3. 案例演示：畫出能計(jì)算加法的計(jì)算器界面

# 導(dǎo)包的時(shí)候使用*，創(chuàng)建控件的時(shí)候不用寫類名了from tkinter import *# 創(chuàng)建一個(gè)窗體，名稱為rootroot = Tk()# 為窗體添加標(biāo)題root.title('求兩數(shù)之和')root.geometry('700x80')photo = PhotoImage(file = '/Users/yushengtan/Desktop/calc.png')# 定義控件PhotoLabel = Label(root,image = photo).pack(side = LEFT,padx = 10,pady = 5)# 第一個(gè)數(shù)字文本框Entry01 = Entry(root,bg = 'pink',width = 10,font = ('華文黑體',20)).pack(side = LEFT,padx = 5,pady = 5)# 加號(hào)Label_plus = Label(root,text = '+',font = ('華文黑體',20)).pack(side = LEFT,padx = 5,pady = 5)# 第二個(gè)數(shù)字文本框Entry02 = Entry(root,bg = 'pink',width = 10,font = ('華文黑體',20)).pack(side = LEFT,padx = 5,pady = 5)# 等于號(hào)Label_equal = Label(root,text = '=',font = ('華文黑體',20)).pack(side = LEFT,padx = 5,pady = 5)# 第三個(gè)數(shù)字文本框Entry03 = Entry(root,bg = 'green',width = 10,font = ('華文黑體',20)).pack(side = LEFT,padx = 5,pady = 5)Button01 = Button(root,text = '計(jì)算',width = 10,height = 2,font = ('華文黑體',15)).pack(side = LEFT,padx = 10,pady = 5)# 運(yùn)行root.mainloop()

界面效果:

三、基本布局

1. place絕對(duì)布局

pack布局是按順序布局，而place布局可以直接定義絕對(duì)位置，只需要給place()函數(shù)里傳入兩個(gè)參數(shù)x和y，其值為整型數(shù)值表示相對(duì)于窗體左上角的坐標(biāo)位置；用法：place(x=10,y=20)

案例演示：

繪制一個(gè)簡(jiǎn)易的登錄界面

運(yùn)行效果：

2. grid表格布局

grid是一種網(wǎng)格布局，grid(row = 1,column = 2)，n行n列分別表示表格的行數(shù)和列數(shù)，從0開始計(jì)數(shù)；可以使用參數(shù)sticky控制控件靠近單元格的位置，字符值可以給出n、s、w、e設(shè)置上、下、左、右，我們還是以登錄窗體為例：

# grid窗體布局from tkinter import *root = Tk()root.title('用戶登錄')root.geometry('450x160')# 表格圖片photo = PhotoImage(file = '/Users/yushengtan/Desktop/login.png')img_label = Label(root,image = photo).grid(row = 0,column = 0,rowspan = 2)# 第一行 第二列Label_username = Label(root,text = '用戶名：',font = ('華文黑體',16)).grid(row = 0,column = 1)# 第一行 第三列Entry_username = Entry(root,font = ('華文黑體',16)).grid(row =0,column = 2)# 第二行 第二列Label_password = Label(root,text = '密  碼：',font = ('華文黑體',16)).grid(row = 1,column = 1)# 第二行 第三列Entry_password = Entry(root,font = ('華文黑體',16)).grid(row =1,column = 2)# 第四行 第二列Button_login = Button(root,text = '登錄',width = 8,font = ('華文黑體',16)).grid(row = 3,column = 2,sticky = 'e')# 第四行 第三列Button_cancer = Button(root,text = '取消',width = 8,font = ('華文黑體',16)).grid(row =3,column = 2,sticky = 'w')root.mainloop()

輸出效果：

注意：紅色輔助線幫助理解表格布局，實(shí)際運(yùn)行效果沒有輔助線

四、使用類封裝GUI

這里我們使用類來封裝GUI程序，以至于我們后面需要調(diào)用的時(shí)候直接實(shí)例化一個(gè)對(duì)象就可以產(chǎn)生一個(gè)窗口，類與對(duì)象的知識(shí)我們后面會(huì)深入講解，現(xiàn)在我們只需怎么使用即可；我們把前面的登錄窗口通過類來進(jìn)行封裝

五、響應(yīng)事件

以上我們實(shí)現(xiàn)了GUI界面的設(shè)計(jì)，加法計(jì)算器、登錄窗口，但是沒有程序并不能工作，如果想要程序工作起來還得給控件設(shè)置響應(yīng)事件；事件是什么呢？事件就是響應(yīng)某一個(gè)動(dòng)作，如點(diǎn)擊某一個(gè)按鈕、輸入鍵盤的某一個(gè)鍵等等。我們現(xiàn)在來完善前面設(shè)計(jì)加法計(jì)算器，讓其能真正做加法計(jì)算;

1. 完成點(diǎn)擊按鈕響應(yīng)事件的步驟

（1）完成時(shí)間的功能---函數(shù)

（2）把功能捆綁到按鈕上，添加command參數(shù)，其值為功能函數(shù)名，注意沒有小括號(hào)，這一點(diǎn)非常重要，很多時(shí)候出錯(cuò)了，都不知道錯(cuò)在哪了，就是因?yàn)椴恍⌒募恿死ㄌ?hào)！

注意：取出文本框的數(shù)值可以使用get()方法，設(shè)置文本框的數(shù)值可以使用set()方法；控件基本屬性的設(shè)定和控件的布局語句要分開；

2. 案例：實(shí)現(xiàn)兩數(shù)相加的功能

通過響應(yīng)事件完成加法計(jì)算器

# 實(shí)現(xiàn)加法計(jì)算器的的GUI界面from tkinter import *from tkinter.messagebox import  *# 寫一個(gè)類：實(shí)現(xiàn)兩數(shù)相加的頁(yè)面和功能class get_sum(object):    def __init__(self):        # 新建一個(gè)窗體        self.frame = Tk()        # 窗體添加標(biāo)題        self.frame.title('實(shí)現(xiàn)兩數(shù)相加')        self.frame.geometry('700x80')        self.photo = PhotoImage(file='/Users/yushengtan/Desktop/calc.png')        # 定義控件        self.img_Label = Label(self.frame, image=self.photo)        self.img_Label.pack(side=LEFT, padx=10, pady=5)        # 第一個(gè)數(shù)字文本框        self.num01_Entry = Entry(self.frame, bg='pink', width=10, font=('華文黑體', 20))        self.num01_Entry.pack(side=LEFT, padx=5, pady=5)        # 加號(hào)        self.Label01 = Label(self.frame, text='+', font=('華文黑體', 20))        self.Label01.pack(side=LEFT, padx=5, pady=5)        # 第二個(gè)數(shù)字文本框        self.num02_Entry = Entry(self.frame, bg='pink', width=10, font=('華文黑體', 20))        self.num02_Entry.pack(side=LEFT, padx=5, pady=5)        # 等于號(hào)        self.Label02 = Label(self.frame, text='=', font=('華文黑體', 20))        self.Label02.pack(side=LEFT, padx=5, pady=5)        # 第三個(gè)數(shù)字文本框        self.var = StringVar()        self.result_Entry = Entry(self.frame, bg='green', width=10, font=('華文黑體', 20),textvariable = self.var)        self.result_Entry.pack(side=LEFT, padx=5, pady=5)        self.cal_Button = Button(self.frame, text='計(jì)算', width=10, height=2, font=('華文黑體', 15),command = self.cal_sum)        self.cal_Button.pack(side=LEFT, padx=10, pady=5)    # 展示窗體    def run(self):        self.frame.mainloop()    # 實(shí)現(xiàn)兩數(shù)相加    def cal_sum(self):        # 先取出字符串        num01 = self.num01_Entry.get()        num02 = self.num02_Entry.get()        # 判斷        if num01.isdigit() and num02.isdigit():            self.var.set(str(int(num01) + int(num02)))        else:            showinfo('系統(tǒng)提示','輸入的值不都是數(shù)字無法計(jì)算')

運(yùn)行效果：

3. 案例：實(shí)現(xiàn)用戶登錄功能

需求：

（1）如果用戶名為admin，密碼為123.com,顯示登錄成功！

（2）如果用戶名不對(duì)，顯示用戶名不存在；

（3）如果密碼不對(duì)，顯示密碼錯(cuò)誤，如果錯(cuò)誤三次，提示：賬號(hào)已鎖定。

提示：實(shí)現(xiàn)窗體的關(guān)閉，可以使用方法self.frame.destory()關(guān)閉窗體；

演示效果：

六、GUI擴(kuò)展功能

1. ttk模塊

ttk模塊是對(duì)傳統(tǒng)tkinter模塊的增強(qiáng)，傳統(tǒng)的tkinter模塊界面比較單一，控件種類有限，界面布局邏輯性差。ttk模塊是tkinter下的一個(gè)子模塊，它的界面比tkinter更豐富更美觀。ttk的用法同tkinter大體相同，但是有一些屬性ttk不再支持，而tkinter中的fg、bg、font屬性在ttk中不再被支持，取而代之的是style對(duì)象；

2. 復(fù)選框Checkbutton

# Checkbutton控件from tkinter import *# from tkinter.ttk import *from tkinter.messagebox import *# 新建一個(gè)窗體還是需要tkinterroot = Tk()root.geometry('450x100')root.title('CheckButton控件')#Label標(biāo)簽Label01 = Label(root,text = '請(qǐng)選擇你去過的城市')Label01.grid(row = 0,column = 0,padx = 0,pady = 20)city_list = ['北京','上海','廣州','深圳','南京']# 用一組值存儲(chǔ)選中哪些is_check_list = []# 通過循環(huán)展示for city in city_list:    is_check_list.append(IntVar())    CheckButton01 = Checkbutton(root,text=city,variable = is_check_list[-1])    # 為啥是-1    CheckButton01.grid(row = 0,column = len(is_check_list),padx = 5,pady = 5)# sel函數(shù)def sel():    all_select = ''    for i in range(0,len(is_check_list)):        if is_check_list[i].get() == 1:            all_select += city_list[i] + ' '    Label_select['text'] = '所選城市為:'+all_select# 添加一個(gè)ButtonButton01 = Button(root,text = '確認(rèn)選擇',command = sel)Button01.grid(row = 1,column = 0,padx = 5,pady = 5)# 添加一個(gè)Label標(biāo)簽，用于展示顯示后的結(jié)果Label_select = Label(root,text = '')Label_select.grid(row = 1,column = 1,columnspan = 5)# 加載root.mainloop()

演示效果：

3. 單選框Radiobutton

演示效果：

4. 下拉框ComboBox

# ComboBoxfrom tkinter import *from tkinter.ttk import *# ComboBox 控件 --- 下拉框單選root = Tk()root.title('ComboBox控件')root.geometry('400x100')# 做下拉選擇的時(shí)候定義函數(shù)一定要使用可變長(zhǎng)參數(shù)def sel_gender(*args):    Label_select_gender['text'] = combo_gender.get()def sel_education(*args):    Label_select_education['text'] = combo_education.get()# 性別單選Label_gender = Label(root,text = '性別')Label_gender.grid(row = 0,column = 0,padx = 5,pady = 5)gender = StringVar()combo_gender = Combobox(root,textvariable = gender)combo_gender['values'] = ['男','女']  # 下拉列表填充combo_gender['state'] = 'readonly'  # 只允許讀，如果沒有這個(gè)參數(shù)，輸入框可以輸入值combo_gender.current(0) # 默認(rèn)情況下選擇的值的索引combo_gender.grid(row = 0 ,column = 1)# 學(xué)歷單選education_list = ['高中','?？?,'本科','碩士','博士']Label_education = Label(root,text = '學(xué)歷:')Label_education.grid(row = 1,column = 0)education = StringVar()combo_education = Combobox(root,textvariable = education,values = education_list)combo_education['state'] = 'readonly'combo_education.current(0)combo_education.grid(row = 1,column = 1)# 綁定選擇性別的事件combo_gender.bind('<<ComboboxSelected>>',sel_gender)# 綁定選擇學(xué)歷的事件combo_education.bind('<<ComboboxSelected>>',sel_education)# 獲取結(jié)果：Label01 = Label(root,text = '所選的值為:')Label01.grid(row = 2 , column = 0)Label_select_gender = Label(root,text = '')Label_select_gender.grid(row = 2,column = 1,sticky = 'e')Label_select_education = Label(root,text = '')Label_select_education.grid(row = 2,column = 2,sticky = 'w')# 窗體展示root.mainloop()

效果演示：

5. 容器LabelFrame

把具有相同功能的模塊組合在一起，并且加上一個(gè)名字，這個(gè)控件能讓你的界面更加有條理

運(yùn)行效果：

6. 樹狀視圖TreeView

# Treeview控件from tkinter import *from tkinter.ttk import *root = Tk()root.title('TreeView模塊')root.geometry('440x225')# frame容器放置表格frame01 = Frame(root)frame01.place(x = 10,y = 10,width =420,height = 220 )# 加載滾動(dòng)條scrollBar = Scrollbar(frame01)scrollBar.pack(side = RIGHT,fill = Y)# 準(zhǔn)備表格TreeViewtree = Treeview(frame01,columns = ('學(xué)號(hào)','姓名','性別','年齡','手機(jī)號(hào)'),show = 'headings',yscrollcommand = scrollBar.set)# 設(shè)置每一列的寬度和對(duì)齊方式tree.column('學(xué)號(hào)',width = 80,anchor = 'center')tree.column('姓名',width = 80,anchor = 'center')tree.column('性別',width = 60,anchor = 'center')tree.column('年齡',width = 60,anchor = 'center')tree.column('手機(jī)號(hào)',width = 120,anchor = 'center')# 設(shè)置表頭的標(biāo)題文本tree.heading('學(xué)號(hào)',text = '學(xué)號(hào)')tree.heading('姓名',text = '姓名')tree.heading('性別',text = '性別')tree.heading('年齡',text = '年齡')tree.heading('手機(jī)號(hào)',text = '手機(jī)號(hào)')# 設(shè)置關(guān)聯(lián)scrollBar.config(command = tree.yview)# 加載表格信息tree.pack()# 插入數(shù)據(jù)for i in range(10):    # i 是索引    tree.insert('',i,values=['9500'+str(i),'張三','男','23','15622338793'])# 展示root.mainloop()

運(yùn)行效果:

7. Style屬性

增強(qiáng)的ttk包里沒法用tkinter的傳統(tǒng)屬性進(jìn)行設(shè)置比如bg和fg，我們需要通過style對(duì)象來對(duì)其設(shè)置；注意：我們對(duì)實(shí)例化對(duì)象style01進(jìn)行配置,

第一個(gè)參數(shù)不是對(duì)象的名稱,而是對(duì)象的某一類，其名稱是有規(guī)定的，不是隨便取的，由于這里是對(duì)Label 的style進(jìn)行命令，所以我們只能命名成TLabel，具體的組件與名稱的對(duì)應(yīng)關(guān)系如下：

Style對(duì)象名稱

疑問：
如果此時(shí)創(chuàng)建一個(gè)Label02對(duì)象它的style屬性沒有綁定style01對(duì)象，但是它的屬性依然是style01對(duì)象里定義的特征，這是怎么回事呢？
解答：
其實(shí)只要在配置style的時(shí)候，填寫標(biāo)準(zhǔn)的Stylename，后面無論某個(gè)控件是否綁定，Stylename 對(duì)應(yīng)的控件都會(huì)生效；

from tkinter import *from tkinter.ttk import *root = Tk()root.title('style屬性')root.geometry('300x200')# 實(shí)例化一個(gè)style對(duì)象style01style01 = Style()# 對(duì)style01進(jìn)行配置,Stylename屬性設(shè)置為標(biāo)準(zhǔn)的TLablestyle01.configure('TLabel',font = ('華文黑體',18),background = 'green',foreground = 'blue')# 把Label01控件綁定給style01對(duì)象Label01 = Label(root,text = '用戶名',style = 'TLabel')Label01.pack(padx = 10,pady = 10)Label02 = Label(root,text = '密碼')Label02.pack(padx = 10,pady = 10)# 展示窗體root.mainloop()

效果演示：

拓展：如果只想對(duì)某類中的某些控件生效，那么就必須要使用custom.Stylename格式來進(jìn)行命名；如我創(chuàng)建的style01的Stylename名稱是username.TLabel，這里的username是自定義字段，那么后面的Label控件如果沒有指定style是username.TLabel就不會(huì)具有style01的屬性

這樣控件的顯示效果如下：

這樣就能使具體某一個(gè)組件生效，這樣就能做到既能控制全局保持整體的統(tǒng)一，又能對(duì)具體某一類或者某一個(gè)特別對(duì)待，這種機(jī)制就很棒！
好啦，關(guān)于Tkinter的基礎(chǔ)知識(shí)點(diǎn)就介紹到這里啦！如果覺得文章還不錯(cuò)的話，歡迎點(diǎn)贊關(guān)注，感謝你的支持^-^