《上海交通大学python程序设计课程Ch81》由会员分享，可在线阅读，更多相关《上海交通大学python程序设计课程Ch81（32页珍藏版）》请在金锄头文库上搜索。
1、图形用形用户界面界面2 2 2程序的用程序的用户界面界面程序中与用程序中与用户进行交互的部分行交互的部分用用户通通过UI向程序向程序输入数据或者入数据或者请求程序求程序执行特定任行特定任务程序通程序通过UI向用向用户显示各种信息示各种信息UI应该是是用用户友好的友好的两两类UI命令行界面命令行界面图形界面形界面(GUI)3 3GUI构件构件窗口窗口Window是容器是容器:可以容可以容纳其他构件的构件其他构件的构件程序有一个根窗口程序有一个根窗口标签Label按按钮Button菜菜单Menu框架框架Frame也是容器也是容器4 4构件之构件之间的关系的关系父子关系父子关系在一个构件内在一个构件
2、内创建另一个构件建另一个构件界面上全体构件形成一个界面上全体构件形成一个层次次结构构顶层是根窗口是根窗口父构件内安排子构件父构件内安排子构件:使用布局管理器使用布局管理器5 5事件事件驱动GUI程序的程序的执行流程取决于与用行流程取决于与用户的的实时交互交互例如例如:Word程序的程序的执行行事件事件驱动编程程普通程序的普通程序的执行行:启启动做事做事终止止事件事件驱动程序的程序的执行行:启启动事件循事件循环等待事件等待事件发生生,然后然后处理理程序的程序的终止也是由特定事件止也是由特定事件(如关如关闭窗口事件窗口事件)引引起的起的 6 6基本概念基本概念事件事件: :例如点例如点击鼠鼠标,
3、,按下按下键盘等等. .事件事件处理程序理程序: :对事件事件进行行处理的代理的代码. . 事件事件驱动编程程: :一种一种编程范型程范型程序有一个程序有一个事件循事件循环事件事件监测OS功能功能,由工具包提供支持由工具包提供支持事件事件处理理应用程序用程序员只需只需编写自己的事件写自己的事件处理程序理程序 7 7GUI编程程需要需要GUI工具包工具包将低将低层细节对程序程序员隐藏藏跨平台跨平台Python标准准库:TkinterGUI编程程设计界面外界面外观为每个构件定每个构件定义事件事件处理代理代码建立启建立启动初始化和初始化和总控部分控部分8 8 8Tkinter的常用构件的常用构件类B
4、uttonCanvasCheckbuttonEntryFrameLabelListboxMenuMessageRadiobuttonTextToplevel9 9 9最最简单的的Tkinter程序程序导入入Tkinter建立根窗口建立根窗口进入事件循入事件循环例例:eg8_1.pyfromTkinterimport*root=Tk()root.mainloop() 101010在窗口中添加构件在窗口中添加构件两步两步:创建建布局布局例例:eg8_2.pyfromTkinterimport*root=Tk()aLabel=Label(root,text=HelloWorld)aLabel.pac
5、k()root.mainloop() 111111在窗口中添加构件在窗口中添加构件构件构件对象有很多属性象有很多属性(实例例变量量):创建建时设置属性的置属性的值属性一般都有缺省属性一般都有缺省值用用命名参数命名参数方式方式设置置较方便方便:属性属性=属性属性值创建建时不不设置置,将来再将来再设置或修改置或修改利用构件利用构件类的的config方法方法:对象象.config(属性属性=属性属性值)对象象视为字典字典:对象象属性属性=属性属性值根窗口根窗口根窗口的根窗口的标题设置置root.title(MyGUI)缺省缺省值为Tk根窗口的尺寸根窗口的尺寸设置置root.geometry(400x
6、400) 缺省缺省值为200x20012构件构件间的父子关系的父子关系GUI中的所有构件按父子关系构成中的所有构件按父子关系构成树状状层次次结构构每个构件都有每个构件都有master和和children属性属性Tkinter自自动维护这两个属性的两个属性的值编程程时可利用可利用这两个属性两个属性,例如例如:aLabel.master.title(MyGUI)13界面界面设计过程程根据需要根据需要创建多个构件建多个构件,然后在窗口中然后在窗口中进行布局行布局.例例:eg8_3.pyfromTkinterimport*root=Tk()aLabel=Label(root,text=HelloWor
7、ld)aLabel.pack()aButton=Button(root,text=ClickMe)aButton.pack()root.mainloop() 14151515常用构件常用构件:标签类:Labellb = Label(窗口窗口,选项设置置)text:标签文本内容文本内容width:标签宽度度fg:前景色前景色(文本文本颜色色)例如例如aLabel=Label(root,text=HelloWorld) aLabel.pack() Label(root,text=redcolor,fg=red).pack() 注意写法注意写法:对象象创建与方法建与方法调用合二用合二为一一16161
8、6常用构件常用构件:按按钮类:Buttonbtn = Button(窗口窗口,选项设置置)text:按按钮上的文本上的文本command:点点击按按钮时要要执行的命令行的命令需要提供一个需要提供一个函数或方法名函数或方法名f注意不是函数注意不是函数调用用f()height,widthfg,bgrelief:RAISED/FLAT/SUNKEN/GROOVE/state:NORMAL/ACTIVE/DISABLED171717例例:按按钮下例中按下例中按钮对应的函数是的函数是root对象的方法象的方法quitb=Button(root,text=Quit,command=root.quit)b.
9、pack()root.mainloop()#点点击按按钮退出主循退出主循环,回到回到下例中按下例中按钮对应的函数是自定的函数是自定义函数函数defhiButton():.printhithere.Button(root,text=print,command=hiButton).pack() 常用构件常用构件:勾勾选钮类:Checkbuttoncb = Checkbutton(窗口窗口,选项设置置)textCheckbutton(root,text=Math).pack()Checkbutton(root,text=Python).pack()Checkbutton(root,text=Engl
10、ish).pack()variable:控制控制变量量,值为IntVar类的的实例例程序中可以通程序中可以通过v.get()和和v.set()来来查询或或设置勾置勾选钮的状的状态 v=IntVar()Checkbutton(root,text=Check,variable=v).pack() 18常用构件常用构件:单选钮类:Radiobuttonrb = Radiobutton(窗口窗口,选项设置置)value:每个每个单选钮对应一个一个值,用于控制用于控制变量量variable:控制控制变量量,值为IntVar类的的实例例一一组单选钮共用一个控制共用一个控制变量量v=IntVar()v.se
11、t(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常用构件常用构件:文本文本编辑区区类Entry:单行文本行文本编辑e = Entry(窗口窗口,选项设置置)textvariable:控制控制变量量,是是StringVar类的的实例例 例如例如v=StringVar()e=Entry(root,textvariable
12、=v)e.pack() printv.get()hello v.set(newtext) 20常用构件常用构件:框架框架类Frame:构件容器构件容器,用于窗口分隔用于窗口分隔f = Frame(窗口窗口,选项设置置)width,height,bd,relief框架中的子构件独立地框架中的子构件独立地进行布局行布局例如例如f=Frame(root,bd=4,relief=groove)f.pack()Checkbutton(f,text=Math).pack()Checkbutton(f,text=Python).pack()Checkbutton(f,text=English).pack()
13、 21常用构件常用构件:菜菜单类Menu创建菜建菜单构件构件与窗口关与窗口关联添加菜添加菜单项菜菜单项:简单命令命令,级联式菜式菜单,勾勾选钮,一一组单选钮 例如例如m=Menu(root)root.config(menu=m)m.add_command(label=File)m.add_command(label=Help) 22菜菜单编程例程例:eg8_4.pydefcallback():printhellofrommenuroot=Tk()m=Menu(root)root.config(menu=m)filemenu=Menu(m)m.add_cascade(label=File,men
14、u=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)helpmenu=Menu(m)m.add_cascade(label=Help,menu=helpmenu)helpmenu.add_command(label=About.,command=callback) 23常用构件常用构件:
15、顶层窗口窗口类Toplevel顶层窗口是根窗口的子构件窗口是根窗口的子构件,但有一定的独但有一定的独立性立性:可以移可以移动,改改变大小大小.根窗口只有一个根窗口只有一个,顶层窗口可有多个窗口可有多个.例如例如root=Tk()Label(root,text=hello).pack()top=Toplevel()Label(top,text=world).pack()top.title(hellotoplevel)top.geometry(400x300)24布局布局布局布局:界面元素在界面中的位置安排界面元素在界面中的位置安排.布局管理器布局管理器:程序程序员不需要了解底不需要了解底层显示示
16、系系统的的细节, 在在较高高层次上考次上考虑界面布局界面布局构件都是先构件都是先创建建,再布局再布局:w=Constructor(parent,.) w.GeometryManager(.) Tkinter提供三种布局管理器提供三种布局管理器:Pack,Grid和和Place 25Pack布局管理器布局管理器Pack以以紧凑方式将构件在窗口中凑方式将构件在窗口中“打包打包”设想窗口由想窗口由弹性材料制成性材料制成,放入构件放入构件时先把窗先把窗口空口空间撑大到足撑大到足够容容纳该构件构件,然后将构件然后将构件紧贴内部的某条内部的某条边(缺省是缺省是顶边)放入放入.缺省情形下放入同一个窗口的所有
17、构件是沿缺省情形下放入同一个窗口的所有构件是沿垂直方向自垂直方向自顶向下一个向下一个紧贴一个一个进行布置的行布置的可以通可以通过pack方法的方法的side选项设置成沿水平方向打置成沿水平方向打包包. 构件都有构件都有pack()方法方法26例例:Pack布局管理器布局管理器Label(root,text=Inputanumber:).pack()Entry(root).pack()Button(root,text=OK).pack()Label(root,text=Inputanumber:).pack(side=left)Entry(root).pack(side=left)Button(
18、root,text=OK).pack(side=left) 27Grid布局管理器布局管理器Grid将窗口或框架将窗口或框架视为由行和列构成的二由行和列构成的二维表表格格,并将构件放入行列交叉并将构件放入行列交叉处的的单元格中元格中根据构件大小自根据构件大小自动调整行列尺寸整行列尺寸:列列宽由由该列中最列中最宽构件决定构件决定,行高由行高由该行最高的构件决定行最高的构件决定.构件都有构件都有grid()方法方法选项row和和column指定行列指定行列编号号从从0开始开始编号号row的缺省的缺省值为当前下一空行当前下一空行,column的缺省的缺省值总为0选项sticky:指定构件在指定构件在
19、单元格内的元格内的对齐方式方式(方位方位)方位方位值用用+组合合,起到延伸构件尺寸以填起到延伸构件尺寸以填满单元格的作用元格的作用选项rowspan和和columnspan:占据多个占据多个单元格元格28例例:Grid布局管理器布局管理器Label(root,text=IDNumber:).grid()#0,0Label(root,text=Name:).grid()#1,0Entry(root).grid(row=0,column=1)Entry(root).grid(row=1,column=1) 29例例:Grid布局管理器布局管理器Label(root,text=IDNumber:).
20、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=RegisteredUser).grid(.columnspan=2,sticky=W)Label(root,text=X).grid(row=0,column=2,.columnspan=2,rowspan=2,sticky=W+E+N+S)Button(root,text=ZoomIn).grid(row=2,colum
21、n=2)Button(root,text=ZoomOut).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).grid(row=2,sticky=W)f2=Frame(root,width=100,height=50,bd=4,relief=groove)f2.grid(row=1,column=2,columnspan=2,sticky=N)b1=Button(root,text=OK,width=6)b1.grid(row=2,column=2,sticky=E+W,padx=2)b2=Button(root,text=Cancel,width=6)b2.grid(row=2,column=3,sticky=E+W,padx=2) 3132End
