《上海交通大学 python程序设计课程PPT Ch8-1》由会员分享，可在线阅读，更多相关《上海交通大学 python程序设计课程PPT Ch8-1（32页珍藏版）》请在金锄头文库上搜索。
1、图形用户界面 2 2 2 程序的用户界面 程序中与用户进行交互的部分用户通过UI向程序输入数据或者请求程序执行特定任务程序通过UI向用户显示各种信息UI应该是用户友好的两类UI命令行界面图形界面 GUI 3 3 GUI构件 窗口Window是容器 可以容纳其他构件的构件程序有一个根窗口标签Label按钮Button菜单Menu框架Frame也是容器 4 4 构件之间的关系 父子关系在一个构件内创建另一个构件界面上全体构件形成一个层次结构顶层是根窗口父构件内安排子构件 使用布局管理器 5 5 事件驱动 GUI程序的执行流程取决于与用户的实时交互例如 Word程序的执行事件驱动编程普通程序的执行
2、启动 做事 终止事件驱动程序的执行 启动 事件循环等待事件发生 然后处理程序的终止也是由特定事件 如关闭窗口事件 引起的 6 6 基本概念 事件 例如点击鼠标 按下键盘等 事件处理程序 对事件进行处理的代码 事件驱动编程 一种编程范型程序有一个事件循环事件监测OS功能 由工具包提供支持事件处理应用程序员只需编写自己的事件处理程序 7 7 GUI编程 需要GUI工具包将低层细节对程序员隐藏跨平台Python标准库 TkinterGUI编程设计界面外观为每个构件定义事件处理代码建立启动初始化和总控部分 8 8 8 Tkinter的常用构件类 ButtonCanvasCheckbuttonEntry
3、FrameLabelListboxMenuMessageRadiobuttonTextToplevel 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 在窗口中添加构件 构件对象有很多属性 实例变量 创建时设
4、置属性的值属性一般都有缺省值用 命名参数 方式设置较方便 属性 属性值创建时不设置 将来再设置或修改利用构件类的config方法 对象 config 属性 属性值 对象视为字典 对象 属性 属性值 根窗口 根窗口的标题设置root title MyGUI 缺省值为 Tk 根窗口的尺寸设置root geometry 400 x400 缺省值为200 x200 12 构件间的父子关系 GUI中的所有构件按父子关系构成树状层次结构每个构件都有master和children属性Tkinter自动维护这两个属性的值编程时可利用这两个属性 例如 aLabel master title MyGUI 13 界
5、面设计过程 根据需要创建多个构件 然后在窗口中进行布局 例 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 Labe
6、l 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对象的方法quit b Button root text Quit command r
7、oot quit b pack root mainloop 点击按钮退出主循环 回到 下例中按钮对应的函数是自定义函数 defhiButton print hithere Button root text print command hiButton pack 常用构件 勾选钮 类 Checkbuttoncb Checkbutton 窗口 选项设置 text Checkbutton root text Math pack Checkbutton root text Python pack Checkbutton root text English pack variable 控制变量 值为In
8、tVar类的实例程序中可以通过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 va
9、riable 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 hello v set newtext 20 常用构件 框架 类Frame 构件容器 用于窗口分隔f Frame 窗口 选项设置 width height bd relief框架中
10、的子构件独立地进行布局例如 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
11、py defcallback print hellofrommenu 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 he
12、lpmenu 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
13、布局 布局 界面元素在界面中的位置安排 布局管理器 程序员不需要了解底层显示系统的细节 在较高层次上考虑界面布局构件都是先创建 再布局 w Constructor parent w GeometryManager Tkinter提供三种布局管理器 Pack Grid和Place 25 Pack布局管理器 Pack以紧凑方式将构件在窗口中 打包 设想窗口由弹性材料制成 放入构件时先把窗口空间撑大到足够容纳该构件 然后将构件紧贴内部的某条边 缺省是顶边 放入 缺省情形下放入同一个窗口的所有构件是沿垂直方向自顶向下一个紧贴一个进行布置的可以通过pack方法的side选项设置成沿水平方向打包 构件都有
14、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将窗口或框架视为由行和列构成的二维表格 并将构件放入行列交叉处的单元格中根据构件大小自动调整行列尺寸 列宽由该列中最宽构件决定 行高由该行最高的构件决定 构件都
15、有grid 方法选项row和column指定行列编号从0开始编号row的缺省值为当前下一空行 column的缺省值总为0选项sticky 指定构件在单元格内的对齐方式 方位 方位值用 组合 起到延伸构件尺寸以填满单元格的作用选项rowspan和columnspan 占据多个单元格 28 例 Grid布局管理器 Label root text IDNumber grid 0 0 Label root text Name grid 1 0 Entry root grid row 0 column 1 Entry root grid row 1 column 1 29 例 Grid布局管理器 Lab
16、el 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 P
