上海交通大學(xué) python程序設(shè)計(jì)課程PPT Ch8-1

1、圖形用戶界面,2,2,2,程序的用戶界面,程序中與用戶進(jìn)行交互的部分 用戶通過(guò)UI向程序輸入數(shù)據(jù)或者請(qǐng)求程序執(zhí)行特定任務(wù) 程序通過(guò)UI向用戶顯示各種信息 UI應(yīng)該是用戶友好的 兩類UI 命令行界面 圖形界面(GUI),3,3,GUI構(gòu)件,窗口Window 是容器:可以容納其他構(gòu)件的構(gòu)件 程序有一個(gè)根窗口 標(biāo)簽Label 按鈕Button 菜單Menu 框架Frame 也是容器,4,4,構(gòu)件之間的關(guān)系,父子關(guān)系 在一個(gè)構(gòu)件內(nèi)創(chuàng)建另一個(gè)構(gòu)件 界面上全體構(gòu)件形成一個(gè)層次結(jié)構(gòu) 頂層是根窗口 父構(gòu)件內(nèi)安排子構(gòu)件:使用布局管理器,5,5,事件驅(qū)動(dòng),GUI程序的執(zhí)行流程取決于與用戶的實(shí)時(shí)交互 例如:Word

2、程序的執(zhí)行 事件驅(qū)動(dòng)編程 普通程序的執(zhí)行:啟動(dòng)做事終止 事件驅(qū)動(dòng)程序的執(zhí)行:啟動(dòng)事件循環(huán) 等待事件發(fā)生,然后處理 程序的終止也是由特定事件(如關(guān)閉窗口事件)引起的,6,6,基本概念,事件:例如點(diǎn)擊鼠標(biāo),按下鍵盤等. 事件處理程序:對(duì)事件進(jìn)行處理的代碼. 事件驅(qū)動(dòng)編程:一種編程范型 程序有一個(gè)事件循環(huán) 事件監(jiān)測(cè) OS功能,由工具包提供支持 事件處理 應(yīng)用程序員只需編寫自己的事件處理程序,7,7,GUI編程,需要GUI工具包 將低層細(xì)節(jié)對(duì)程序員隱藏 跨平臺(tái) Python標(biāo)準(zhǔn)庫(kù):Tkinter GUI編程 設(shè)計(jì)界面外觀 為每個(gè)構(gòu)件定義事件處理代碼 建立啟動(dòng)初始化和總控部分,8,8,8,Tkinter

3、的常用構(gòu)件類,Button Canvas Checkbutton Entry Frame Label Listbox Menu Message Radiobutton Text Toplevel,9,9,9,最簡(jiǎn)單的Tkinter程序,導(dǎo)入Tkinter 建立根窗口 進(jìn)入事件循環(huán) 例:eg8_1.py from Tkinter import * root = Tk() root.mainloop(),10,10,10,在窗口中添加構(gòu)件,兩步: 創(chuàng)建 布局 例:eg8_2.py from Tkinter import * root = Tk() aLabel = Label(root,text=

4、Hello World) aLabel.pack() root.mainloop(),11,11,11,在窗口中添加構(gòu)件,構(gòu)件對(duì)象有很多屬性(實(shí)例變量): 創(chuàng)建時(shí)設(shè)置屬性的值 屬性一般都有缺省值 用命名參數(shù)方式設(shè)置較方便:屬性=屬性值 創(chuàng)建時(shí)不設(shè)置,將來(lái)再設(shè)置或修改 利用構(gòu)件類的config方法: 對(duì)象.config(屬性=屬性值) 對(duì)象視為字典: 對(duì)象屬性=屬性值,根窗口,根窗口的標(biāo)題設(shè)置 root.title(My GUI) 缺省值為Tk 根窗口的尺寸設(shè)置 root.geometry(400 x400) 缺省值為200 x200,12,構(gòu)件間的父子關(guān)系,GUI中的所有構(gòu)件按父子關(guān)系構(gòu)成樹狀

5、層次結(jié)構(gòu) 每個(gè)構(gòu)件都有master和children屬性 Tkinter自動(dòng)維護(hù)這兩個(gè)屬性的值 編程時(shí)可利用這兩個(gè)屬性,例如: aLabel.master.title(My GUI),13,界面設(shè)計(jì)過(guò)程,根據(jù)需要?jiǎng)?chuàng)建多個(gè)構(gòu)件,然后在窗口中進(jìn)行布局. 例:eg8_3.py from Tkinter import * root = Tk() aLabel = Label(root,text=Hello World) aLabel.pack() aButton = Button(root,text=Click Me) aButton.pack() root.mainloop(),14,15,15,1

6、5,常用構(gòu)件:標(biāo)簽,類:Label lb = Label(窗口,選項(xiàng)設(shè)置) text:標(biāo)簽文本內(nèi)容 width:標(biāo)簽寬度 fg:前景色(文本顏色) 例如 aLabel = Label(root,text=Hello World) aLabel.pack() Label(root,text=red color,fg=red).pack() 注意寫法:對(duì)象創(chuàng)建與方法調(diào)用合二為一,16,16,16,常用構(gòu)件:按鈕,類:Button btn = Button(窗口,選項(xiàng)設(shè)置) text:按鈕上的文本 command:點(diǎn)擊按鈕時(shí)要執(zhí)行的命令 需要提供一個(gè)函數(shù)或方法名f 注意不是函數(shù)調(diào)用f() heigh

7、t,width fg,bg relief:RAISED/FLAT/SUNKEN/GROOVE/ state:NORMAL/ACTIVE/DISABLED,17,17,17,例:按鈕,下例中按鈕對(duì)應(yīng)的函數(shù)是root對(duì)象的方法quit b=Button(root,text=Quit,command=root.quit) b.pack() root.mainloop() # 點(diǎn)擊按鈕退出主循環(huán),回到 下例中按鈕對(duì)應(yīng)的函數(shù)是自定義函數(shù) def hiButton(): . print hi there . Button(root,text=print,command=hiButton).pack(),常

8、用構(gòu)件:勾選鈕,類:Checkbutton cb = Checkbutton(窗口,選項(xiàng)設(shè)置) text Checkbutton(root,text=Math).pack() Checkbutton(root,text=Python).pack() Checkbutton(root,text=English).pack() variable:控制變量,值為IntVar類的實(shí)例 程序中可以通過(guò)v.get()和v.set()來(lái)查詢或設(shè)置勾選鈕的狀態(tài) v = IntVar() Checkbutton(root,text=Check,variable=v).pack(),18,常用構(gòu)件:單選鈕,類:R

9、adiobutton rb = Radiobutton(窗口,選項(xiàng)設(shè)置) value:每個(gè)單選鈕對(duì)應(yīng)一個(gè)值,用于控制變量 variable:控制變量,值為IntVar類的實(shí)例 一組單選鈕共用一個(gè)控制變量 v = IntVar() v.set(1) Radiobutton(root,text=One,variable=v,value=1).pack() Radiobutton(root,text=Two,variable=v,value=2).pack() Radiobutton(root,text=Three,variable=v,value=3).pack(),19,常用構(gòu)件:文本編輯區(qū),類

10、Entry:單行文本編輯 e = Entry(窗口,選項(xiàng)設(shè)置) textvariable:控制變量,是StringVar類的實(shí)例 例如 v = StringVar() e = Entry(root,textvariable = v) e.pack() print v.get() hello v.set(new text),20,常用構(gòu)件:框架,類Frame:構(gòu)件容器,用于窗口分隔 f = Frame(窗口,選項(xiàng)設(shè)置) width,height,bd,relief 框架中的子構(gòu)件獨(dú)立地進(jìn)行布局 例如 f = Frame(root,bd=4,relief=groove) f.pack() Chec

11、kbutton(f,text=Math).pack() Checkbutton(f,text=Python).pack() Checkbutton(f,text=English).pack(),21,常用構(gòu)件:菜單,類Menu 創(chuàng)建菜單構(gòu)件 與窗口關(guān)聯(lián) 添加菜單項(xiàng) 菜單項(xiàng):簡(jiǎn)單命令,級(jí)聯(lián)式菜單,勾選鈕,一組單選鈕 例如 m = Menu(root) root.config(menu = m) m.add_command(label=File) m.add_command(label=Help),22,菜單編程例:eg8_4.py,def callback(): print hello from

12、 menu root = Tk() m = Menu(root) root.config(menu = m) filemenu = Menu(m) m.add_cascade(label=File, menu=filemenu) filemenu.add_command(label=New, command=callback) filemenu.add_command(label=Open., command=callback) filemenu.add_separator() filemenu.add_command(label=Exit, command=callback) helpmen

13、u = Menu(m) m.add_cascade(label=Help, menu=helpmenu) helpmenu.add_command(label=About., command=callback),23,常用構(gòu)件:頂層窗口,類Toplevel 頂層窗口是根窗口的子構(gòu)件,但有一定的獨(dú)立性:可以移動(dòng),改變大小. 根窗口只有一個(gè),頂層窗口可有多個(gè). 例如 root = Tk() Label(root,text=hello).pack() top = Toplevel() Label(top,text=world).pack() top.title(hello toplevel) top

14、.geometry(400 x300),24,布局,布局:界面元素在界面中的位置安排. 布局管理器:程序員不需要了解底層顯示系統(tǒng)的細(xì)節(jié), 在較高層次上考慮界面布局 構(gòu)件都是先創(chuàng)建,再布局: w = Constructor(parent,.) w.GeometryManager(.) Tkinter提供三種布局管理器:Pack,Grid和Place,25,Pack布局管理器,Pack以緊湊方式將構(gòu)件在窗口中“打包” 設(shè)想窗口由彈性材料制成,放入構(gòu)件時(shí)先把窗口空間撐大到足夠容納該構(gòu)件,然后將構(gòu)件緊貼內(nèi)部的某條邊(缺省是頂邊)放入. 缺省情形下放入同一個(gè)窗口的所有構(gòu)件是沿垂直方向自頂向下一個(gè)緊貼一個(gè)

15、進(jìn)行布置的 可以通過(guò)pack方法的side選項(xiàng)設(shè)置成沿水平方向打包. 構(gòu)件都有pack()方法,26,例:Pack布局管理器, Label(root,text=Input a number:).pack() Entry(root).pack() Button(root,text=OK).pack() Label(root,text=Input a number:).pack(side=left) Entry(root).pack(side=left) Button(root,text=OK).pack(side=left),27,Grid布局管理器,Grid將窗口或框架視為由行和列構(gòu)成的二維表

16、格,并將構(gòu)件放入行列交叉處的單元格中 根據(jù)構(gòu)件大小自動(dòng)調(diào)整行列尺寸:列寬由該列中最寬構(gòu)件決定,行高由該行最高的構(gòu)件決定. 構(gòu)件都有g(shù)rid()方法 選項(xiàng)row和column指定行列編號(hào) 從0開始編號(hào) row的缺省值為當(dāng)前下一空行,column的缺省值總為0 選項(xiàng)sticky:指定構(gòu)件在單元格內(nèi)的對(duì)齊方式(方位) 方位值用+組合,起到延伸構(gòu)件尺寸以填滿單元格的作用 選項(xiàng)rowspan和columnspan:占據(jù)多個(gè)單元格,28,例:Grid布局管理器, Label(root,text=ID Number:).grid() # 0,0 Label(root,text=Name:).grid() #

17、 1,0 Entry(root).grid(row=0,column=1) Entry(root).grid(row=1,column=1),29,例:Grid布局管理器, Label(root,text=ID Number:).grid(sticky=E) Label(root,text=Name:).grid(sticky=E) Entry(root).grid(row=0,column=1) Entry(root).grid(row=1,column=1) Checkbutton(root,text=Registered User).grid( . columnspan=2,sticky

18、=W) Label(root,text=X).grid(row=0,column=2, . columnspan=2,rowspan=2,sticky=W+E+N+S) Button(root,text=Zoom In).grid(row=2,column=2) Button(root,text=Zoom Out).grid(row=2,column=3),30,例:Grid布局管理器, f1 = Frame(root,width=100,height=100,bd=4,relief=groove) f1.grid(row=1,column=1,rowspan=2,sticky=N+S+W+E) Checkbutton(f1,text=PC).grid(row=1,sticky=W) Checkbutton(f1,text=Laptop).g