Tkinter GUI布局Python

时间:2015-10-05 09:40:39

标签: python tkinter

我需要编写一个函数,使frame成为唯一的参数
,并在下面的布局中添加四个按钮。
Button1并且Button2在红框中,另外两个在黄框中

  +---------------------------------------+
  |                                       |
  |  [Button1]                            |
  |               [Button3]    [Button4]  |
  |  [Button2]                            |
  |                                       |
  +---------------------------------------+

这只是功课。谢谢。

import tkinter as tk


def pressed():

    print("Button Pressed!")


def create_layout(frame):


    frame1 = frame(frame, bg = "red")
    frame1.pack(side = RIGHT, fill = tk.BOTH)

    b = Button(frame, text='Button1', padx = 20, command=pressed)
    b.pack(pady = 20, padx = 20)
    c = Button(frame, text='Button2', padx = 20, command=pressed)
    c.pack(pady = 20, padx = 20)

    frame2 = frame(frame, bg = "yellow")
    frame2.pack(side = RIGHT, fill = tk.BOTH)

    button3 = tk.Button(frame, text="Button3", command=pressed)
    button3.pack(pady = 20, padx = 20)

    button4 = tk.Button(frame, text="Button4", command=pressed)
    button4.pack(pady = 20, padx = 20)

2 个答案:

答案 0 :(得分:1)

您的代码正确。做小部件布局的关键是有条不紊,不要试图一次解决所有问题。

我的建议是首先专注于让你的红色和黄色框架正常工作,而不是别的。编写足够的代码以使它们出现在您想要的位置,并在调整窗口大小时具有适当的行为。您已经使用pack做出了不错的选择,因为它非常适合从左到右或从上到下排列小部件的工作。

一旦你有了工作,那么你可以专注于按钮。选择一帧或另一帧,并专注于让按钮在一帧中工作。确保该框架内的窗口小部件使用该框架作为其父框架。

最后,继续处理剩下的帧,再做同样的事情。在所有情况下,我的建议是始终明确并使用side属性。虽然依靠默认值是可以的,但是在学习它时可以做到明确。

答案 1 :(得分:-2)

GUI布局组合和自动缩放要求决定。

Tkinter有许多构建模块(小部件,框架,画布)和几个所谓的几何管理器 { .pack() | .grid() | .place() } 到#34;将部件放在一起",进入更大的图片,背后有一些理由。

这些命名的几何管理器中的每一个都有助于实现Tkinter的共同行为 - 自动缩放(如果需要)整个GUI组合。每个都配备齐全的特定类型的布局组成。没有全能大师或"全能杰克",但每个人都有自己的优势适合特定的布局模型。

GUI布局需求非常不同,Tkinter方法有助于实现所需的外观模型,并允许(几乎)忘记单个组合元素的结果位置,边缘之间的许多内部关系和交叉依赖性,尺寸和缩放。

Where .pack() or .grid() may help:

 +--<Frame>-frame-----------------------------------------------------+
 |                                                                    |
 |   +-<Frame>-aYelFrame----------+  +-<Frame>-aRedFrame----------+   |
 |   |         side = tk.LEFT     |  |         side = tk.RIGHT    |   |
 |   |         fill = tk.BOTH     |  |         fill = tk.BOTH     |   |
 |   |  +----------------------+  |  |  +----------++----------+  |   |
 |   |  [                      ]  |  |  [          ][          ]  |   |
 |   |  [                      ]  |  |  [          ][          ]  |   |
 |   |  [                      ]  |  |  [          ][          ]  |   |
 |   |  [                      ]  |  |  [          ][          ]  |   |
 |   |  [                      ]  |  |  [          ][          ]  |   |
 |   |  [                      ]  |  |  [          ][          ]  |   |
 |   |  +-<Button>-------------+  |  |  [          ][          ]  |   |
 |   |  +----------------------+  |  |  [          ][          ]  |   |
 |   |  [                      ]  |  |  [          ][          ]  |   |
 |   |  [                      ]  |  |  [          ][          ]  |   |
 |   |  [                      ]  |  |  [          ][          ]  |   |
 |   |  [                      ]  |  |  [          ][          ]  |   |
 |   |  [                      ]  |  |  [          ][          ]  |   |
 |   |  [                      ]  |  |  [          ][          ]  |   |
 |   |  +-<Button>-------------+  |  |  +-<Button>-++-<Button>-+  |   |
 |   |                            |  |                            |   |
 |   +----------------------------+  +----------------------------+   |
 |                                                                    |
 +--------------------------------------------------------------------+

布局策略决定哪种方法或多或少都方便。

可以使用其他Tkinter几何管理器方法,而不是.pack(),例如的 .place()

aSampleButton = tk.Button( aRedFrame, text   = "aSampleButton", ... )
aSampleButton.place(                  x      =   0,  # in pixels - a Widget x position,
                                      y      =   0,  # in pixels - a Widget y position,
                                      width  = 100,  # in pixels - a Widget absolute width,
                                      height =  15,  # in pixels - a Widget absolute height
)

通过这种方式,您可以完全自由地在Frame范围内设计用户界面。

 Where .place() may help to design a UI,
                where arranging
                widgets left-to right / top-to-bottom is not the case,
                with a complete down-to-pixel layout control
                that is warmly welcome in cases,
                where a bitmap layer has to be met pixel-by-pixel,
                like if you need to place controls ( buttons et al )
                onto a bitmap picture of an instrument ( an Oscilloscope, Sonar )
                and mediate interactions between GUI and device / process

 +--<Frame>-frame-----------------------------------------------------+
 |                                   +-<Frame>-aRedFrame----------+   |
 |                                   |                            |   |
 |                                   |                            |   |
 |   +-<Frame>-aYelFrame----------+  |                            |   |
 |   | +-------------+            |  |                            |   |
 |   | [             ]            |  |                            |   |
 |   | [             ]            |  |                            |   |
 |   | [             ]            |  |                            |   |
 |   | [             ]            |  |                            |   |
 |   | [             ]            |  |                            |   |
 |   | [             ]            |  |                            |   |
 |   | +-<Button>----+            |  |+----------+                |   |
 |   |                            |  |[          ]    +----------+|   |
 |   |                            |  |+-<Button>-+    [          ]|   |
 |   |                            |  |                +-<Button>-+|   |
 |   |                            |  |                            |   |
 |   |       +-------------------+|  |                            |   |
 |   |       [                   ]|  |                            |   |
 |   |       +-<Button>----------+|  |                            |   |
 |   |                            |  |                            |   |
 |   |                            |  +----------------------------+   |
 |   |                            |                                   |
 |   +----------------------------+                                   |  
 |                                                                    |
 +--------------------------------------------------------------------+

Nota bene:虽然有几个可用的布局管理器,但是要坚持这样的做法是公平的,以及避免在其中使用多个几何管理器相同的父母框架。必要时,可能更愿意重新设计父子关系,以便保持与同一父框架相关的所有窗口小部件使用相同的布局几何管理器方法(所有.pack()或全部.place(),但是不要混合它们。)

本文适用于使用Tkinter代码开始了解Tkinter入门级练习的用户。 Hawkish的实践者肯定会有许多更高层次的见解和无数的实践经验。答案并没有提供代码的野心,但是有一种信念,即为驾驶原则带来一些启发可以帮助用户掌握概念,这些概念在面向语法的文档中并不那么直观(并且可能很难来自其他(半)最终代码片段的代码样本的逆向工程,可能存在不兼容的布局策略动机)