【Python-GUI】wxPython之BoxSizer布局设计基本使用方法

已于 2022-05-16 01:36:36 修改
阅读量2.2k 收藏 12
点赞数 4
分类专栏： Python-GUI 文章标签： python GUI
于 2022-05-07 10:20:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42297382/article/details/124601404
版权

前言：前文学习了使用wxPython来创建窗口，并添加了一个静态的文本信息。

学习目标：通过一个简易计算的界面完成下面的学习

  1. 学习一下如何在窗体上设计文本框控件和按钮控件，
  2. 通过BoxSizer对控件进行布局设计，
  3. 将文本框输入信息和按钮单击事件进行关联处理。

目录

一、设计界面原型

🍁界面元素分析：

🍁界面布局分析：

二、界面设计实现

🍓2.1、窗体初始化

🍓2.2、设置前三个文本框的布局及BoxSizer相关设置逻辑和语法

🍓2.3、设置垂直排列的控件

🍓2.4、将界面出入数据与按钮单击事件进行关联处理

🍓2.5、简易计算完整代码

三、将代码进行类的封装

一、设计界面原型

先设计想要实现的界面的布局，原型如下，界面很简单：

🍁界面元素分析：

界面中包含：

  • 窗体标题为“简易计算”
  • 4个文本框控件 --- wx.TextCtrl
  • 1个按钮控件，按钮名字是'OK' --- wx.Button

🍁界面布局分析：

  • 前三个文本框水平放置 --- boxsizer1 = wx.BoxSizer(wx.HORIZONTAL)
  • 前三个文本框与按钮以及下面那个文本框是垂直放置的 --- boxsizer2 = wx.BoxSizer(wx.VERTICAL)（包含boxsizer1，一个按钮，一个文本框）

二、界面设计实现

🍓2.1、窗体初始化

在进行控件设计之前，可以先将窗体的基础搭建起来，然后后续控件在慢慢往里填，基本流程如下：

  • 定义一个应用程序app
  • 定义一个窗体
  • 定义一个panel容器
  • 激活显示窗口
  • 运行程序
# 试验2：基于wxpython实现两个数的运算程序
# 导入wx库文件
import wx

# 进行应用程序和窗体的初始化
# 定义一个应用程序
app = wx.App()
# 定义一个窗体
window = wx.Frame(None, title='简易计算', size=(500, 400))
# 定义一个容器
panel = wx.Panel(window)
# 激活显示窗口
window.Show(True)
# 运行程序
app.MainLoop()

运行结果如下：

🍓2.2、设置前三个文本框的布局及BoxSizer相关设置逻辑和语法

文本框的定义是调用wx.TextCtrl，三个文本框就调用三次：

  • num1 = wx.TextCtrl(panel)
  • operator = wx.TextCtrl(panel)
  • num2 = wx.TextCtrl(panel)

控件布局设计是调用wx,BoxSizer，基本流程有三步：

  1. 定义wx.BoxSizer是水平排列还是垂直排列，什么都不加的话默认是水平排列
    1. 水平排列：wx.HORIZONTAL
    2. 垂直排列：wx.VERTICAL
  2. 依次将控件加入到上面定义的boxsizer中，并指定控件参数属性，boxsizer1.Add(控件名, proportion=0, border=8, flag=wx.LEFT)
    • proportion：控件大小，默认为0
    • border：边界大小，单位为像素
    • flag：标志，一般有上下左右，扩展，多个属性用 ' | ' 隔开就好了，wx.LEFT | wx.RIGHT | wx.TOP | wx.BOTTOM | wx.EXPAND
  3. 执行布局设置，在将控件布局好之后一定要调用方法执行一下，panel.SetSizer(boxsizer名字)

代码设计如下：

# 试验2：基于wxpython实现两个数的运算程序
# 导入wx库文件
import wx

# 进行应用程序和窗体的初始化
# 定义一个应用程序
app = wx.App()
# 定义一个窗体
window = wx.Frame(None, title='简易计算', size=(500, 400))
# 定义一个容器
panel = wx.Panel(window)

# 定义四个文本框，一个按钮
num1 = wx.TextCtrl(panel)
operator = wx.TextCtrl(panel)
num2 = wx.TextCtrl(panel)

# 设置前三个文本框的布局
# 1、定义BoxSizer
boxsizer1 = wx.BoxSizer(wx.HORIZONTAL)  # 水平排列，不加的话默认就是水平排列

# 2、依次加入控件到boxsizer中
boxsizer1.Add(num1, proportion=0, border=8, flag=wx.LEFT)  # proportion：控件大小，默认为0
boxsizer1.Add(operator, proportion=1, border=8, flag=wx.LEFT)  # flag：标志，一般有上下左右，扩展
boxsizer1.Add(num2, proportion=0, border=8, flag=wx.LEFT | wx.RIGHT)  # border：边界大小，单位为像素

# 执行布局设置
panel.SetSizer(boxsizer1)

# 激活显示窗口
window.Show(True)
# 运行程序
app.MainLoop()

运行结果如下：

🍓2.3、设置垂直排列的控件

按钮的定义是调用wx.Button，用label来定义按钮的名字：button = wx.Button(panel, label="OK")

再定义一个boxsizer2用来声明是垂直排列。

基本流程和上面一样，不一样的是在执行布局设置时，我们需要改成boxsizer2，因为boxsizer1已经包含在了boxsizer2中了。

代码设计如下：

# 试验2：基于wxpython实现两个数的运算程序
# 导入wx库文件
import wx

# 进行应用程序和窗体的初始化
# 定义一个应用程序
app = wx.App()
# 定义一个窗体
window = wx.Frame(None, title='简易计算', size=(500, 400))
# 定义一个容器
panel = wx.Panel(window)
# 定义四个文本框，一个按钮
num1 = wx.TextCtrl(panel)
operator = wx.TextCtrl(panel)
num2 = wx.TextCtrl(panel)
result = wx.TextCtrl(panel)
button = wx.Button(panel, label="OK")
# 设置前三个文本框的布局
# 1、定义BoxSizer
boxsizer1 = wx.BoxSizer(wx.HORIZONTAL)  # 水平排列，不加的话默认就是水平排列
# 2、依次加入控件到boxsizer中
boxsizer1.Add(num1, proportion=0, border=8, flag=wx.LEFT)  # proportion：控件大小，默认为0
boxsizer1.Add(operator, proportion=1, border=8, flag=wx.LEFT)  # flag：标志，一般有上下左右，扩展
boxsizer1.Add(num2, proportion=0, border=8, flag=wx.LEFT | wx.RIGHT)  # border：边界大小，单位为像素
# 再定义一个boxsizer, 垂直排列
boxsizer2 = wx.BoxSizer(wx.VERTICAL)  # 垂直排列
# 把boxsizer1加入boxsizer2
boxsizer2.Add(boxsizer1, flag=wx.EXPAND | wx.TOP, border=8)  # expand扩展平铺
boxsizer2.Add(button, flag=wx.EXPAND | wx.TOP | wx.LEFT | wx.RIGHT, border=8)
boxsizer2.Add(result, proportion=1, flag=wx.EXPAND | wx.LEFT | wx.RIGHT | wx.TOP | wx.BOTTOM, border=8)
# 执行布局设置
panel.SetSizer(boxsizer2)
# 激活显示窗口
window.Show(True)
# 运行程序
app.MainLoop()

运行结果如下：

🍓2.4、将界面出入数据与按钮单击事件进行关联处理

实现目标1：接收第一个文本框num1中的输入数据，在单击‘OK’按钮之后，在result文本框中显示输入的数据。

实现流程：

  1. 定义一个按钮事件函数 def click(event)，event不能省！
    1. 用GetValue方法获取num1中的输入数据：number1 = num1.GetValue()
    2. 用SetValue方法把对应的数据设置在结果文本框中：result.SetValue(number1)
  2. 将按钮控件和事件函数进行绑定：button.Bind(wx.EVT_BUTTON, click)

这样两步之后点击单击按钮就会在结果文本框中显示num1的输入数据了，代码如下：

def click(event):  # event不能省
    # 获取num1中的输入数据
    number1 = num1.GetValue()
    # 将获取的数据放入结果文本框中
    result.SetValue(number1)

# 进行按钮事件绑定
button.Bind(wx.EVT_BUTTON, click)

实现目标2：实现加减乘除简易计算

实现流程：基本流程如上。

🍓2.5、简易计算完整代码

# 试验2：基于wxpython实现两个数的运算程序
# 导入wx库文件
import wx


# 定义按钮触发事件函数
def calculator(event):  # event不能省
    # 获取num1中的输入数据
    number1 = num1.GetValue()
    # 获取operator中输入的运算符
    oper = operator.GetValue()
    # 获取num2中的输入数据
    number2 = num2.GetValue()
    if oper == "+":
        r = int(number1) + int(number2)
    if oper == "-":
        r = int(number1) - int(number2)
    if oper == "*":
        r = int(number1) * int(number2)
    if oper == "/":
        r = float(number1) / int(number2)
    # 将获取的数据放入结果文本框中
    result.SetValue(number1 + oper + number2 + "=" + str(r))


# 进行应用程序和窗体的初始化
# 定义一个应用程序
app = wx.App()
# 定义一个窗体
window = wx.Frame(None, title='简易计算', size=(500, 400))
# 定义一个容器
panel = wx.Panel(window)
# 定义四个文本框，一个按钮
num1 = wx.TextCtrl(panel)
operator = wx.TextCtrl(panel)
num2 = wx.TextCtrl(panel)
result = wx.TextCtrl(panel)
button = wx.Button(panel, label="OK")
# 设置前三个文本框的布局
# 1、定义BoxSizer
boxsizer1 = wx.BoxSizer(wx.HORIZONTAL)  # 水平排列，不加的话默认就是水平排列
# 2、依次加入控件到boxsizer中
boxsizer1.Add(num1, proportion=0, border=8, flag=wx.LEFT)  # proportion：控件大小，默认为0
boxsizer1.Add(operator, proportion=1, border=8, flag=wx.LEFT)  # flag：标志，一般有上下左右，扩展
boxsizer1.Add(num2, proportion=0, border=8, flag=wx.LEFT | wx.RIGHT)  # border：边界大小，单位为像素
# 再定义一个boxsizer, 垂直排列
boxsizer2 = wx.BoxSizer(wx.VERTICAL)  # 垂直排列
# 把boxsizer1加入boxsizer2
boxsizer2.Add(boxsizer1, flag=wx.EXPAND | wx.TOP, border=8)  # expand扩展平铺
boxsizer2.Add(button, flag=wx.EXPAND | wx.TOP | wx.LEFT | wx.RIGHT, border=8)
boxsizer2.Add(result, proportion=1, flag=wx.EXPAND | wx.LEFT | wx.RIGHT | wx.TOP | wx.BOTTOM, border=8)
# 执行布局设置
panel.SetSizer(boxsizer2)
# 进行按钮事件绑定
button.Bind(wx.EVT_BUTTON, calculator)
# 激活显示窗口
window.Show(True)
# 运行程序
app.MainLoop()

运行结果如下：

三、将代码进行类的封装

上面的代码不利于后续的维护，所以还需要对其进行模块化设计，可以分成几个方法：

  1. 初始化方法：将窗体和控件的创建都在初始化中完成
  2. 控件布局方法：通过BoxSizer设置界面布局
  3. 事件函数方法：各种控件对应的事件函数（note：在主函数中不需要调用，因为在调用绑定方法时会自动调用事件方法）
  4. 控件和事件绑定方法：将控件与对应事件函数进行绑定
  5. 运行方法：显示窗口和运行程序

将代码以面向对象思想进行结构化设计后，修改如下：

# 使用面向对象思想进行GUI运算器的实现
# 导入相关的类库文件
import wx


# 定义类
class cal_GUI:
    # 类的初始化方法，创建所有的控件
    def __init__(self):
        self.app = wx.App()
        self.window = wx.Frame(None, title="简易计算", size=(500, 400))
        self.panel = wx.Panel(self.window)
        # 创建文本框控件
        self.num1 = wx.TextCtrl(self.panel)
        self.operator = wx.TextCtrl(self.panel)
        self.num2 = wx.TextCtrl(self.panel)
        self.result = wx.TextCtrl(self.panel)
        # 创建按钮控件
        self.button = wx.Button(self.panel, label="OK")

    def layout(self):
        # 设置一个水平的BoxSizer
        boxsizer1 = wx.BoxSizer(wx.HORIZONTAL)
        # 把3个文本框加入BoxSizer1中
        boxsizer1.Add(self.num1, proportion=0, border=8, flag=wx.LEFT)
        boxsizer1.Add(self.operator, proportion=1, border=8, flag=wx.LEFT)
        boxsizer1.Add(self.num2, proportion=0, border=8, flag=wx.LEFT | wx.RIGHT)
        # 设置一个垂直的BoxSizer
        boxsizer2 = wx.BoxSizer(wx.VERTICAL)
        # 把按钮和结果文本框以及boxsizer1加入进来
        boxsizer2.Add(boxsizer1, border=8, flag=wx.EXPAND | wx.TOP)
        boxsizer2.Add(self.button, border=8, flag=wx.EXPAND | wx.TOP | wx.LEFT | wx.RIGHT)
        boxsizer2.Add(self.result, proportion=1, border=8, flag=wx.EXPAND | wx.TOP | wx.BOTTOM | wx.LEFT | wx.RIGHT)
        # 执行布局设置
        self.panel.SetSizer(boxsizer2)

    def cal_event(self, event):
        # 获取控件中输入的内容
        number1 = self.num1.GetValue()
        oper = self.operator.GetValue()
        number2 = self.num2.GetValue()
        # 根据运算符进行运算处理
        if oper == "+":
            r = int(number1) + int(number2)
        if oper == "-":
            r = int(number1) - int(number2)
        if oper == "*":
            r = int(number1) * int(number2)
        if oper == "/":
            r = float(number1) / int(number2)
        # 将获取的数据放入结果文本框中
        self.result.SetValue(number1 + oper + number2 + "=" + str(r))

    # 将按钮和对应时间函数进行绑定
    def bind_set(self):
        self.button.Bind(wx.EVT_BUTTON, self.cal_event)

    def run(self):
        # 激活显示窗口
        self.window.Show(True)
        # 运行程序
        self.app.MainLoop()


if __name__ == '__main__':
    calObj = cal_GUI()
    calObj.layout()
    calObj.bind_set()
    calObj.run()
BetterFate!
关注
  • 4
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
WxPython BoxSizer布局详解
Shelly的博客
01-30 1万+
boxsizer分为横向和纵向两种，如果你想要把控件水平排列，就使用横向boxsizer，如果你想让控件都垂直排列，就使用纵向boxsizer，当然很多界面既有横向排列又有纵向排列的控件，我们就可以使用boxsizer的嵌套。 思路分析： 整体思路： 先整个窗口Frame 在窗口上建立一个面板Panel，用于放控件（Button，StaticText，TextCtl，CheckBox等控件），尺寸...
wxPython BoxSizer 创建水平BoxSizer 创建垂直BoxSizer 设置控件的布局参数 嵌套BoxSizer——《跟老吕学Python编程》附录资料
最新发布
Python老吕的博客
04-08 595
在wxPython这个流行的Python GUI库中，BoxSizer是一个非常重要的布局管理器，它允许你根据窗口的宽度或高度来自动调整子控件的大小和位置。的构造函数中，我们首先调用父类的构造函数来创建一个新的窗口，并设置其标题和大小。在wxPython中，BoxSizer是一种常用的布局管理器，它允许开发者创建垂直或水平的容器，用于组织和管理窗口中的控件。这样，当窗口大小发生变化时，BoxSizer会根据控件的布局参数自动调整控件的位置和大小，以保持界面的美观和易用性。是一个非常重要的布局管理器。
wxpython布局的实现方法
09-18
主要介绍了wxpython布局的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
python的GUI的运用（wxpython）
大神养成中.....
06-08 5717
首先实现一个简单的记事本import wx app = wx.App() win = wx.Frame(None, title = "Simple Editor", size = (410,335)) bkg = wx.Panel(win) #背景组件loadButton = wx.Button(win, label = "Open", pos = (225,5), size = (80,25))
wxPython中wx.BoxSizer用法
MissYuanxi的博客
01-14 531
wx.BoxSizer是一种可以按行或列排列组件的基本布局工具。
wxPython布局管理
qq_56891068的博客
11-01 397
其中：proportion参数用于设置当前子窗口在父窗口中所占的空间比例，flag参数是布局标志，用来控制对齐方式、边框和调整尺寸，border参数用于设置边框的宽度。上述代码首先将两个按钮(b1、b2)放到了一个水平盒子布局管理器对象(hbox)中，然后静态文本和(hbox)放到一个垂直方向的盒子布局管理器对象(vbox)中。盒子布局管理器类是wx.BoxSizer，Box布局管理器是最常用的布局管理器，它可以让子窗口沿垂直或者水平方向布局。在前一篇文章中使用了绝对布局，这里主要学习盒子布局。
WxPython 控件隐藏与显示技巧
预则立
01-14 2090
WxPython 的控件，除了有Disable() 和 Enable()方法，还有hide及show方法，在固定位置的布局，Hide 和 Show()工作正常 。 比如这样 import wx class MyButton(wx.Frame): flag = True def __init__(self, parent, id, title): wx.Frame.__init__(self, parent, id, title) panel = w
python-wxpython4
03-15
WxPython是Python社区广泛使用的库之一，尤其适合开发桌面应用。在本项目"python-wxpython4-master"中，我们可以预见到包含的是一份关于WxPython4的最新稳定版本或开发分支的源代码。 WxPython4（也称为Phoenix版本...
wxPython.zip_python gui_site:www.pudn.com_wxpython
07-14
描述中提到“在windows下面很流行的GUI的开发包是给Python用的”，这进一步确认了wxPython是一个专为Python设计的，特别是在Windows操作系统上广泛使用的GUI库。wxPython允许开发者创建原生外观的跨平台应用，这意味...
wxPython-demo-4.0.6_wxpython官方demo_wxPython-demo_wxpython_DEMO_w
10-04
【wxPython】是一种基于Python语言的图形用户界面（GUI）工具包，它允许开发者使用原生的窗口系统组件创建美观且功能丰富的应用。这个压缩包文件"wxPython-demo-4.0.6_wxpython官方demo_wxPython-demo_wxpython_DEMO...
Python wxPython库Core组件BoxSizer用法示例
09-20
主要介绍了Python wxPython库Core组件BoxSizer用法,结合实例形式分析了wxPython BoxSizer布局管理相关使用方法及操作注意事项,需要的朋友可以参考下
wxPython的sizer使用方法实例教程
05-18
这个demo做得相当好(直接运行即可),仔细看过之后你会发觉在wxPython中用sizer调整窗口部件的布局是如此的简单,灵活以及强大.值得推荐
Python GUI项目源码
10-09
Python GUI项目源码是用于创建图形用户界面的应用程序代码，主要使用Python的库来实现。在本项目中，"PythonGUIDemo-master"可能是一个包含所有源代码和资源文件的主目录。下面将详细介绍Python GUI编程的基本概念、...
Python之学习笔记（wx：界面美化）
热门推荐
I AM BACK
06-05 1万+
准备 资料 应用准备下载：pythonwx。 下载地址：http://www.wxpython.org/ http://www.360doc.com/content/13/0204/13/3046928_264181084.shtml 资料wx的应用如下： http://lihf198628.blog.163.com/blog/static/1138145201122102452894/
Python-GUI编程
05-23
Python-GUI编程是指使用Python编程语言来开发图形用户界面（GUI）。Python有多种GUI工具包可供选择，其中最流行的是Tkinter、PyQt、wxPython和Kivy等。这些工具包都提供了许多组件和控件，使开发者能够轻松地创建窗口、按钮、文本框、列表框、下拉框等GUI元素，并且可以通过事件处理函数来实现交互响应。 在Python中使用GUI编程可以快速地开发各种桌面应用程序，如文本编辑器、图形绘制、游戏、音乐播放器、计算器等等。并且Python具有简单易学、代码精简、跨平台等优点，因此在GUI编程中也是非常受欢迎的。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

BetterFate!

爱你哦！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值