Tkinter 网格法

Question

我正在使用 Tkinter 为我的基于隐写术的计算机科学课程创建一个 GUI。我在窗口中的小部件上使用.grid() 函数来布置它们，但是我无法让这个特定的部分看起来像我想要的那样。

这是我的 GUI 目前的样子：http://imgur.com/LNEZtEL （或只是有错误的部分）。

我希望剩余的字符标签直接位于文本输入框的下方，但由于某种原因，第 4 行从框下方开始很大。如果我用位于西北的列和行来标记 GUI，它看起来像这样：http://imgur.com/a/V7dTW。

如果我缩小左侧的图像框，它看起来就像我想要的那样，但是我不希望图像这么小：http://imgur.com/a/0Dudu。

图像框的行跨度为 2，那么是什么导致第 4 行从文本输入框开始如此低的位置？我希望 GUI 大致如下所示：http://imgur.com/a/ck04A。

完整代码：

imageButton = Button(root, text="Add Image", command = add_image)
imageButton.grid(row = 2, columnspan = 2, sticky = W, padx = 30, pady = 20)
steg_widgets.append(imageButton)

image = Image.open("square.jpg")
image = image.resize((250,250))
photo = ImageTk.PhotoImage(image)
pictureLabel = Label(root, image = photo)
pictureLabel.image = photo
pictureLabel.grid(column = 0, row = 3, columnspan = 2, rowspan = 2, padx = 20, pady = (0, 20), sticky = NW)
steg_widgets.append(pictureLabel)

nameLabel = Label(root, text = "Brandon Edwards - OCR Computer Science Coursework 2016/2017")
nameLabel.grid(row = 0, column = 2, columnspan = 2, padx = (0, 20), pady = 10)
steg_widgets.append(nameLabel)

inputTextLabel = Label(root, text = "Enter text:")
inputTextLabel.grid(row = 2, column = 2, sticky = W)
steg_widgets.append(inputTextLabel)

startButton = Button(root, text="Go!", command = start_stega)
startButton.grid(row = 2, column = 2, sticky = E)
steg_widgets.append(startButton)

inputTextBox = Text(root, height = 10, width = 30)
inputTextBox.grid(row = 3, column = 2, sticky = NW)
steg_widgets.append(inputTextBox)

maxCharLabel = Label(root, text = "Remaining characters:")
maxCharLabel.grid(row = 4, column = 2, sticky = NW)
steg_widgets.append(maxCharLabel)

saveButton = Button(root, text="Save Image", command = save_image)
saveButton.grid(row = 2, column = 3, sticky = W)
steg_widgets.append(saveButton)

Answer 1

我建议将您的 UI 分解为逻辑部分，并分别对每个部分进行布局。

例如，您显然有两个不同的部分：左侧的图像和按钮，以及右侧的其他小部件。首先为这两个组创建容器：

import Tkinter as tk
...
left_side = tk.Frame(root)
right_side = tk.Frame(root)

由于它们是并排的，pack 是最简单的布局方式：

left_side.pack(side="left", fill="y", expand=False)
right_side.pack(side="right", fill="both", expand=True)

接下来，您可以只关注一侧。您可以使用pack 或grid。这里使用grid 进行说明：

image = tk.Canvas(left_side, ...)
button = tk.Button(left_side, ...)

left_side.grid_rowconfigure(0, weight=1)
left_side.grid_columnconfigure(0, weight=1)
image.grid(row=0, column=0, sticky="nw")
button.grid(row=1, column=0, sticky="n")

最后，在右侧工作。由于小部件从上到下堆叠，pack 是自然选择：

l1 = tk.Label(right_side, text="Enter text:")
l2 = tk.Label(right_side, text="Remaining characters")
text = tk.Text(right_side)
l1.pack(side="top", fill="x")
text.pack(side="top", fill="both", expand=True)
l2.pack(side="top", fill="x")