Tkinter GUI布局Python

Tkinter GUI布局Python,python,tkinter,Python,Tkinter,我需要编写一个函数来生成一个框架,因为它是唯一的参数并且在下面显示的布局中添加了四个按钮。(按钮1和按钮2在红色框架中,另外两个在黄色框架中) 这只是家庭作业。多谢各位 import tkinter as tk def pressed(): print("Button Pressed!") def create_layout(frame): frame1 = frame(frame, bg = "red") frame1.pack(side = RIGHT,

我需要编写一个函数来生成一个
框架,因为它是唯一的参数
并且
在下面显示的布局中添加了四个按钮。
按钮1
按钮2
在红色框架中,另外两个在黄色框架中)

这只是家庭作业。多谢各位

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)
GUI布局组合和自动缩放需求决定。 Tkinter有许多构建块(小部件、框架、画布)和几个所谓的几何管理器{.pack()|.grid()|.place()}
用于将零件“放在一起”,放在更大的图中,背后有一些基本原理

这些命名的几何体管理器中的每一个都有助于实现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>-+  |   |
 |   |                            |  |                            |   |
 |   +----------------------------+  +----------------------------+   |
 |                                                                    |
 +--------------------------------------------------------------------+
通过这种方式,您可以在
框架
中自由设计UI,完全由您控制

 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>----------+|  |                            |   |
 |   |                            |  |                            |   |
 |   |                            |  +----------------------------+   |
 |   |                            |                                   |
 |   +----------------------------+                                   |  
 |                                                                    |
 +--------------------------------------------------------------------+
Where.place()可能有助于设计UI,
在哪里安排
小部件从左到右/从上到下不是这样,
有一个完整的像素布局控制
这在某些情况下受到热烈欢迎,
其中位图层必须逐像素满足,
例如,如果需要放置控件(按钮等)
在仪器(示波器、声纳)的位图图片上
并协调GUI和设备/流程之间的交互
+---框架-----------------------------------------------------+
|+--aRedFrame-------+|
|                                   |                            |   |
|                                   |                            |   |
|+--水平框架-----------+|||
|   | +-------------+            |  |                            |   |
|   | [             ]            |  |                            |   |
|   | [             ]            |  |                            |   |
|   | [             ]            |  |                            |   |
|   | [             ]            |  |                            |   |
|   | [             ]            |  |                            |   |
|   | [             ]            |  |                            |   |
|   | +-----+            |  |+----------+                |   |
|   |                            |  |[          ]    +----------+|   |
|   |                            |  |+--+    [          ]|   |
|   |                            |  |                +--+|   |
|   |                            |  |                            |   |
|   |       +-------------------+|  |                            |   |
|   |       [                   ]|  |                            |   |
|   |       +-----------+|  |                            |   |
|   |                            |  |                            |   |
|   |                            |  +----------------------------+   |
|   |                            |                                   |
|   +----------------------------+                                   |  
|                                                                    |
+--------------------------------------------------------------------+

没有好处:虽然有多个布局管理器可用,但公平地说,也要坚持这种做法,避免在同一父框架中使用多个几何管理器。如有必要,可以重新设计父子关系,以保持与相同父框架相关的所有小部件使用相同的布局几何管理器方法(所有
.pack()
或所有
.place()
,但不要混合使用)


本文本适用于从关于
Tkinter
code的入门级实践开始了解
Tkinter
的用户。鹰派实践者肯定会有许多更高层次的见解和无数的实践经验。答案并不想提供一个代码,而是基于这样一种信念:对驱动原理稍加了解可以帮助用户掌握一些概念,这些概念在面向语法的文档中并不明显(并且可能很难从其他(半)代码样本的反向工程中获得)最终确定的代码片段可能具有不兼容的布局策略动机)

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

我的建议是首先集中精力让你的红色和黄色框架工作,而不是别的。编写足够的代码,使它们显示在您想要的位置,并在调整窗口大小时具有适当的行为。您使用
pack
做了一个很好的选择,因为它非常适合从左到右或从上到下排列小部件

一旦你有工作,然后你可以专注于按钮。选择一个帧或另一个帧,集中精力让按钮在一个帧中工作。确保该框架内的小部件将该框架用作其父框架

最后,对剩余的帧进行处理,再次执行完全相同的操作。在所有情况下,我的建议是始终明确,并使用
属性。虽然依赖默认值是可以的,但在学习时,明确表示是很好的。

是的,@jonsharpe。如果你的
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
)
 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>----------+|  |                            |   |
 |   |                            |  |                            |   |
 |   |                            |  +----------------------------+   |
 |   |                            |                                   |
 |   +----------------------------+                                   |  
 |                                                                    |
 +--------------------------------------------------------------------+