Chinaunix首页 | 论坛 | 博客

ncoderchaoswong.blog.chinaunix.net

首页　| 　博文目录　| 　关于我

ncoder

  • 博客访问： 73443
  • 博文数量： 26
  • 博客积分： 628
  • 博客等级： 中士
  • 技术积分： 315
  • 用 户 组： 普通用户
  • 注册时间： 2008-04-22 11:57
文章分类

全部博文（26）

文章存档

2012年（4）

2011年（19）

2010年（3）

我的朋友
最近访客
推荐博文
相关博文
[tkinter] think in tkinter (10) 最终篇

分类： Python/Ruby

2011-04-29 15:38:27


在本程序中, 我们来讨论几个pack()用于布局的参数.

  * side
  * fill
  * expand
  * anchor

这个程序与本系列的其他程序不同. 它不需要你通过读源码来明白代码实现了哪些特性. 你只需要运行这个程序.

本程序的目的在于向你展示一下这些参数的不同效果. 此函数可以让你组合不同的pack参数来查看实际的效果.

*关于pack参数的潜在含义*

为了明白我们是如何控制容器中的控件的, 我们就要明白pack布局管理使用了一种被称为"洞"的排列模型. 它将每个容器看作是一个洞, 我们将控件塞进洞里.

在讨论容器中的控件定位前, 有几个概念有必要知道:

  * 未分配的空间(它就是洞)
  * 分配但没使用的空间
  * 分配并使用了的空间

当你pack一个控件时, 比如一个按钮, 它问题被塞到洞的四个边上去. "side"参数来指定塞到哪条边上. 比如, 如果我们指定"side=LEFT", 则控件会被塞到(定位到)洞的最左边.

当一个控件被塞进来后, 它就被分配了一整条边, 即使它用不了那么多. 想象一下我们将一个小按钮X塞到容器的最左边上, 会如下图所示:

                  -------------------
    claimed but   |   |             |
    unused -----> |   |   cavity    |
                  |   | (unclaimed) |
                  |___|             |
    claimed and   |   |             |
    used -------> | X |             |
                  |___|             |
                  |   |             |
    claimed but   |   |             |
    unused -----> |   |             |
                  |   |             |
                  -------------------

这个洞(未分配的区域)现在就在控件的右边. 控件X分配到了整个左边, 一个足够容纳它的长条. 但因为控件X太小, 所以它实际上不会用掉所有分配到的空间. 它只用掉足够显示它的一部分空间.

如你所见, 当控件X需要显示自身时, 它就会申请足够大的空间. 如果我们指定了"expand=YES"参数, 那么它就会申请所有可用的区域. 洞中就不会再有剩余的空间了. 注意 这不是说控件X会*用掉*整个区域. 它仍然只会用到它所需要的一小部分空间.

如果一个控件申请到了多于它所能用的空间, 那么它将会:
  * 它会因在未分配空间的某个角落
  * 它会增长到填充满所有未分配的区域

如果我们想让它填充整个未分配的区域, 我们就要用到"fill"参数, 它指定了控件如何填充未使用的区域, 还有朝哪个方向进行填充.

  * "fill=NONE" 表示不进行填充
  * "fill=X" 沿X轴填充
  * "fill=Y" 沿Y轴填充
  * "fill=BOTH" 沿两个方向填充

如果我们想让它固定在未分配区域的某个位置上, 我们可以使用"anchor"参数, 它指定了控件在它分配到的区域中所呆的位置. anchor参数的取值很像罗盘. "N"表示"北"(也就是中上部). "NE"表示"东北"(也就是右上角), "CENTER"表示分配区域的正中间. 以此类推.

*运行程序*

现在, 运行程序. 你不必看代码. 只运行程序, 然后体会不同的pack参数对三个按钮的影响.

按钮A的容器是一个水平的洞 -- 它与按钮一样高.

按钮B的容器是一个竖直的洞 -- 它与按钮一样宽.

按钮C的容器是一个很大的洞 -- 它比按钮的宽和高都大.

如果在某个配置下, 按钮的位置与你想的不一样, 那么尝试去解释一下为啥会这样.

最后...

*一个有用的调试技巧*

注意pack是一个很麻烦的工作, 因为控件的位置会依赖于之前已有的控件. 也就是说, 如果有控件被pack到左侧了, 那么接下来的控件将会被pack到右侧. 而如果有控件pack到顶部了, 那么接下来的控件会被pack到底部. 这个很容易晕.

这里提供一个很有用的小技巧. 当你在布局时遇到了问题 -- 控件不按你想的布局 -- 那就给你的容器们一个不同的背景色, 比如:
bg='red' or bg='cyan' or bg='tan'

... 或黄色, 蓝色等等.

这会让你很快看到容器的排列方式. 一般这会就解决你的问题了.

  1. from Tkinter import *

  3. class MyApp:
  4.     def __init__(self, parent):
  5.         
  6.         #------ constants for controlling layout of buttons ------
  7.         button_width = 6         
  8.         button_padx = "2m"
  9.         button_pady = "1m"
  10.         buttons_frame_padx = "3m"
  11.         buttons_frame_pady = "2m"         
  12.         buttons_frame_ipadx = "3m"
  13.         buttons_frame_ipady = "1m"
  14.         # -------------- end constants ----------------


  17.         # set up Tkinter variables, to be controlled by the radio buttons
  18.         self.button_name = StringVar()
  19.         self.button_name.set("C")
  20.         
  21.         self.side_option = StringVar()
  22.         self.side_option.set(LEFT)
  23.         
  24.         self.fill_option = StringVar()
  25.         self.fill_option.set(NONE)

  27.         self.expand_option = StringVar()
  28.         self.expand_option.set(YES)
  29.         
  30.         self.anchor_option = StringVar()        
  31.         self.anchor_option.set(CENTER)
  32.         
  33.         
  34.         # -------------- end constants ----------------
  35.         
  36.         self.myParent = parent
  37.         self.myParent.geometry("640x400")

  39.         ### Our topmost frame is called myContainer1
  40.         self.myContainer1 = Frame(parent) ###
  41.         self.myContainer1.pack(expand=YES, fill=BOTH)


  44.         ### We will use HORIZONTAL (left/right) orientation inside myContainer1.
  45.         ### Inside myContainer1, we create control_frame and demo_frame.
  46.         
  47.         # control frame - basically everything except the demo frame
  48.         self.control_frame = Frame(self.myContainer1) ###
  49.         self.control_frame.pack(side=LEFT, expand=NO, padx=10, pady=5, ipadx=5, ipady=5)     
  50.         
  51.         # inside control_frame we create a header label
  52.         # and a buttons_frame at the top,
  53.         # and demo_frame at the bottom
  54.         
  55.         myMessage="This window shows the effects of the \nexpand, fill, and anchor packing options.\n"
  56.         Label(self.control_frame, text=myMessage, justify=LEFT).pack(side=TOP, anchor=W)
  57.         
  58.         # buttons frame
  59.         self.buttons_frame = Frame(self.control_frame) ###
  60.         self.buttons_frame.pack(side=TOP, expand=NO, fill=Y, ipadx=5, ipady=5)

  62.         # demo frame
  63.         self.demo_frame = Frame(self.myContainer1) ###
  64.         self.demo_frame.pack(side=RIGHT, expand=YES, fill=BOTH)             


  67.         ### Inside the demo frame, we create top_frame and bottom_frame.
  68.         ### These will be our demonstration frames.                         
  69.         # top frame
  70.         self.top_frame = Frame(self.demo_frame)
  71.         self.top_frame.pack(side=TOP, expand=YES, fill=BOTH) ###

  73.         # bottom frame
  74.         self.bottom_frame = Frame(self.demo_frame,
  75.             borderwidth=5,     relief=RIDGE,
  76.             height=50,
  77.             bg="cyan",
  78.             ) ###    
  79.         self.bottom_frame.pack(side=TOP, fill=X)


  82.         ### Now we will put two more frames, left_frame and right_frame,
  83.         ### inside top_frame. We will use HORIZONTAL (left/right)
  84.         ### orientation within top_frame.
  85.         
  86.         # left_frame        
  87.         self.left_frame = Frame(self.top_frame,    background="red",
  88.             borderwidth=5,     relief=RIDGE,
  89.             width=50,
  90.             ) ###        
  91.         self.left_frame.pack(side=LEFT, expand=NO, fill=Y)


  94.         ### right_frame
  95.         self.right_frame = Frame(self.top_frame, background="tan",
  96.             borderwidth=5,     relief=RIDGE,
  97.             width=250
  98.             )
  99.         self.right_frame.pack(side=RIGHT, expand=YES, fill=BOTH)     


  102.         # now put a button in each of the interesting frames
  103.         button_names = ["A", "B", "C"]    
  104.         side_options = [LEFT, TOP, RIGHT, BOTTOM]    
  105.         fill_options = [X, Y, BOTH, NONE]
  106.         expand_options = [YES, NO]
  107.         anchor_options = [NW, N, NE, E, SE, S, SW, W, CENTER]
  108.         
  109.     
  110.         self.buttonA = Button(self.bottom_frame, text="A")
  111.         self.buttonA.pack()
  112.         self.buttonB = Button(self.left_frame, text="B")
  113.         self.buttonB.pack()
  114.         self.buttonC = Button(self.right_frame, text="C")
  115.         self.buttonC.pack()    
  116.         self.button_with_name = {"A":self.buttonA, "B":self.buttonB, "C":self.buttonC}    

  118.         # now we some subframes to the buttons_frame
  119.         self.button_names_frame = Frame(self.buttons_frame, borderwidth=5)
  120.         self.side_options_frame = Frame(self.buttons_frame, borderwidth=5)
  121.         self.fill_options_frame = Frame(self.buttons_frame, borderwidth=5)
  122.         self.expand_options_frame = Frame(self.buttons_frame, borderwidth=5)
  123.         self.anchor_options_frame = Frame(self.buttons_frame, borderwidth=5)

  125.         self.button_names_frame.pack( side=LEFT, expand=YES, fill=Y, anchor=N)
  126.         self.side_options_frame.pack( side=LEFT, expand=YES, anchor=N)        
  127.         self.fill_options_frame.pack( side=LEFT, expand=YES, anchor=N)
  128.         self.expand_options_frame.pack(side=LEFT, expand=YES, anchor=N)
  129.         self.anchor_options_frame.pack(side=LEFT, expand=YES, anchor=N)
  130.                     
  131.         Label(self.button_names_frame, text="\nButton").pack()
  132.         Label(self.side_options_frame, text="Side\nOption").pack()
  133.         Label(self.fill_options_frame, text="Fill\nOption").pack()
  134.         Label(self.expand_options_frame, text="Expand\nOption").pack()
  135.         Label(self.anchor_options_frame, text="Anchor\nOption").pack()        
  136.         
  137.         for option in button_names:
  138.             button = Radiobutton(self.button_names_frame, text=str(option), indicatoron=1,
  139.                 value=option, command=self.button_refresh, variable=self.button_name)
  140.             button["width"] = button_width
  141.             button.pack(side=TOP)

  143.         for option in side_options:
  144.             button = Radiobutton(self.side_options_frame, text=str(option), indicatoron=0,
  145.                 value=option, command=self.demo_update, variable=self.side_option)
  146.             button["width"] = button_width
  147.             button.pack(side=TOP)
  148.                                 
  149.         for option in fill_options:
  150.             button = Radiobutton(self.fill_options_frame, text=str(option), indicatoron=0,
  151.                 value=option, command=self.demo_update, variable=self.fill_option)
  152.             button["width"] = button_width
  153.             button.pack(side=TOP)

  155.         for option in expand_options:
  156.             button = Radiobutton(self.expand_options_frame, text=str(option), indicatoron=0,
  157.                 value=option, command=self.demo_update, variable=self.expand_option)
  158.             button["width"] = button_width
  159.             button.pack(side=TOP)
  160.     
  161.         for option in anchor_options:
  162.             button = Radiobutton(self.anchor_options_frame, text=str(option), indicatoron=0,
  163.                 value=option, command=self.demo_update, variable=self.anchor_option)
  164.             button["width"] = button_width
  165.             button.pack(side=TOP)

  167.         self.cancelButtonFrame = Frame(self.button_names_frame)
  168.         self.cancelButtonFrame.pack(side=BOTTOM, expand=YES, anchor=SW)
  169.         
  170.         self.cancelButton = Button(self.cancelButtonFrame,
  171.             text="Cancel", background="red",
  172.             width=button_width,
  173.             padx=button_padx,
  174.             pady=button_pady
  175.             )                
  176.         self.cancelButton.pack(side=BOTTOM, anchor=S)
  177.         

  179.         
  180.         self.cancelButton.bind("", self.cancelButtonClick)
  181.         self.cancelButton.bind("", self.cancelButtonClick)
  182.         
  183.         # set up the buttons in their initial position
  184.         self.demo_update()


  187.     def button_refresh(self):
  188.         button = self.button_with_name[self.button_name.get()]
  189.         properties = button.pack_info()
  190.         self.fill_option.set ( properties["fill"] )
  191.         self.side_option.set ( properties["side"] )
  192.         self.expand_option.set( properties["expand"] )
  193.         self.anchor_option.set( properties["anchor"] )


  196.     def demo_update(self):
  197.         button = self.button_with_name[self.button_name.get()]
  198.         button.pack(fill=self.fill_option.get()
  199.             , side=self.side_option.get()
  200.             , expand=self.expand_option.get()
  201.             , anchor=self.anchor_option.get()
  202.             )
  203.         
  204.         
  205.     def cancelButtonClick(self, event):
  206.         self.myParent.destroy()


  209. root = Tk()
  210. myapp = MyApp(root)
  211. root.mainloop()
阅读(1014) | 评论(0) | 转发(0) |
0

上一篇：[tkinter] think in tkinter (9)

下一篇：ubuntu下的wpa上网

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6