需要 tkinter GUI 的建议 - 按钮定位不一致

Question

请看下面的sn-p：

import tkinter as tk


# Grid variables
width = 6
mid_left = int(width/2 - 1)
mid_right = int(width/2)
pady_5 = 5


# Main window
main_window = tk.Tk()
main_window.title('Controller')


# Top frame
top_frame = tk.Frame(main_window)
top_frame.grid(row=0, pady=pady_5)

label_0 = tk.Label(top_frame, text='Arm Movement')
label_0.grid(row=0, columnspan=width, pady=pady_5)

button_1 = tk.Button(top_frame, text='Move to Center Position')
button_1.grid(row=1, column=mid_left, sticky='e', pady=pady_5)

button_2 = tk.Button(top_frame, text='Move to Last Position')
button_2.grid(row=1, column=mid_right, sticky='w', pady=pady_5)

entry_3_1 = tk.Entry(top_frame)
entry_3_1.grid(row=2, column=mid_left, pady=pady_5)
label_3_1 = tk.Label(top_frame, text='X:')
label_3_1.grid(row=2, column=mid_left-1, sticky='e', pady=pady_5)

entry_3_2 = tk.Entry(top_frame)
entry_3_2.grid(row=2, column=mid_right+1, pady=pady_5)
label_3_2 = tk.Label(top_frame, text='Y:')
label_3_2.grid(row=2, column=mid_right, sticky='e', pady=pady_5)

button_3 = tk.Button(top_frame, text='Move!')
button_3.grid(row=2, column=mid_right+2, sticky='w', pady=pady_5)


# Center frame
center_frame = tk.Frame(main_window)
center_frame.grid(row=1, pady=pady_5)

label_0 = tk.Label(center_frame, text='Execution')
label_0.grid(row=0, columnspan=width, pady=pady_5)

button_1 = tk.Button(center_frame, text='Quick Routine')
button_1.grid(row=1, column=mid_left, sticky='e', pady=pady_5)

button_2 = tk.Button(center_frame, text='Full Routine')
button_2.grid(row=1, column=mid_right, sticky='w', pady=pady_5)


# Bottom frame
bottom_frame = tk.Frame(main_window)
bottom_frame.grid(row=2, pady=pady_5)

label_0 = tk.Label(bottom_frame, text='Reconstruction')
label_0.grid(row=0, columnspan=width, pady=pady_5)

button_1 = tk.Button(bottom_frame, text='Quick')
button_1.grid(row=1, column=mid_left, sticky='e', pady=pady_5)

button_2 = tk.Button(bottom_frame, text='Full')
button_2.grid(row=1, column=mid_right, sticky='w', pady=pady_5)


# Open main window
main_window.mainloop()

如果您运行此示例，您会看到最上面的两个按钮“移至中心位置”和“移至最后位置”不像其他按钮那样居中。此外，输入字段似乎是任意放置的，即使它们应该彼此相邻并居中。是什么导致了这些不一致，我该如何解决？

或者有没有比使用grid 方法更好的方法开始 来放置GUI 元素？我遇到了“愚蠢”的问题，例如在偶数和奇数的网格列之间“必须决定”：选择偶数列（例如上面的示例）并且您不能居中元素（因为没有中心列) 与选择奇数列，您不能将两个元素并排居中。使用 pack 方法很快就失宠了，因为它太有限了。

更新：只是想说明，无论如何调整代码，grid 方法中似乎都有一层不可见的额外代码，它可以任意移动元素。似乎不可能获得干净、可靠的定位。看看这里的按钮位置，特别是使用sticky='e' 或='w' 对按钮Move to Center Position 和Move to Last Position 的定位完全没有效果：

import tkinter as tk


# Grid variables
width = 6
mid_left = int(width/2 - 1)
mid_right = int(width/2)
padx_5 = 10
pady_5 = 5


# Main window
main_window = tk.Tk()
main_window.title('Controller')


# Top frame
top_frame = tk.Frame(main_window)
top_frame.grid(row=0, pady=pady_5)

label_0 = tk.Label(top_frame, text='Arm Movement')
label_0.grid(row=0, columnspan=width, pady=pady_5)

button_1 = tk.Button(top_frame, text='Move to Center Position')
button_1.grid(row=3, column=mid_right, padx=padx_5, pady=pady_5)

button_2 = tk.Button(top_frame, text='Move to Last Position')
button_2.grid(row=3, column=mid_left, padx=padx_5, pady=pady_5)

label_3_1 = tk.Label(top_frame, text='X [cm]:')
label_3_1.grid(row=1, column=mid_left-1, sticky='e', padx=(20, 0), pady=pady_5)
entry_3_1 = tk.Entry(top_frame)
entry_3_1.grid(row=1, column=mid_left, pady=pady_5)

label_3_2 = tk.Label(top_frame, text='Y [cm]:')
label_3_2.grid(row=2, column=mid_left-1, sticky='e', padx=(20, 0), pady=pady_5)
entry_3_2 = tk.Entry(top_frame)
entry_3_2.grid(row=2, column=mid_left, pady=pady_5)

button_3 = tk.Button(top_frame, text='Move!')
button_3.grid(row=1, rowspan=2, column=mid_left+1, sticky='w', padx=padx_5, pady=pady_5)


# Center frame
center_frame = tk.Frame(main_window)
center_frame.grid(row=1, pady=pady_5)

label_0 = tk.Label(center_frame, text='Execution')
label_0.grid(row=0, columnspan=width, pady=pady_5)

button_1 = tk.Button(center_frame, text='Quick Routine')
button_1.grid(row=1, column=mid_left, padx=padx_5, pady=pady_5)

button_2 = tk.Button(center_frame, text='Full Routine')
button_2.grid(row=1, column=mid_right, padx=padx_5, pady=pady_5)


# Bottom frame
bottom_frame = tk.Frame(main_window)
bottom_frame.grid(row=2, pady=pady_5)

label_0 = tk.Label(bottom_frame, text='Reconstruction')
label_0.grid(row=0, columnspan=width, pady=pady_5)

button_1 = tk.Button(bottom_frame, text='Quick')
button_1.grid(row=1, column=mid_left, padx=padx_5, pady=pady_5)

button_2 = tk.Button(bottom_frame, text='Full')
button_2.grid(row=1, column=mid_right, padx=padx_5, pady=pady_5)


# Open main window
main_window.mainloop()

Answer 1

由于您将两个按钮放在第 2 行小部件的同一框架 (top_frame) 中，因此它们的位置会受到这些小部件的影响。

您可以使用另一个框架来按住两个按钮并将该框架放在top_frame 的第 1 行：

# frame for the two buttons
top_inner_frame = tk.Frame(top_frame)
top_inner_frame.grid(row=1, column=0, columnspan=width)

button_1 = tk.Button(top_inner_frame, text='Move to Center Position')
button_1.pack(size="left", pady=pady_5)

button_2 = tk.Button(top_inner_frame, text='Move to Last Position')
button_2.pack(size="left", pady=pady_5)

Answer 2

除非我误解这是因为您使用的是 .grid() 函数。

网格很棒，因为它很简单，但它并不意味着精确放置。还有两个用于放置小部件的函数，.pack() 和 .place()。我怀疑您知道 .pack() 和 .grid() 并认为网格用于更具体的放置，因为 pack 几乎无法控制放置/间距。 .place() 几乎绝对是您正在寻找的方法。

.place() 代替 grid 接受三个参数，x 值、y 值和锚点位置。您甚至可以使用相对 x 和 y 值，因此无论窗口大小如何，它都将始终出现在窗口的同一位置！我真的很喜欢这种方法。

例如

your_widget.place(relx=0.5, rely=0.5, anchor=CENTER) #places widget dead center of the window, with an anchor in the middle of the widget

您也可以从小部件上的许多不同位置进行锚定，例如，在上面的代码中，anchor=NW 而不是 anchor=CENTER 将使小部件的左上角与窗口的中心对齐。

Answer 3

您的第一个版本的代码就像这个带有嵌套表（框架）的 html 表（根）。

元素不会随机移动。它们在同一框架内相互依赖。 每个框架都是一个独立的系统，可以根据其单元格的内容进行调整。 框架相互独立，但依赖于根窗口。

两栏一帧就够了。一个系统适用于所有元素。

试试这样的：

      |      col 0     |     col 1     |
------|----------------------------------
row 0 |           Arm Movement         | columnspan=2
------|----------------------------------
row 1 | Move to Center |  Move to Last | sticky='ew' for both
------|----------------------------------
row 2 |       X:       |       Y:      | sticky='ew' for both
------|----------------------------------
row 3 |    Entry X     |    Entry Y    |
------|----------------------------------
row 4 |               Move!            | columnspan=2
------|----------------------------------
row 5 |            Execution           |
------|----------------------------------
row 6 | Quick Routine  |  Full Routine | 
------|----------------------------------
row 7 |           Reconstruction       |
------|----------------------------------
row 8 |          Quick | Full          | 
------|----------------------------------

Entry X: sticky='w' and padx
Entry Y: sticky='e' and padx

Answer 4

默认情况下，每列的宽度刚好足以容纳其内容。你没有做任何事情来改变它。因此，第 2 列和第 3 列不会位于 6 列框架的中心。

这是top_frame 中网格单元的可视化。注意：第 0 列不可见，因为它的宽度为 0。

您可以通过强制所有列的大小相同来轻松验证这一点。当你这样做时，按钮将完全居中。当然，您的其他一些小部件不会是您所期望的。

要将列设置为统一宽度，请为uniform 属性赋予它们相同的值。值是什么并不重要，只要它是相同的。这必须在创建 top_frame 之后完成。

虽然 tkinter 文档暗示 columnconfigure 接受单个索引，但 tcl/tk 文档清楚地表明您可以提供索引列表。由于width 表示代码中的总列数，我们可以使用以下命令将列 0、1、2、3、4 和 5 配置为 uniform 值为 1：

top_frame.grid_columnconfigure(tuple(range(width)), uniform=1)

注意：tkinter 对此函数有两个名称：columnconfigure 和 grid_columnconfigure。一个只是另一个的别名。

这是具有统一列宽的框架的可视化：

我猜你不希望所有的列都具有相同的宽度，因为这会迫使 UI 比它需要的更宽。如果我正在编写这段代码，我会为带有条目小部件的行使用单独的框架，这似乎是让你的设计在非常窄和非常宽的列上都被抛弃了。

文档

网格算法的规范描述以及各种网格命令（grid、grid_columnconfigure 等）的可用选项可在 tcl/tk man pages for the grid command。关于如何将 tcl/tk 手册页翻译成 tkinter 文档的说明可以在官方 python tkinter 文档的标题为Tkinter Life Preserver 的部分中找到。