python GUI图形化编程-wxpython(2)-使用panel面板

在使用《python GUI图形化编程-wxpython(1)》的图形化编程中我发现一件很耗费时间的事情，当我在界面上新增或者修改元素时，我需要重新调整窗口的大小，还必须对之前的元素重新调整位置坐标，否则就会出现排版很杂乱的现象，总之就是页面上的元素不会随着窗口的大小进行自适应的调整尺寸。

如下图：当窗口按照设定的尺寸展示时，排版还算美观

而当我拖动改变窗口的大小时，页面元素是固定不动的

为了解决这个问题，可以使用panel面板，我们可以将Panel看做是一个容器，可以在上面放置各种控件，排列控件时，将控件按照横纵划分为小模块，如下图所示，该页面的元素可分为4行，每行分为3列，可分别设置比例，这样窗口大小改变时，元素也会按照比例来放大或者缩小。

改写前代码如下：元件的排列主要是由pos和size来控制，调试起来比较麻烦

import wx

class ChatFrame(wx.Frame):
    def __init__(self, parent, id, title, size):
        # 初始化，添加控件并绑定事件
        wx.Frame.__init__(self, parent, id, title)
        self.SetSize(size)#设置对话框的大小
        self.Center()#设置弹窗在屏幕中间               
        
        self.chatFrame1 = wx.TextCtrl(self, pos=(5, 35), size=(250, 279), style=wx.TE_MULTILINE | wx.TE_READONLY | wx.TE_LEFT)#设置聊天窗口的大小
        self.chatFrame2 = wx.TextCtrl(self, pos=(260, 35), size=(250, 279), style=wx.TE_MULTILINE | wx.TE_READONLY | wx.TE_RIGHT)#设置聊天窗口的大小
        #  wx.TE_MULTILINE可以实现以滚动条方式多行显示文本,若不加此功能文本文档显示为一行
        self.noticeFrame = wx.TextCtrl(self, pos=(550, 35), size=(180, 279), style=wx.TE_MULTILINE | wx.TE_READONLY)#设置在线列表窗口的大小
        self.noticeLabel = wx.StaticText(self, label="Notice", pos=(600, 8), size=(90, 25))
        self.receiveLabel = wx.StaticText(self, label="Receive Msg", pos=(80, 8), size=(200, 25))
        self.sendLabel = wx.StaticText(self, label="Send Msg", pos=(345, 8), size=(200, 25))
        self.message = wx.TextCtrl(self, pos=(5, 320), size=(150, 25),value='input message')#设置发送消息的文本输入框的位置和尺寸
        self.sendButton = wx.Button(self, label="Send", pos=(200, 320), size=(58, 25))
        self.toUser=wx.TextCtrl(self,pos=(5, 355), size=(150, 25),value='input username')#设置指定用户的文本输入框的位置和尺寸
        self.sendDesignButton = wx.Button(self, label="SendDesign", pos=(200, 355), size=(100, 25))       
        self.closeButton = wx.Button(self, label="Close", pos=(353, 320), size=(65, 25))
        self.usersButton = wx.Button(self, label="Online", pos=(423, 320), size=(58, 25))
                             
        self.Show()

if __name__ == '__main__':
    app = wx.App()#实例化一个主循环
    ChatFrame(None, -1, title="ShiYanLou Chat Client", size=(780,500))
    app.MainLoop()#启动主循环

改写后代码：虽然看起来改写后的代码行数还比之前要多，但是却容易维护，而且代码层次也比较清晰。

import wx

class ChatFrame(wx.Frame):
    def __init__(self, parent, id, title, size):
        # 初始化，添加控件并绑定事件
        wx.Frame.__init__(self, parent, id, title)
        self.SetSize(size)#设置对话框的大小
        self.Center()#设置弹窗在屏幕中间               
        
        #使用尺寸器改写,改写后拉大或者缩小窗口，中间的控件会随着窗口的大小已固定的尺寸而改变
        panel=wx.Panel(self)#self表示实例即ChatFrame，创建一个面板
        #定义panel中的元件
        self.receiveLabel = wx.StaticText(panel,label="Receive Msg")
        self.sendLabel = wx.StaticText(panel,label="Send Msg")
        self.noticeLabel = wx.StaticText(panel,label="Notice")
        self.chatFrame1 = wx.TextCtrl(panel,style=wx.TE_MULTILINE | wx.TE_READONLY | wx.TE_LEFT)
        self.chatFrame2 = wx.TextCtrl(panel,style=wx.TE_MULTILINE | wx.TE_READONLY | wx.TE_RIGHT)
        self.noticeFrame = wx.TextCtrl(panel,style=wx.TE_MULTILINE | wx.TE_READONLY )
        self.message = wx.TextCtrl(panel,value='input message')#设置发送消息的文本输入框的位置和尺寸
        self.toUser=wx.TextCtrl(panel,value='input username')#设置指定用户的文本输入框的位置和尺寸
        self.sendButton = wx.Button(panel, label="Send")
        self.sendDesignButton = wx.Button(panel, label="SendDesign")  
        self.closeButton = wx.Button(panel, label="Close")
        self.usersButton = wx.Button(panel, label="Online")
        
        self.box1=wx.BoxSizer()#定义横向的box1
        self.box1.Add(self.receiveLabel, proportion=4, flag=wx.EXPAND | wx.ALL,border=5)#该元素占box1的比例为40%，方式为伸缩，边界为5
        self.box1.Add(self.sendLabel, proportion=4,flag=wx.EXPAND | wx.ALL,border=5)
        self.box1.Add(self.noticeLabel, proportion=2,flag=wx.EXPAND | wx.ALL,border=5)
        
        self.box2=wx.BoxSizer()#定义横向的box2
        self.box2.Add(self.chatFrame1, proportion=4,flag=wx.EXPAND | wx.ALL,border=5)
        self.box2.Add(self.chatFrame2, proportion=4,flag=wx.EXPAND | wx.ALL,border=5)
        self.box2.Add(self.noticeFrame, proportion=2,flag=wx.EXPAND | wx.ALL,border=5)
        
        self.box3=wx.BoxSizer()#定义横向的box3
        self.box3.Add(self.message, proportion=6, flag=wx.EXPAND | wx.ALL,border=5)
        self.box3.Add(self.sendButton, proportion=2,flag=wx.EXPAND | wx.ALL,border=5)
        self.box3.Add(self.usersButton, proportion=2,flag=wx.EXPAND | wx.ALL,border=5)
        
        self.box4=wx.BoxSizer()#定义横向的box3
        self.box4.Add(self.toUser, proportion=6, flag=wx.EXPAND | wx.ALL,border=5)
        self.box4.Add(self.sendDesignButton, proportion=2,flag=wx.EXPAND | wx.ALL,border=5)
        self.box4.Add(self.closeButton, proportion=2,flag=wx.EXPAND | wx.ALL,border=5)
        
        self.v_box=wx.BoxSizer(wx.VERTICAL)#定义一个纵向的v_box
        self.v_box.Add(self.box1, proportion=1,flag=wx.EXPAND | wx.ALL,border=5)#添加box1，比例为1
        self.v_box.Add(self.box2, proportion=7,flag=wx.EXPAND | wx.ALL,border=5)#添加box2，比例为7
        self.v_box.Add(self.box3, proportion=1,flag=wx.EXPAND | wx.ALL,border=5)#添加box3，比例为1
        self.v_box.Add(self.box4, proportion=1,flag=wx.EXPAND | wx.ALL,border=5)#添加box4，比例为1
        
        panel.SetSizer(self.v_box)                       
        self.Show()

if __name__ == '__main__':
    app = wx.App()#实例化一个主循环
    ChatFrame(None, -1, title="ShiYanLou Chat Client", size=(780,500))
    app.MainLoop()#启动主循环