上海交通大学 python程序设计课程 Ch8-1

图形用户界面,2,2,2,程序的用户界面,程序中与用户进行交互的部分用户通过UI向程序输入数据或者请求程序执行特定任务程序通过UI向用户显示各种信息UI应该是用户友好的两类UI命令行界面图形界面(GUI),3,3,GUI构件,窗口Window是容器:可以容纳其他构件的构件程序有一个根窗口标签Label按钮Button菜单Menu框架Frame也是容器,4,4,构件之间的关系,父子关系在一个构件内创建另一个构件界面上全体构件形成一个层次结构顶层是根窗口父构件内安排子构件:使用布局管理器,5,5,事件驱动,GUI程序的执行流程取决于与用户的实时交互例如:Word程序的执行事件驱动编程普通程序的执行:启动做事终止事件驱动程序的执行:启动事件循环等待事件发生,然后处理程序的终止也是由特定事件(如关闭窗口事件)引起的,6,6,基本概念,事件:例如点击鼠标,按下键盘等.事件处理程序:对事件进行处理的代码.事件驱动编程:一种编程范型程序有一个事件循环事件监测OS功能,由工具包提供支持事件处理应用程序员只需编写自己的事件处理程序,7,7,GUI编程,需要GUI工具包将低层细节对程序员隐藏跨平台Python标准库:TkinterGUI编程设计界面外观为每个构件定义事件处理代码建立启动初始化和总控部分,8,8,8,Tkinter的常用构件类,ButtonCanvasCheckbuttonEntryFrameLabelListboxMenuMessageRadiobuttonTextToplevel,9,9,9,最简单的Tkinter程序,导入Tkinter建立根窗口进入事件循环例:eg8_1.pyfromTkinterimport*root=Tk()root.mainloop(),10,10,10,在窗口中添加构件,两步:创建布局例:eg8_2.pyfromTkinterimport*root=Tk()aLabel=Label(root,text=HelloWorld)aLabel.pack()root.mainloop(),11,11,11,在窗口中添加构件,构件对象有很多属性(实例变量):创建时设置属性的值属性一般都有缺省值用命名参数方式设置较方便:属性=属性值创建时不设置,将来再设置或修改利用构件类的config方法:对象.config(属性=属性值)对象视为字典:对象属性=属性值,根窗口,根窗口的标题设置root.title(MyGUI)缺省值为Tk根窗口的尺寸设置root.geometry(400 x400)缺省值为200 x200,12,构件间的父子关系,GUI中的所有构件按父子关系构成树状层次结构每个构件都有master和children属性Tkinter自动维护这两个属性的值编程时可利用这两个属性,例如:aLabel.master.title(MyGUI),13,界面设计过程,根据需要创建多个构件,然后在窗口中进行布局.例:eg8_3.pyfromTkinterimport*root=Tk()aLabel=Label(root,text=HelloWorld)aLabel.pack()aButton=Button(root,text=ClickMe)aButton.pack()root.mainloop(),14,15,15,15,常用构件:标签,类:Labellb=Label(窗口,选项设置)text:标签文本内容width:标签宽度fg:前景色(文本颜色)例如aLabel=Label(root,text=HelloWorld)aLabel.pack()Label(root,text=redcolor,fg=red).pack()注意写法:对象创建与方法调用合二为一,16,16,16,常用构件:按钮,类:Buttonbtn=Button(窗口,选项设置)text:按钮上的文本command:点击按钮时要执行的命令需要提供一个函数或方法名f注意不是函数调用f()height,widthfg,bgrelief:RAISED/FLAT/SUNKEN/GROOVE/state:NORMAL/ACTIVE/DISABLED,17,17,17,例:按钮,下例中按钮对应的函数是root对象的方法quitb=Button(root,text=Quit,command=root.quit)b.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=English).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.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,常用构件:文本编辑区,类Entry:单行文本编辑e=Entry(窗口,选项设置)textvariable:控制变量,是StringVar类的实例例如v=StringVar()e=Entry(root,textvariable=v)e.pack()printv.get()hellov.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(),21,常用构件:菜单,类Menu创建菜单构件与窗口关联添加菜单项菜单项:简单命令,级联式菜单,勾选钮,一组单选钮例如m=Menu(root)root.config(menu=m)m.add_command(label=File)m.add_command(label=Help),22,菜单编程例:eg8_4.py,defcallback():printhellofrommenuroot=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)helpmenu=Menu(m)m.add_cascade(label=Help,menu=helpmenu)helpmenu.add_command(label=About.,command=callback),23,常用构件:顶层窗口,类Toplevel顶层窗口是根窗口的子构件,但有一定的独立性:可以移动,改变大小.根窗口只有一个,顶层窗口可有多个.例如root=Tk()Label(root,text=hello).pack()top=Toplevel()Label(top,text=world).pack()top.title(hellotoplevel)top.geometry(400 x300),24,布局,布局:界面元素在界面中的位置安排.布局管理器:程序员不需要了解底层显示系统的细节,在较高层次上考虑界面布局构件都是先创建,再布局:w=Constructor(parent,.)w.GeometryManager(.)Tkinter提供三种布局管理器:Pack,Grid和Place,25,Pack布局管理器,Pack以紧凑方式将构件在窗口中“打包”设想窗口由弹性材料制成,放入构件时先把窗口空间撑大到足够容纳该构件,然后将构件紧贴内部的某条边(缺省是顶边)放入.缺省情形下放入同一个窗口的所有构件是沿垂直方向自顶向下一个紧贴一个进行布置的可以通过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(root,text=OK).pack(side=left),27,Grid布局管理器,Grid将窗口或框架视为由行和列构成的二维表格,并将构件放入行列交叉处的单元格中根据构件大小自动调整行列尺寸:列宽由该列中最宽构件决定,行高由该行最高的构件决定.构件都有grid()方法选项row和column指定行列编号从0开始编号row的缺省值为当前下一空行,column的缺省值总为0选项sticky:指定构件在单元格内的对齐方式(方位)方位值用+组合,起到延伸构件尺寸以填满单元格的作用选项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:).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,column=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(r