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