布局 - Tkinter - 将按钮组合在一起

Question

我是Tkinter的新手，我正在制作一个非常简单的GUI。来自JavaFX背景我发现它有点令人困惑，因为我不能将我的按钮位置放在坐标上。

这是我的实际代码：

class MoveRobot(Frame):

grid_counter = 0

def __init__(self):
    Frame.__init__(self)
    self.master.title("Control Robot")
    self.master.geometry("400x400")
    self.master.rowconfigure(0, weight=1)
    self.master.columnconfigure(0, weight=1)
    self.grid(sticky=W + E + N + S)

    self.list_box = Listbox(self)
    self.list_box.grid(rowspan=4, sticky=W + E + N + S)

    self.button1 = Button(self, text="UP", command=self.button_up)
    self.button1.grid(row=0, column=1, columnspan=2, sticky=W + E + N + S)

    self.button2 = Button(self, text="DOWN", command=self.button_down)
    self.button2.grid(row=1, column=1, columnspan=2, sticky=W + E + N + S)

    self.button3 = Button(self, text="LEFT", command=self.button_left)
    self.button3.grid(row=2, column=1, columnspan=2, sticky=W + E + N + S)

    self.button4 = Button(self, text="RIGHT", command=self.button_right)
    self.button4.grid(row=3, column=1, columnspan=2, sticky=W + E + N + S)

    self.button_cancel = Button(self, text="Remove Last", command=self.button_remove_last)
    self.button_cancel.grid(row=4, columnspan=2, sticky=W + E + N + S)

    self.button_cancel = Button(self, text="Clear", command=self.button_clear)
    self.button_cancel.grid(row=5, columnspan=2, sticky=W + E + N + S)

    self.button_compile = Button(self, text="Compile", command=self.button_compile)
    self.button_compile.grid(row=6, columnspan=2, sticky=W + E + N + S)

    self.rowconfigure(1, weight=1)
    self.columnconfigure(1, weight=1)

#controller code is removed because unnecessary

def main():
    MoveRobot().mainloop()

if __name__ == "__main__":
    main()  

以下是我创建的GUI。

但是，我无法将“UP”，“DOWN”，“LEFT”和“RIGHT”按钮组合在一起。我试图查看论坛和网站，但我找不到解决方案。它应该非常简单，因为它只是一个布局问题。

我想要的输出应该是这样的......

任何人都可以提供帮助吗？我希望这个问题对其他人也有好处，因为我不知道如何使用Tkinter，我无法通过网络找到解决方案。

提前谢谢。

Answer 1

解决布局问题的技巧是将UI分解为多个部分，并一次关注一个部分。在你的情况下，我看到三个部分：左边的列表框，右边的一组按钮，以及底部的一组按钮。

由于你是专门询问右边的按钮，我将在这个答案中解决这个问题。

在我看来，最简单的解决方案是为按钮创建一个框架，然后将按钮打包在框架的顶部：

  PyEval_AcquireLock();
  Py_Finalize();

有了它，无论你把那个框架放在哪里，按钮总是在顶部。在您的情况下，您可以将列表框和框架放在同一行：

button_frame = Frame(self)
self.button1 = Button(button_frame, ...)
self.button2 = Button(button_frame, ...)
self.button3 = Button(button_frame, ...)
self.button4 = Button(button_frame, ...)

self.button1.pack(side="top", fill="x")
self.button2.pack(side="top", fill="x")
self.button3.pack(side="top", fill="x")
self.button4.pack(side="top", fill="x")

Answer 2

您可能需要稍微重组网格...
在这种情况下，列表框占用的行数与按钮数量相同。因此行的高度将均匀地分散在列表框的高度上，并且按钮沿着列表框高度均匀分布。但是，如果您希望按钮组合在顶部，则最后一个按钮后面的行必须“拉伸”以占用额外空间。
也许这个（笨拙的）ascii-art将证明...
--------- | lb | Box 1 (row 1) | lb | Box 2 (row 2) | lb | Box 3 (row 3) | lb | xxxxx (row 4) | lb | xxxxx (still row 4) {--------- {1}}
解决方案是 Other boxes！
这将告诉tkinter如果有一个额外的空间可以展开，如何扩展行。
这是必要的，因为如果一行是空的，我相信tkinter会自动认为它不应该存在，将其缩小为空并伸展其他行。
在这种情况下，将列表框的行数增加1，然后调用rowconfigure 4是您创建的新（空！）行，self.rowconfigure(4, weight=1)告诉tkinter扩展一个相对单位，如果您有多个weight并且可能希望快速拥有一个展开double，这将非常有用。
附：你需要将其他按钮向下移动1！