《大数据的Python基础》课件-第10章 GUI编程

第10章GUI编程学习目标了解GUI程序的基本框架掌握事件的捕获与绑定

熟悉窗口布局22025/3/610.1GUI程序的基本框架GUI程序设计的核心是窗口，以窗口为依托，构建起各类控件和菜单，同时设置起各类点击和控制事件，从而实现图像化的用户界面效果。要运用wxPython创建窗口程序，首先要为Python安装wxPython软件包。32025/3/6【例10-1】简单的HelloWorld窗口程序42025/3/6importwxapp=wx.App()frame=wx.Frame(None,-1,"helloworld")frame.Show(True)app.MainLoop()创建GUI窗口10.1.1创建GUI窗口建立窗口的框架类，即窗体，主要是实例化wx.Frame。建立主程序，主程序是应用程序处理的基础，是窗口程序与操作系统互通以及进行消息循环处理各类事件的依托。52025/3/610.1.2窗体设计创建GUI程序框架时，需要继承wx.Frame派生出子类在派生类中调用基类构造函数进行必要的初始化，其构造函数格式为：__init__(self,parent,id=-1,title='',pos=DefaultPositon,size=wx.DefaultSize,style=DEFAULT_FRAME_STYLE,name)62025/3/610.1.2窗体设计72025/3/6参数说明parent框架的父窗体。该值为None时表示创建顶级窗体id新窗体的wxPythonID号。可以明确地传递一个唯一的ID，也可传递-1，这时wxPython将自动生成一个新的ID，由系统来保证其唯一性title窗体的标题poswx.Point，用来指定这个新窗体的左上角在屏幕中的位置。通常（0,0）是显示器的左上角坐标。当将其设定为wx.DefaultPosition，其值为（-1,-1），表示让系统决定窗体的位置size指定新窗体的初始大小style指定窗体的类型的常量name框架的名字，指定后可以使用这个名字来寻找这个窗体10.1.2窗体设计窗体控件可以使用多个样式，使用或运算符（|）连接即可。例如：wx.DEFAULT_FRAME_STYLE样式就是由以下几个基本样式的组合：wx.MAXIMIZE_BOX|wx.MINIMIZE_BOX|wx.RESIZE_BORDER|wx.SYSTEM_MENU|wx.CAPTION|wx.CLOSE_BOX：82025/3/610.1.2窗体设计92025/3/6样式说明wx.CAPTION增加标题栏wx.DEFAULT_FRAME_STYLE默认样式wx.CLOSE_BOX标题栏上显示“关闭”按钮wx.MAXIMIZE_BOX标题栏上显示“最大化”按钮wx.MINIMIZE_BOX标题栏上显示“最小化”按钮wx.RESIZE_BORDER边框可改变尺寸wx.SIMPLE_BORDER边框没有装饰wx.SYSTEM_MENU增加系统菜单（有“关闭”、“移动”、“改变尺寸”等功能）wx.FRAME_SHAPED用该样式创建的框架可用SetShape()方法来创建一个非矩形的窗体wx.FRAME_TOOL_WINDOW给框架一个比正常小的标题栏，使框架看起来像一个工具框窗体【例10-2】自定义的窗体102025/3/6classmainFrame(wx.Frame):def__init__(self):wx.Frame.__init__(self,None,-1,u'自定义窗体',style=wx.DEFAULT_FRAME_STYLE^wx.RESIZE_BORDER)

self.SetBackgroundColour(wx.Colour(224,224,224))self.SetSize((800,600))self.Center()icon=wx.Icon('icon.ico',wx.BITMAP_TYPE_ICO)self.SetIcon(icon)#以下可以添加各类控件passprint('mainFramecreated')if__name__=="__main__":app=wx.App(redirect=True,filename="debug.txt")print('appcreated')frame=mainFrame()frame.Show()print('frameshown')app.MainLoop()【例10-2】自定义的窗体112025/3/610.2事件与事件驱动wxPython中GUI的开发采用的是事件驱动的程序设计机制。

GUI编程过程中的事件可以分为四类，这些事件对应wx.Event的不同子类：指令事件（对应wx.CommandEvent子类）鼠标事件（对应wx.MouseEvent子类）键盘事件（对应wx.KyeEvent子类）系统事件（对应wx.CloseEvent、wx.SizeEvent、wx.PaintEvent等子类）122025/3/610.2.1事件及其分类132025/3/6事件说明wx.EVT_SIZE由于用户干预或由程序实现，当一个窗口大小发生改变时发送给窗口wx.EVT_MOVE由于用户干预或由程序实现，当一个窗口被移动时发送给窗口wx.EVT_CLOSE当一个框架被要求关闭时发送给框架wx.EVT_PAINT无论何时当窗口的一部分需要重绘时发送给窗口wx.EVT_CHAR当窗口拥有输入焦点时，每产生非修改性（Shift键等等）按键时发送wx.EVT_IDLE这个事件会当系统没有处理其它事件时定期的发送wx.EVT_LEFT_DOWN鼠标左键按下wx.EVT_LEFT_UP鼠标左键抬起wx.EVT_LEFT_DCLICK鼠标左键双击wx.EVT_MOTION鼠标在移动wx.EVT_SCROLL滚动条操作wx.EVT_BUTTON按钮被点击wx.EVT_MENU菜单被选中10.2.2窗体的基本元素142025/3/6文字StaticTextButtonTextCtrl用于响应用户的单击操作，是最为常见的控制组件。用来显示文本或给用户提示操作，不用来响应用户单击或双击事件。用来接收用户的文本输入，可以使用GetValue（）方法获取文本框中输入的内容。10.2.3事件的捕获与绑定

事件处理是wxPython程序工作的基本机制。对于程序运行期间的各类状态变化，经常会用相应的事件来描述。152025/3/6文字Bind(event,handler,source=None,id=wx.ID_ANY,id2=wx.ID_ANY)事件处理的根本在于事件捕获。要实现事件的捕获，为其建立一个绑定的事件处理函数是一个简单而方便的方法。用于绑定的方法如下：【例10-3】窗体事件的绑定162025/3/6importwxclassmainFrame(wx.Frame):def__init__(self):wx.Frame.__init__(self,None,-1,u'绑定事件的窗体',style=wx.DEFAULT_FRAME_STYLE^wx.RESIZE_BORDER) self.SetBackgroundColour(wx.Colour(224,224,224))

self.SetSize((800,600))

self.Center()icon=wx.Icon('icon.ico',wx.BITMAP_TYPE_ICO)self.SetIcon(icon)panel=wx.Panel(parent=self)panel.SetBackgroundColour('Yellow')#系统事件self.Bind(wx.EVT_CLOSE,self.OnClose)【例10-3】窗体事件的绑定172025/3/6defOnClose(self,event):dlg=wx.MessageDialog(None,u'确定要关闭本窗口？',u'操作提示',wx.YES_NO|wx.ICON_QUESTION)if(dlg.ShowModal()==wx.ID_YES):self.Destroy()

if__name__=="__main__":app=wx.App()frame=mainFrame()frame.Show()app.MainLoop()【例10-3】窗体事件的绑定182025/3/610.2.3事件的捕获与绑定在本例中使用了消息对话框，可以方便GUI与用户的交互，使得用户可以在图形界面中进行一些简单的选择类操作。消息对话框的具体用法如下：wxMessageDialog(parent,message,caption,style=wxOK|wxCANCEL,pos=wxDefaultPosition)192025/3/610.2.3事件的捕获与绑定202025/3/6样式说明wx.OK显示OK按钮wx.CANCEL显示Cancel按钮wx.YES_NO显示Yes和No按钮wx.YES_DEFAULTYes和No按钮，以Yes为缺省wx.NO_DEFAULTYes和No按钮，以No为缺省wx.ICON_EXCLAMATION显示警告图标wx.ICON_ERROR显示错误图标wx.ICON_QUESTION显示问号图标wx.ICON_INFORMATION显示信息图标wx.STAY_ON_TOP让消息框在所有窗口之前10.2.4事件驱动编程事件处理流程212025/3/610.2.4事件驱动编程

事件绑定行为归属的对象容器与控件的关联捆绑，事件绑定于容器，关联于控件。控件捆绑，事件只能绑定于控件。容器捆绑，事件只绑定与容器。222025/3/610.2.4事件驱动编程事件驱动的GUI设计容器与控件的关联捆绑，事件绑定于容器，关联于控件。确定事件及其归属的类或对象，根据事件类别确定其是否要关联与某个控件；设计应用处理逻辑，采用事件处理函数或方法完成各类处理逻辑的编写；进行事件的绑定和关联；完成程序的调试和运行。232025/3/610.3窗口布局用户界面设计本身的主线是做好窗口布局设计

良好的窗口布局是进行各类窗体容器布置和控件安排的基础242025/3/610.3.1静态布局在wxPython中，静态布局又称绝对位置布局。窗口中的每个控件的位置需要在程序中指出其绝对位置，通常以像素为单位。然而在实际应用中，静态布局存在以下问题：开发投入大，难以找到准确的位置信息；窗口大小改变以后，以往设置的合理位置可能会变得不合理；跨平台的兼容性较差；修改和重新布局工作繁琐费时。252025/3/610.3.2线性布局

布局管理是GUI程序开发中事件处理之外的另一个重要方面。建立布局的方法如下：sizer=wx.BoxSizer(orient)sizer.Add(window,proportion=0,flag=0,border=0,userData=None)或sizer.Add(sizer,flags)或sizer.Add(width,height,flags)容器.SetSizer(sizer)其中方向参数orient为wx.HORIZONTAL或wx.VERTICAL。Add()方法有三种形式，第一种用来添加控件或容器，第二种用来添加其它布局，第三种用来添加一段空白间隙。262025/3/610.3.2线性布局272025/3/6标记值说明wx.TOP用于表示border属于哪个方向的边界，其中wx.ALL表示上下左右四个方向wx.BOTTOMwx.LEFTwx.RIGHTwx.ALLwx.EXPAND当前组件会扩展以填满布局wx.SHAPED当前组件会扩展以填满布局但会保持之前的形状wx.ALIGN_CENTER表示组件的对齐方式wx.ALIGN_LEFTwx.ALIGN_RIGHTwx.ALIGN_TOPwx.ALIGN_BOTTOM10.3.2线性布局

一般在每个子布局之间，都根据情况安插一段适当大小的空白间隙，整体上看起来才会更加美观。282025/3/610.3.3网格布局

网格布局（GridSizer）使用了二维网格进行组件的安插，一般是从左到右和从上到下的顺序。

GridSizer对象有四个参数：wx.GridSizer(rows,columns,vgap,hgap)如gs=wx.GridSizer(4,4,5,5)表示4×4的网格，水平和垂直网格的间距都是5个像素。292025/3/6【例10-7】采用网格布局的数字按钮面板302025/3/6importwxclassmainFrame(wx.Frame):def__init__(self,parent,title):super(mainFrame,self).__init__(parent,title=title,size=(300,200))self.InitUI()self.Centre()self.Show()defInitUI(self):p=wx.Panel(self)gs=wx.GridSizer(4,4,5,5)foriinrange(1,17):btn=str(i)gs.Add(wx.Button(p,label=btn),0,wx.EXPAND)p.SetSizer(gs)

if__name__=='__main__':app=wx.App()mainFrame(None,title="网格数字按钮")app.MainLoop()【例10-7】采用网格布局的数字按钮面板312025/3/610.3.4灵活网络布局

灵活网格布局（FlexGridSizer）是网格布局（GridSizer）的增强版本，它允许每行和每列拥有单独的尺寸，当布局发生变化时，允许指定特定的行或列以一定比例跟随布局的变化而进行缩放。灵活网格布局的构造方法如下：wx.FlexGridSizer(introws=1,intcols=0,intvgap=0,inthgap=0322025/3/610.3.4灵活网络布局332025/3/610.3.4灵活网络布局差别是因为员工信息录入窗口进行了如下设计：342025/3/6

fgs=wx.FlexGridSizer(6,2,10,10)

fgs.AddMany([(title),(tc1,1,wx.EXPAND),(author),(tc2,1,wx.EXPAND),

(education),(cb,1,wx.EXPAND),(department),(lb1,1,wx.EXPAND),

(hobbies),(lb2,1,wx.EXPAND),(review),(tc3,1,wx.EXPAND)])

fgs.AddGrowableRow(5,1)

fgs.AddGrowableCol(1,1)可见该窗体有6行2列共12个网格，窗体通过AddMany()方法相当于多次调用Add()方法，其中12个元组对应了12个网格。10.3.4灵活网络布局组合框（ComboBox）组合框用来实现从固定的多个选项中选择一个的控件，单击下拉箭头时可以弹出所有选项。组合框的构造方法如下：352025/3/6wx.ComboBox(parent,id=ID_ANY,value="",pos=DefaultPosition,size=DefaultSize,choices=[],style=0,validator=DefaultValidator,name=ComboBoxNameStr)10.3.4灵活网络布局choices列表为组合框的元素列表value为组合框的初始设定值样式style的取值为普通的下拉框wx.CB_DROPDOWN、只读下拉框wx.CB_READONLY和排序的下拉框wx.CB_SORT。组合框对象关联的事件为wx.EVT_COMBOBOX，可以用来设置选取事件，完成选择后可以从事件的GetString()方法获得选项的文本，从GetSelection()方法获得选项的索引值。362025/3/610.3.4灵活网络布局列表框（ListBox）列表框用来放置多个让用户进行选择的元素，允许用户进行单选或者多选。列表框的构造方法如下：具将列表框设置为单选列表，使用wx.LB_SINGLE的样式参数，wx.LB_MULTIPLE和wx.LB_EXTENDED都可以表示多选，如果需要多个特征组合使用，可以利用或“|”符号。372025/3/6wx.ComboBox(parent,id=ID_ANY,value="",pos=DefaultPosition,size=DefaultSize,choices=[],style=0,validator=DefaultValidator,name=ComboBoxNameStr)10.3.4灵活网络布局382025/3/6样式说明wx.LB_SINGLE设置为单选wx.LB_MULTIPLE多选列表wx.LB_EXTENDED可以使用SHIFT或CTRL键与鼠标配合选择多个元素wx.LB_HSCROLL如果内容太宽，可创建水平滚动条wx.LB_ALWAYS_SB始终显示垂直滚动条wx.LB_NEEDED_SB仅在需要时才创建垂直滚动条wx.LB_SORT列表框内容按字母顺序排序10.3.4灵活网络布局392025/3/6样式说明FindString(string,caseSensitive=False)搜索指定元素的索引，若没找到返回wx.NOT_FOUNDGetCount()返回列表框中元素的个数GetSelection()返回当前选项的索引，仅对单选列表有效GetSelections()返回所有已选条目索引的列表GetString(index)返回指定索引的元素文本IsSelected(index)返回指定索引的元素的选择状态Deselect(index)用于多项列表，取消索引位置条目的选中状态SetSelection(index)设置指定索引元素的选择状态SetString(index,string)设置指定索引的元素文本【例10-8】采用灵活网格布局的员工信息窗口设计402025/3/6importwxclassmainFrame(wx.Frame):def__init__(self,parent,title):super(mainFrame,self).__init__(parent,title=title,size=(500,540))self.InitUI()self.Centre()self.Show()

defInitUI(self):panel=wx.Panel(self)hbox=wx.BoxSizer(wx.HORIZONTAL) fgs=wx.FlexGridSizer(6,2,10,10)

title=wx.StaticText(panel,label="姓名")author=wx.StaticText(panel,label="职务")

【例10-8】采用灵活网格布局的员工信息窗口设计412025/3/6education=wx.StaticText(panel,label="学历")department=wx.StaticText(panel,label="部门")hobbies=wx.StaticText(panel,label="爱好")review=wx.StaticText(panel,label="简历")tc1=wx.TextCtrl(panel)tc2=wx.TextCtrl(panel)tc3=wx.TextCtrl(panel,style=wx.TE_MULTILINE)list1=['高中','大专','本科','研究生']cb=wx.ComboBox(panel,value='本科',choices=list1)self.Bind(wx.EVT_COMBOBOX,self.on_combobox,cb)list2=['技术','开发','销售','财务']lb1=wx.ListBox(panel,-1,choices=list2,style=wx.LB_SINGLE)

#单选self.Bind(wx.EVT_LISTBOX,self.on_list1,lb1)【例10-8】采用灵活网格布局的员工信息窗口设计422025/3/6

lb2=wx.ListBox(panel,choices=list3,style=wx.LB_EXTENDED|wx.LB_SORT)

self.Bind(wx.EVT_LISTBOX,self.on_list2,lb2)textFont=wx.Font(11,wx.DEFAULT,wx.NORMAL,wx.NORMAL,False)lb1.SetFont(textFont)lb2.SetFont(textFont)

fgs.AddMany([(title),(tc1,1,wx.EXPAND),(author),(tc2,1,wx.EXPAND),(education),(cb,1,wx.EXPAND),(department),(lb1,1,wx.EXPAND),(hobbies),(lb2,1,wx.EXPAND),(review),(tc3,1,wx.EXPAND)])

fgs.AddGrowableRow(5,1)fgs.AddGrowableCol(1,1)hbox.Add(fgs,proportion=2,flag=wx.ALL|wx.EXPAND,border=15)panel.SetSizer(hbox)

print('listbox1:'+str(listbox.GetSelection()))

【例10-8】采用灵活网格布局的员工信息窗口设计432025/3/6

defon_list2(self,event):listbox2=event.GetEventObject()print('listbox2:'+str(listbox2.GetSelections()))if__name__=="__main__": app=wx.App()mainFrame(None,title='员工信息')app.MainLoop()10.3.5网格包布局

网格包布局（GridBagSizer）是另外一种能够灵活安排网格的布局方式。它不需要设定网格的数量，可以直接在Add()方法中指定所添加的网格单元位置及其高度与宽度，由网格包自动计算行和列的总网格数量。442025/3/6wx.GridBagSizer(vgap,hgap)

wx.GridbagSizer().Add(control,pos,span=(1,1),flags,border)10.3.5网格包布局若指定了span参数，如以下所示：sizer.Add(tc,pos=(0,1),span=(1,2),flag=wx.EXPAND|wx.ALL,border=5)表示在网格(0,1)的位置上建立控件，且控件的高度占用1个网格（1行），宽度占用2个网格（2列）。网格包布局也具有灵活网格布局所具有的AddGrowableRow(idx,proportion=0)和AddGrowableCol(idx,proportion=0)等方法，如有需要可以使用。若不指定span，会默认新添加的控件长宽都占用一个网格，452025/3/610.3.5网格包布局创建复杂列表实例以后，要想列表中添加数据。

建立了一个具有3列的复杂列表。要为列表添加数据，需要建立其数据，将元素为3个的元组放置到一个列表中，就构成了复杂列表的每一行数据。462025/3/6self.lst.InsertColumn(0,'学期',width=100)self.lst.InsertColumn(1,'100米跑',wx.LIST_FORMAT_RIGHT,100)self.lst.InsertColumn(2,'50米跑',wx.LIST_FORMAT_RIGHT,100)data=[('2019-I','12.3','7.3'),('2018-I','13.4','7.5'),('2018-II','14.1','8.2'), ('2017-II','13.6','7.8'),('2017-II','12.9','7.9')]foriindata: idx=self.lst.InsertItem(0,i[0]) self.lst.SetItem(idx,1,i[1]) self.lst.SetItem(idx,2,i[2])【例10-9】

采用网格包布局的学生体测表窗口472025/3/6importwxdata=[('2019-I','12.3','7.3'),('2018-I','13.4','7.5'),('2018-II','14.1','8.2'),('2017-II','13.6','7.8'),('2017-II','12.9','7.9')]classmainFrame(wx.Frame):def__init__(self,parent,title):super(mainFrame,self).__init__(parent,title=title)self.InitUI()self.Centre()self.Show()defInitUI(self):panel=self

hbox=wx.BoxSizer(wx.HORIZONTAL) sizer=wx.GridBagSizer(0,0)hbox=wx.BoxSizer(wx.HORIZONTAL) sizer=wx.GridBagSizer(0,0)【例10-9】

采用网格包布局的学生体测表窗口482025/3/6text=wx.StaticText(panel,label="姓名")sizer.Add(text,pos=(0,0),flag=wx.ALL,border=5)tc=wx.TextCtrl(panel)tc.AppendText('张三')sizer.Add(tc,pos=(0,1),span=(1,2),flag=wx.EXPAND|wx.ALL,border=5)text2=wx.StaticText(panel,label="身高")sizer.Add(tex