购买
下载掌阅APP,畅读海量书库
立即打开
畅读海量书库
扫码下载掌阅APP

3.1 布局管理

GUI编程就相当于搭积木,每个积木块应该放在哪里,每个积木块显示为多大,也就是对大小和位置都需要进行管理,而布局管理器正是负责管理各组件的大小和位置的。此外,当用户调整了窗口的大小后,布局管理器还会自动调整窗口中各组件的大小和位置。

3.1.1 Pack布局管理器

如果使用Pack布局,那么当程序向容器中添加组件时,这些组件会依次向后排列,排列方向既可以是水平的,也可以是垂直的。

【例3-1】 利用Pack布局管理器制作钢琴的布局。

运行程序,效果如图3-1所示。

图3-1 钢琴布局

pack()方法通常可支持如下选项。

· anchor:当可用空间大于组件所需求的大小时,该选项决定组件被放置在容器的何处。该选项支持N(北,代表上)、E(东,代表右)、S(南,代表下)、W(西,代表左)、NW(西北,代表左上)、NE(东北,代表右上)、SW(西南,代表左下)、SE(东南,代表右下)、CENTER(中,默认值)这些值。

· expand:该bool值指定当父容器增大时是否拉伸组件。

· fill:设置组件是否沿水平或垂直方向填充。该选项支持NONE、X、Y、BOTH四个值,其中,NONE表示不填充,BOTH表示沿着两个方向填充。

· ipadx:指定组件在x方向(水平)上的内部留白(padding)。

· ipady:指定组件在y方向(垂直)上的内部留白(padding)。

· padx:指定组件在x方向(水平)上与其他组件的间距。

· pady:指定组件在y方向(垂直)上与其他组件的间距。

· side:设置组件的添加位置,可以设置为TOP、BOTTOM、LEFT或RIGHT这四个值的其中之一。

3.1.2 Grid布局管理器

Grid布局管理器可以说是Tkinter这三个布局管理器中最灵活多变的。使用一个Grid就可以简单地实现用很多个框架和Pack搭建起来的效果。

Grid把组件空间分解成一个网格进行维护,即按照行、列的方式排列组件,组件位置由其所在的行号和列号决定;行号相同而列号不同的几个组件会被依次上下排列,列号相同而行号不同的几个组件会被依次左右排列。

在Python程序中,调用grid()方法进行Grid布局。在调用grid()方法时可传入多个选项,该方法支持的ipadx、ipady、pady与pack()方法的这些选项相同。而grid()方法额外增加了如下选项。

· column:单元格的列号为从0开始的正整数。

· columnspan:跨列,跨越的列数,正整数。

· row:单元格的行号为从0开始的正整数。

· rowspan:跨行,跨越的行数,正整数。

· sticky:组件紧贴所在单元格的某一角,该选项支持N(北,代表上)、E(东,代表右)、S(南,代表下)、W(西,代表左)、NW(西北,代表左上)、NE(东北,代表右上)、SW(西南,代表左下)、SE(东南,代表右下)、CENTER(中,默认值)这些值。

【例3-2】 利用Grid布局管理器设计一个计算器界面。

运行程序,效果如图3-2所示。

图3-2 计算器界面

3.1.3 Place布局管理器

Place布局就是其他GUI编程中的“绝对布局”,这种布局方式要求程序显式指定每个组件的绝对位置或相对于其他组件的位置。

如果要使用Place布局,调用相应组件的place()方法即可。在使用该方法时同样支持一些详细的选项,关于这些选项的介绍如下。

· x:指定组件的X坐标。x为0,代表位于最左边。

· y:指定组件的Y坐标。y为0,代表位于最右边。

· relx:指定组件的X坐标,以父容器总宽度为单位1,该值应该为0.0~1.0,其中,0.0代表位于窗口最左边,1.0代表位于窗口最右边,0.5代表位于窗口中间。

· rely:指定组件的Y坐标,以父容器总宽度为单位1,该值应该为0.0~1.0,其中,0.0代表位于窗口最上边,1.0代表位于窗口最下边,0.5代表位于窗口中间。

· width:指定组件的宽度,以pixel为单位。

· height:指定组件的高度,以pixel为单位。

· relwidth:指定组件的宽度,以父容器总宽度为单位1,该值应该为0.0~1.0,其中,1.0代表整个窗口宽度,0.5代表窗口的一半宽度。

· relheight:指定组件的高度,以父容器总高度为单位1,该值应该为0.0~1.0,其中,1.0代表整个窗口高度,0.5代表窗口的一半高度。

· bordermode:该属性支持“inside”或“outside”属性值,用于指定当设置组件的宽度、高度时是否计算该组件的边框宽度。

【例3-3】 Place布局管理实现。

运行程序,效果如图3-3所示。

图3-3 图片的上下管理 0d95E+1ExKQ6N6eRIRUKjgP09YDlLz2vqBdhp75Mo1/3rxUfhrei1lfJcM4KrqgA

点击中间区域
呼出菜单
上一章
目录
下一章
×