用wxPython实现折叠面板

许多IM软件登录界面如图图1所示，点击“服务器设置”按钮，面板展开，服务器部分显示出来，如图2所示；再点击“服务器设置”按钮，面板折叠，服务器部分隐藏起来，回到图1。～本文由三思之旅原创，转载请注明出处http://think3t.iteye.com～

图1  面板折叠
 

图2  面板展开

 

下面介绍一下如何用wxPython实现这种效果。使用wxPython实现这种效果，关键是使用wx.BoxSizer管理整个面板，然后使用wx.BoxSizer类的Hide()、Show()方法将相应的控件隐藏或者显示出来。

def OnTouch(self, event):
    if self.isShown:    #如果当前控件已显示
        self.setserverBtn.SetLabel(u'服务器设置↓')    #更新按钮标签
        self.sizer.Hide(self.sbsizer)    #隐藏服务器设置部分
        self.isShown = False    #服务器设置部分当前已隐藏
        self.SetClientSize((330,118))    #更新面板尺寸
    else:
        self.sizer.Show(self.sbsizer)    #如果当前控件已隐藏
        self.setserverBtn.SetLabel(u'服务器设置↑')    #更新按钮标签
        self.isShown = True    #服务器设置部分当前已显示
        self.SetClientSize((330,200))    #更新面板尺寸
    self.sizer.Layout()    #关键所在，强制sizer重新计算并布局sizer中的控件

代码中的self.sbsizer是用来管理服务器设置部分的StaticBoxSizer。从以上代码可以总结出实现面板折叠与展开的方法如下：

1. 使用BoxSizer管理控件布局；
2. 使用Hide()/Show()函数将控件隐藏/显示；
3. 更新面板尺寸；
4. 使用BoxSizer的Layout()函数，强制Sizer重绘。

下面给出实现文章开头部分界面的完整代码供大家参考。当然，方法肯定不是唯一的，目前就想到这种方法，感觉也不复杂，所以写出来分享一下，欢迎大家前来评论～鲜花、鸡蛋都砸过来吧～～

#! /usr/bin/env python
#coding=utf-8

import wx

class MyFrame(wx.Frame):
    def __init__(self, parent=None, title=u'折叠与展开'):
        wx.Frame.__init__(self, parent, -1, title=title)
        self.panel = wx.Panel(self, style=wx.TAB_TRAVERSAL | wx.CLIP_CHILDREN | wx.FULL_REPAINT_ON_RESIZE)
        
        #增加一些控件:用户名密码部分，并使用GridBagSizer来管理这些控件
        self.label1=wx.StaticText(self.panel,-1,label=u'用户名：')
        self.label2=wx.StaticText(self.panel,-1,label=u'密     码：')
        self.userText=wx.TextCtrl(self.panel,-1,size=(200,25))
        self.passText=wx.TextCtrl(self.panel,-1,size=(200,25))
        self.rempassCheck=wx.CheckBox(self.panel,-1,label=u'记住密码')
        self.autologCheck=wx.CheckBox(self.panel,-1,label=u'自动登录')
        
        self.gbsizer1=wx.GridBagSizer(hgap=10, vgap=10)
        self.gbsizer1.Add(self.label1,pos=(0,0),span=(1,1),flag=wx.ALIGN_RIGHT|wx.ALIGN_CENTRE_VERTICAL)
        self.gbsizer1.Add(self.userText,pos=(0,1),span=(1,1),flag=wx.EXPAND)
        self.gbsizer1.Add(self.label2,pos=(1,0),span=(1,1),flag=wx.ALIGN_RIGHT|wx.ALIGN_CENTRE_VERTICAL)
        self.gbsizer1.Add(self.passText,pos=(1,1),span=(1,1),flag=wx.EXPAND)
        self.gbsizer1.Add(self.rempassCheck,pos=(2,0),span=(1,1),flag=wx.ALIGN_RIGHT|wx.ALIGN_CENTRE_VERTICAL)
        self.gbsizer1.Add(self.autologCheck,pos=(2,1),span=(1,1),flag=wx.ALIGN_CENTER|wx.ALIGN_CENTRE_VERTICAL)
        
        #增加一些控件:服务器设置部分，并使用GridBagSizer来管理这些控件，
        #然后再使用StaticBoxSizer管理GridBagSizer
        self.label3=wx.StaticText(self.panel,-1,label=u'地址：')
        self.label4=wx.StaticText(self.panel,-1,label=u'端口：')
        self.ipadText=wx.TextCtrl(self.panel,-1,size=(170,25))
        self.portText=wx.TextCtrl(self.panel,-1,size=(170,25))
        self.proxyBtn=wx.Button(self.panel,-1,label=u'代理\n设置')
        
        self.gbsizer2=wx.GridBagSizer(hgap=10,vgap=10)
        self.gbsizer2.Add(self.label3,pos=(0,0),span=(1,1),flag=wx.ALIGN_RIGHT|wx.ALIGN_CENTRE_VERTICAL)
        self.gbsizer2.Add(self.ipadText,pos=(0,1),span=(1,1),flag=wx.EXPAND)
        self.gbsizer2.Add(self.proxyBtn,pos=(0,2),span=(2,1),flag=wx.EXPAND)
        self.gbsizer2.Add(self.label4,pos=(1,0),span=(1,1),flag=wx.ALIGN_RIGHT|wx.ALIGN_CENTRE_VERTICAL)
        self.gbsizer2.Add(self.portText,pos=(1,1),span=(1,1),flag=wx.EXPAND)
        
        sbox=wx.StaticBox(self.panel,-1,label=u'服务器')
        self.sbsizer=wx.StaticBoxSizer(sbox,wx.VERTICAL)
        self.sbsizer.Add(self.gbsizer2,proportion=0,flag=wx.EXPAND,border=10)
        
        #增加一些控件:最下方的按钮，并使用水平方向的BoxSizer来管理这些控件
        self.setserverBtn=wx.Button(self.panel,-1,label=u'服务器设置↓')
        self.loginBtn=wx.Button(self.panel,-1,label=u'登录')
        self.cancelBtn=wx.Button(self.panel,-1,label=u'取消')
        
        self.bsizer=wx.BoxSizer(wx.HORIZONTAL)
        self.bsizer.Add(self.setserverBtn,1,flag=wx.EXPAND)
        self.bsizer.Add(self.loginBtn)
        self.bsizer.Add(self.cancelBtn)        
        
        #给"服务器设置"按钮绑定事件处理器
        self.Bind(wx.EVT_BUTTON, self.OnTouch, self.setserverBtn)
        
        #增加BoxSizer,管理用户名密码部分的gbsizer1，
        #服务器设置部分的sbsizer，以及最下方的bsizer
        self.sizer = wx.BoxSizer(wx.VERTICAL)
        self.sizer.Add(self.gbsizer1, 0, wx.EXPAND, 20)
        self.sizer.Add(self.sbsizer, 0, wx.EXPAND, 20)
        self.sizer.Add(self.bsizer, 0, wx.EXPAND, 20)
        self.isShown = False    #用这个变量指示当前是否已将控件隐藏
        self.sizer.Hide(self.sbsizer)    #将控件隐藏
        self.SetClientSize((330,118))    #更改面板尺寸
        
        self.panel.SetSizerAndFit(self.sizer)
        self.sizer.SetSizeHints(self.panel)
        
    def OnTouch(self, event):
        if self.isShown:    #如果当前控件已显示
            self.setserverBtn.SetLabel(u'服务器设置↓')    #更新按钮标签
            self.sizer.Hide(self.sbsizer)    #隐藏服务器设置部分
            self.isShown = False    #服务器设置部分当前已隐藏
            self.SetClientSize((330,118))    #更新面板尺寸
        else:
            self.sizer.Show(self.sbsizer)    #如果当前控件已隐藏
            self.setserverBtn.SetLabel(u'服务器设置↑')    #更新按钮标签
            self.isShown = True    #服务器设置部分当前已显示
            self.SetClientSize((330,200))    #更新面板尺寸
        self.sizer.Layout()    #关键所在，强制sizer重新计算并布局sizer中的控件
        
        
if __name__ == "__main__":
    app = wx.PySimpleApp()
    frame = MyFrame(None)
    frame.Show(True)
    app.MainLoop()

～本文由三思之旅原创，转载请注明出处 http://think3t.iteye.com ～