wxpython 窗口排版- proportion/flag/border参数说明

新学习wxpython,一直纠结于窗口控件的排版,经过几天的查资料、试验,总结如下。

1、需求实例

来个实例,窗口有3行控件

第一行是文本提示(大小不变,文字左对齐,控件居左)。

第二行依次为文本提示(控件居左,大小不变,文字横向左对齐,文字纵向居中对齐,),文本输入框(控件居左,大小横向向右缩放,纵向不缩放),按钮(控件居右,右边固定,大小向左缩放),按钮(控件居右,大小不变)。

第三行多行文本框(控件扩展,大小四个方向扩展,直到占满剩余空间)

图1、窗口缩放前效果 

图2、窗口缩放后效果

2、代码 

#coding=utf-8

import wx

class MyFrame(wx.Frame):
    def __init__(self, parent, id):
        wx.Frame.__init__(self, parent, id, u'测试面板Panel', size = (400, 300))
    
        #创建面板
        panel = wx.Panel(self) 
        #创建open,save按钮
        self.bt_open = wx.Button(panel,label='open')
        self.bt_save = wx.Button(panel,label='save')
        #创建文本,左对齐,注意这里style=wx.TE_LEFT,不是wx.ALIGN_LEFT ,表示控件中的输入光标是靠左对齐。
        self.st_tips = wx.StaticText(panel ,0,u"请输入文件路径",style=wx.TE_LEFT )
        self.st_tips2 = wx.StaticText(panel ,0,u"文件路径:",style=wx.TE_LEFT )
        self.text_filename = wx.TextCtrl(panel,style=wx.TE_LEFT)
        #创建文本内容框,多行,垂直滚动条
        self.text_contents = wx.TextCtrl(panel,style=wx.TE_MULTILINE|wx.HSCROLL)
    
        #添加容器,容器中控件按横向并排排列
        bsizer_top = wx.BoxSizer(wx.VERTICAL)
        #添加容器,容器中控件按纵向并排排列
        bsizer_center = wx.BoxSizer(wx.HORIZONTAL)
        bsizer_bottom = wx.BoxSizer(wx.HORIZONTAL)
        
        #在容器中添加st_tips控件,proportion=0 代表当容器大小变化时,st_tips控件的大小不变
        #flag = wx.EXPAND|wx.ALL中,wx.ALL代表在st_tips控件四周都增加宽度为x的空白,x取border参数的值,本例是border=5
        # wx.EXPAND代表st_tips控件占满可用空间。
        bsizer_top.Add(self.st_tips,proportion=0,flag=wx.EXPAND|wx.ALL, border = 5 )
        #proportion=1 代表当容器大小变化时,st_tips2控件的大小变化,变化速度为1
        bsizer_center.Add(self.st_tips2,proportion=0,flag=wx.ALL|wx.ALIGN_CENTER_VERTICAL|wx.ALIGN_LEFT,border = 5 )
        #proportion=2 代表当容器大小变化时,text_filename控件的大小变化,变化速度为2
        bsizer_center.Add(self.text_filename,proportion=2,flag=wx.EXPAND|wx.ALL,border=5)
        bsizer_center.Add(self.bt_open,proportion=1,flag=wx.ALL,border=5)
        bsizer_center.Add(self.bt_save,proportion=0,flag=wx.ALL,border=5)
        
        bsizer_bottom.Add(self.text_contents,proportion=1 ,flag = wx.EXPAND|wx.ALL,border =5 )
        
        #wx.VERTICAL 横向分割
        bsizer_all = wx.BoxSizer(wx.VERTICAL)
        #添加顶部sizer,proportion=0 代表bsizer_top大小不可变化
        bsizer_all.Add(bsizer_top,proportion=0,flag=wx.EXPAND|wx.ALL,border=5)
        bsizer_all.Add(bsizer_center,proportion=0,flag=wx.EXPAND|wx.ALL,border=5)
        #添加顶部sizer,proportion=1 代表bsizer_bottom大小变化
        bsizer_all.Add(bsizer_bottom,proportion=1,flag=wx.EXPAND|wx.ALL,border=5)
        self.Bind(wx.EVT_BUTTON,self.onOpen,self.bt_open)
        #self.Bind(wx.EVT_BUTTON, self.OnCloseMe, button)
    
        panel.SetSizer(bsizer_all)


    def onOpen(self,event): 
        self.text_contents.AppendText(str(self.GetSizeTuple()))
        self.text_contents.AppendText(str(self.bt_open.GetSizeTuple()))
        self.text_contents.AppendText(str(self.text_filename.GetSizeTuple()))
        self.SetSize((700,600))
        self.text_contents.AppendText(str(self.GetSizeTuple()))
        self.text_contents.AppendText(str(self.bt_open.GetSizeTuple()))
        self.text_contents.AppendText(str(self.text_filename.GetSizeTuple()))        


if __name__ == '__main__':
    app = wx.PySimpleApp()
    frame = MyFrame(parent = None, id = -1)
    frame.Show()
    frame.Center()
    app.MainLoop()

3、总结

1、Box = wx.BoxSizer(integer orient)

orientation参数,代表控件排列方式,wx.VERTICAL 垂直排列   ,wx.HORIZONTAL 水平排列

形象一点就是:前者是三 , 横向3个1,  后者是111,纵向3个1

2、sizer.Add(wx.Window window, integer proportion=0, integer flag = 0, integer border = 0)

window 参数:代表要添加的控件。 

roportion参数:所添加控件在定义的定位方式所代表方向上,占据的空间比例。

假设有三个按钮,它们的比例值分别为0、1和2,它们都已添加到一个宽度为30的水平排列wx.BoxSizer,起始宽度都是10。

当sizer的宽度从30变成60时,按钮1的宽度保持不变,仍然是10,按钮2的宽度约为(10+(60-30)*1/(1+2))=30 ,按钮2约为20。

不太严谨说按钮2占有增量部分1/3,按钮3占有增量部分2/3。

border参数:控制所添加控件的边距,就是在部件之间添加一些像素的空白。

border参数与flag参数结合生效,为了应用边框参数,需要在flag参数中定义哪一边使用边框,譬如flag=wx.RIGHT代表右边距为border宽。

flag参数:

如前文所述,flag参数与border参数结合指定边距宽度,包括以下选项:

wx.LEFT ,左边距 wx.RIGHT,右边距 wx.BOTTOM,底边距 wx.TOP,上边距 wx.ALL,上下左右四个边距

可以通过竖线 “|”操作符(operator),比如wx.LEFT | wx.BOTTOM,来联合使用这些标志。

此外,flag参数还可以与proportion参数结合,指定控件本身的对齐(排列)方式,包括以下选项: wx.ALIGN_LEFT 左边固定,右边扩展(当proportion >0 时,下同) wx.ALIGN_RIGHT 右边不动 wx.ALIGN_TOP wx.ALIGN_BOTTOM wx.ALIGN_CENTER_VERTICAL wx.ALIGN_CENTER_HORIZONTAL wx.ALIGN_CENTER

此外,flag参数可以使用wx.EXPAND标志,那么所添加控件将占有sizer定位方向的方向上所有可用的空间。

最后总结一下,很重要:

1、wx.LEFT是指控件边框左边是否留空,该常量的定义在_core.py源文件中,

用法:bsizer_top.Add(self.st_tips,proportion=0,flag=wx.LEFT, border = 5 )

2、 wx.ALIGN_LEFT是控件本身居左对齐,该常量定义也在_core.py源文件中。

用法:bsizer_top.Add(self.st_tips,proportion=0,flag=wx.ALIGN_LEFT|wx.LEFT, border = 5 )

3、wx.TE_LEFT是控件光标居左对齐,该常量定义在_controls.py源文件中。

用法:self.text_ctrl_1 = wx.TextCtrl(self, wx.ID_ANY, "", style=  wx.TE_LEFT )

三个写法不一样,功能也不同,但定义值都有,一旦写错很难发现,但会出现奇奇怪怪的问题。

以上。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏CSDN技术头条

HTML基础知识总结

几个工具: IETester:多版本IE测试 Expression Web DreamWeaver 美工页面 XHTML:符合XML标准的HTML。 标签...

2585
来自专栏欧阳大哥的轮子

MyLayout和XIB或SB的混合使用方法

MyLayout是一个可以非常简单和方便的实现各种界面布局的第三方开源库。在我的github项目中大部分DEMO都是通过代码来实现界面布局的,但这并不是表示My...

804
来自专栏HTML5学堂

jQuery特效 | 导航底部横线跟随鼠标缓动

HTML5学堂(码匠):jQuery来实现如下特效 - 在导航底部存在一条横线,跟随着鼠标缓动到相应导航项底部。 2月初,接收到了公众号读者的效果需求,希望能够...

3915
来自专栏糊一笑

移动端效果之IndexList

写在前面 接着前面的移动端效果讲,这次讲解的的是IndexList的实现原理。效果如下: ? 代码请看这里:github 移动端效果之swiper 移动端效果之...

2264
来自专栏阮一峰的网络日志

CSS使用技巧

在修改模板的过程中,需要重写CSS样式表。正好看到instantshift.com有一篇CSS常用技巧的总结文章,我就把它整理出来,供自己参考,也希望对大家有用...

1811
来自专栏用户2442861的专栏

QLineEdit 输入验证(相关的设置)

LineEdit提 供一个文字输入栏位,可以输入文字或数字,我们可以对输入作验证,或是设定为一般显示、密码显示等等,以下的程式是个简单的设定示范:

3282
来自专栏hightopo

基于 HTML5 的 3D 工控隧道案例

1412
来自专栏前端之路

CSS布局-绝对尾部(Css Sticty Footer)

1504
来自专栏Flutter入门到实战

Flutter布局篇(1)--水平和垂直布局详解

本文版权归作者AWeiLoveAndroid所有,未经授权,严禁私自转载。转载请声明原文链接和作者信息。

4061
来自专栏韩东吉的Unity杂货铺

零基础入门 19: UGUI ScrollBar

通常在实际项目中,对ScrollBar的应用非常简单,主要用于配合TableView或者ScrollView来进行使用,下一节我们将说明一下Unity里的Scr...

2412

扫码关注云+社区

领取腾讯云代金券