pack布局

Chapter 2. Geometry Management  第2章 布局管理:


显示部件在屏幕上,他们必须被传递给布局管理器。


布局管理器 控制部件的位置和大小 在显示窗口,几个布局管理器是可用的在Perl/Tk 

pack,place,grid和form


所有的部件管理器 是被调用作为方法,但是他们有自己的方法学和参数来改变 部件应该怎么放和放在那里。

$widget1->pack(); $widget2->place(); $widget3->grid(); $widget4->form( );

当你组织部件在你的窗口,如果经常需要单独的部件组来得到某个外观和感受


例如,当你是用pack,它是很难把部件堆放在水平和垂直方向上没有分组他们以某种方式。


我们使用一个Frame部件或者另外一个窗体 来组织部件在窗口内。


我们通过创建我们第一个窗口 通过调用MainWindow,


MainWindow 是一个指定的Toplevel 部件的表格


对于更多的详细的信息如何创建/配置 Frame 和Toplevel 部件,


除了布局,在布局管理器之间的不同 让它变得困难(不是完全不可能,但绝对不推荐)


使用多于一种的布局管理器 在相同的区域。


在$mv,我们可以显示很多类型的部件,但是当我们开始使用pack,


我们应该继续使用pack在所有的部件 包含在$mv.


不要在中间切换到grid,因为两个布局管理器会进入一个竞争的条件：


一个会创建它的布局,会影响其他的布局计算,会影响第一个布局,


导致它重新计算它的布局..

然而,让我们假设我们的主窗体包含一个Frame,进而包含其他的小部件。


我们可以使用pack来pack Frame 在MainWindow  我们可以使用grid 来管理部件在Frame里 


图2-1， Frame 在一个窗体里 使用不同的部件管理器:



虽然不同的部件管理器有它们自己的有点和缺点, pack是最常用的,


因此我们首选讨论。  grid布局管理器 已经改进了在Tk8.0 ，随后移植到Perl.


2.1. The pack Geometry Manager  pack 布局管理器:


记得 当你是一个child 你需要那些木板来放在一起？


pack 布局管理器,我们的windows 类似于积木拼图,


因为部件不能重叠或者相互覆盖, 部分或者完全的。


如果一个按钮是被放置在某个空间在windows里, 下一个按钮(或者任何部件) 必须适应周围已经放置的按钮。


幸运的是,我们的windows 将会只处理矩形形状  代替有趣形状的拼图。


图2 - 2。重叠误差


你放置部件的顺序 是非常重要的,因为它直接影响 你在屏幕上看到的。


每个Frame 或者Toplevel 维护一个items的列表是显示在里面


这个列表有一个订单, 如果部件A 是放置在部件B前,那么部件A 会得到优先权 如果空间变得稀缺,


这个会变的清晰 当我们通过一些例子。


如果我们不关心 windows看起来像和 部件如何放进去, 你可以使用pack 不带参数

跳过这章的其余部分:

$widget->pack( );


为了让你的window 看起来更好看,和更好管理(更友善),这里有参数可以被发送给pack方法

会改变部件的方式和窗口外观。

参数被安排为键值对,因此,更加复杂的用法是:

$widget->pack( [ option => value, ... ] );


这个代码创建一个窗体,不使用任何pack选项。


我们没有覆盖任何的部件在这个例子里,  但坚持下去,很简单:


图2-3,  pack  管理Windows 部件


我们可以改变前面的代码,增加一些选项来pacl 请求,让我们的windows 看起来更好:

图2-4，pack布局的一些选项:

使用pacl 允许你控制:


窗口的位置相对于windows或者Frame edges：


部件的大小, 相对其他 部件:


部件之间的空间


位置在窗口或者窗体的部件列表:


选项,值和默认值是被列出和描述在下面章节:

2.1.1   pack的选项:

这里列出了所有的选项 当你调用pack( 默认值以粗体显示)


-side  => 'left' | 'right' | 'top' | 'bottom


放置部件指定在windows或者窗体指定的方位:

-fill => 'none' | 'x' | 'y'| 'both'


导致部件填充分配矩形在指定的方向:


-expand => 1 | 0  

导致分配矩形填充剩余的可用空间在窗体或者Frame：

-anchor => 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw' | 'center'



描点 部件内部分配矩形


-after => $otherwidget

布置部件在$otherwidget 后面 


-in => $otherwindow


布置 $widget  在$otherwindow  相比 $widget的父窗体,是默认的选项:

2.1.2. Positioning Widgets

定位部件:

每个窗口(或者窗体)有4个方向:  top, bottom, left, and right.


packer 使用那些sides 作为部件的参考点。默认的,pack 部署部件仅靠toplevel 或者Frame.


你可以控制部件的size 通过-side 选项:

-side =>  'left' | 'right' | 'top' | 'bottom'


例如,如果我们想我们的部件仅靠着 窗口的左边,我们可以指定  -side => 'left'.



当我们使用Hello World 例子作为一个基础,让我们看看发生了什么当我们pack我们的按钮仅靠不同的sides.


在图2-5中, 唯一改变的行 是按钮的 ->pack 创建行



图2-5，部署一个按钮在不同的sides:



图2-5  已经有点大的强调 不同在使用 可替代的值 对于-side makes.


通常情况下, 窗口是和需要的一样大 来显示一个按钮。


当你决定如何在窗口上放置部件, 它总是一个好的主意来看看发生了什么 当你把窗口变大或者变小。


到目前为止, pack 看起来更简单, 但是入股你要put 多于一个按钮在你的应用里？


当我们增加更多的按钮 会发生什么？

#!/usr/bin/perl -w
use Tk;

my $mw = MainWindow->new;
$mw->Button(-text => 'Done1', -command => sub { exit })->pack;
$mw->Button(-text => 'Done2', -command => sub { exit })->pack;
$mw->Button(-text => 'Done3', -command => sub { exit })->pack;
$mw->Button(-text => 'Done4', -command => sub { exit })->pack;
MainLoop; 

2.1.3  分配矩形:

当布置一个项目,packer 首选查看 哪边来使用(top, bottom, right, or left) 


在图2-7，实线矩形代表我们空的window(或者Frame).虚线矩形面积是区域 packer 设置aside 对于第一个按钮


它确实一直在窗口的宽度和高度, 但更简单的看到, 它缩进显示:


图2-7，矩形区域设置aside 通过packer 当使用 -side => 'top' and -side => 'left'


虚线框 的尺寸, 我们称之为分配矩形,基于请求部件的尺寸。


对于顶部和底部,分配矩形是和窗体一样宽的 只有和部件一样高才被放置。


对于右边和左边, 分配矩形是和窗口一样高 

2.1.4  填充矩形分配:


通常情况下,部件是在左边 在默认的尺寸,通常是小于分配矩形 


如果选项-fill 被使用,部件会resize 它本身来填满分配矩形根据给定的值 下面的值是:

-fill => 'none' | 'x' | 'y' | 'both'


使用值 'x' 会resize 部件在水平方向,同样 'y' 会导致部件resize 在垂直方向。


使用-fill=>'both'  是一个好的方式来准确的查看 什么尺寸和位置分配给矩形,


因为'both' resize 部件在x和y方向

$mw->Button(-text => "TOP", -command => sub { exit })
  ->pack(-side => 'top', -fill => 'both');
 
$mw->Button(-text => "BOTTOM", -command => sub { exit })
  ->pack(-side => 'bottom', -fill => 'both');

$mw->Button(-text => "RIGHT", -command => sub { exit })
  ->pack(-side => 'right', -fill => 'both');

$mw->Button(-text => "LEFT", -command => sub { exit })
  ->pack(-side => 'left', -fill => 'both');


2.1.5  扩展分配矩形:

-expand 选项 操作分配矩形,不是在部件内部。  -expand相关的值是一个布尔值:

-expand => 1 | 0

给定一个真值,  分配举证 会扩展到任何剩余的空间,依赖部件被部署在哪个方向:


部件 部署在右边或者左边会扩展在水平方向,部件部署方向为top或者bottom 扩展为垂直方向。


2.1.6. Anchoring a Widget in Its Allocation Rectangle  锚定一个部件在他的分配矩阵


2.1.8  填充部件大小:


最终的方式迫使pack来定义部件的大小 来是用padding 选项。


第一个填充选项影响部件本身是通过增加它的默认的尺寸。


不同数量可以被追加在x和y方向,或者 也可以相同。


指定填充多少在x方向 使用-ipadx 选项:

-ipadx => amount

指定y方向填充 如下:

-ipady => amount


数量是一个数字是一个有效的屏幕距离, 我们会讨论正确的屏幕距离定义 在下面章节:


-ipadx 和-pady 选项 改变部件的尺寸在分配矩形被计算前。

-ipadx 增加指定的总量 指定给部件的right和left 边。


部件的总体宽度 是2的倍数增加。


-ipady  增加部件的top和bottom ,导致部件的总体高度 按的倍数

图2-23 显示-ipadx 和-ipady 选项如何影响一个按钮:



图2-23,Done1 按钮被创建带选项  -ipadx => 10, -ipady => 10


另外一种填充是插入到 窗体边际和分配矩形边际之间 , 通过 -padx and -pady 


-padx => amount
-pady => amount

使用-padx 和-pady 不影响部件的大小,但是它影响分配矩阵的大小。


它表现像是一个buffer 围绕在部件周围, 保护它接触到其他部件


图2-24 Done1 被创建带options -padx => 10, -pady => 10 



好的方式记住-ipadx/y and -padx/y的不同是 i代表内部  或者说是内部填充


2.1.8.1  有效的屏幕距离:


很多次 你会看到选项 需要指定的值 在屏幕单元( 或者是被称为一个正确的屏幕距离)


选项 -ipadx and -ipady 是这种类型的例子 


一个屏幕单元是一个数字 跟一个指定要使用的单位,如果没有指定,但是是像素 


表2 - 1显示了所有的可能性。


1.9  在parent中显示 相比你自己:


默认情况下,  当一个部件被部署,它是部署在创建它的区域。  有时候 


它需要显示一个部件在不同的区域 ,使用-in 选项:

-in => $otherwindow

它 放置新的小部件 在pack顺序最后 对于 $otherwindow 和显示它,


所有其他选项被指定 在pack仍旧适用:

3.1.10  与pack相关的方法:


有一些方法 用于连接在pack布局管理器,他们允许程序得到关于每个部件的信息 已经被部署的 

或者parent 部件 其他部件部署在parent里


2.1.10.1. Unpacking a widget 取消一个部件

To unpack a widget from a window or Frame, use the packForget method:

$widget->packForget( );

packForget 让部件消失, 不是不是被摧毁,但是它在被pack管理。


部件被删除从packinbg 顺序, 如果它后面repacked, 它出现在packing 顺序的尾部

2.1.10.2  检索pack信息:

返回一个所有配置信息的列表,使用packinfo:

@list = $widget->packInfo( );
 

列表的格式是键值对,第一个键值对在列表是 -in和当前窗口包含的$widget(通常是父窗体)


-in MainWindow=HASH(0x818dcf4) -anchor n -expand 0 -fill none -ipadx 0 -ipady 0 -padx 
10 -pady 10 -side left