Tkinter 的按钮布局？

Question

我想让我的按钮在窗口底部成为一个 2 x 2 的网格，在它们上方有一个画布，但是当我使用 .pack(side = 不管) 时，这些按钮总是看起来很奇怪。

我还希望按钮和画布具有相对大小，即 %，以便在调整窗口大小时按钮仍然构成正确的区域。

作为 tkinter 的新手，我不确定如何做到这一点，不胜感激。

   import tkinter
from tkinter import *

code = Tk()

def LAttack():
    print(something);
def HAttack():
    print(something);
def FField():
    print(something);
def Heal():
    print(something);
def Restart():
    print(something);

Attack1 = tkinter.Button(code,text = ("Light Attack"), command = LAttack)
Attack1.pack(side = LEFT)
Attack2 = tkinter.Button(code,text = ("Heavy Attack"), command = HAttack)
Attack2.pack(side = RIGHT)
Defense1 = tkinter.Button(code,text = ("Forcefield"), command = FField)
Defense1.pack(side = LEFT)
Defense2 = tkinter.Button(code,text = ("Heal"), command = Heal)
Defense2.pack(side = RIGHT)
Restart1 = tkinter.Button(code,text = ("Restart"), command = Restart)
Restart1.pack(side = TOP)

code.mainloop()

但我希望它看起来像这样： Mock up for GUI

Answer 1

我想让我的按钮在窗口底部成为一个 2 x 2 的网格，上面有一个画布，但是当我使用 .pack(side = whatever) 时，这些按钮似乎总是堆叠得很奇怪。

对我而言，这意味着您显然需要关注两个独立的区域：一个带有画布的顶部区域和一个带有按钮的底部区域。第一步是创建这两个区域。顶部使用画布，底部使用框架。

我假设您希望画布尽可能多地占用空间，并且按钮始终位于底部。对于这种安排，pack 最有意义。

下面为我们提供了一个程序，该程序在顶部有一个画布，在底部有一个框架来保存按钮。当您调整窗口大小时，按钮框架保留在底部，而画布将填充其余空间：

import tkinter as tk

root = tk.Tk()

canvas = tk.Canvas(root, background="white")
button_frame = tk.Frame(root)

button_frame.pack(side="bottom", fill="x", expand=False)
canvas.pack(side="top", fill="both", expand=True)

# <button code will be added here...>

root.mainloop()

现在我们可以专注于按钮。您想要 2x2 网格中的按钮（尽管您有 5 个按钮...？），所以自然的选择是使用 grid 而不是 pack。我们希望这些按钮位于底部框架中，因此我们将该框架作为按钮的父级或主控。

您还有些好奇地写道：“每当调整窗口大小时，按钮仍然构成正确的区域”，尽管您之前说过您希望它们位于底部。我假设您的意思是您希望它们位于右下角。

为此，我们将创建一个包含两行 三 列的网格。左边的列会是空的，而且会占用额外的空间来强制按钮在右边（当然，如果你愿意的话，你可以把东西放在这个列里）

这会创建四个按钮：

attack1 = tk.Button(button_frame, text="Light Attack")
attack2 = tk.Button(button_frame, text="Heavy Attack")
defense1 = tk.Button(button_frame, text="Forcefield")
defense2 = tk.Button(button_frame, text="Heal")

...这会导致第一列扩展以填充任何额外的空间：

button_frame.grid_columnconfigure(0, weight=1)

...这会将它们放在一个网格中（将小部件创建与小部件布局分开总是好的，因为它可以更容易地在代码中可视化布局）

attack1.grid(row=0, column=1, sticky="ew")
attack2.grid(row=0, column=2, sticky="ew")
defense1.grid(row=1, column=1, sticky="ew")
defense2.grid(row=1, column=2, sticky="ew")

最终结果是这样的：

调整大小时，按钮保持其相对位置：

总结

这样做的目的是表明您需要花几分钟将屏幕上的项目组织成逻辑组。有不同的布局工具可以解决不同的问题（grid、pack、place），大多数窗口都将受益于为您尝试解决的每种类型的布局问题使用正确的工具（pack 是适合水平和垂直布局，grid 适合网格，place 涵盖了一些需要像素完美控制的边缘情况。