Tkinter 布局未将按钮放置在正确的位置

Question

我正在尝试使用 Python Tkinter 制作图像查看器，作为我正在参加的课程的一部分，但我的代码遇到了一些问题。

我的问题在于第一张图片中前进和退出按钮的定位，该图片解释了屏幕下的这个

我多次尝试阅读和调试代码，甚至查看了课程中的源代码，但我似乎仍然找不到问题。您有什么建议或认识到我可能错过的任何错误吗？任何帮助将不胜感激。谢谢！

这是所有代码：

#importing files
from tkinter import *

from PIL import ImageTk,Image

#the start of the program

root = Tk()

root.title("Image Viewer")

root.iconbitmap("E:\Marwan\PROGRAMMING\learning 
py\Tkinter\Projects\#2 Image Viewer\image viewer.ico")

#Image used
my_img1 = ImageTk.PhotoImage(Image.open("E:/Marwan\IMAGES/ai 
images/3.png"))
my_img2 = 
ImageTk.PhotoImage(Image.open("E:\Marwan\IMAGES\megory2.PNG"))
my_img3 = 

ImageTk.PhotoImage(Image.open("E:\Marwan\IMAGES\marwan.JPG"))
my_img4 = ImageTk.PhotoImage(Image.open("E:/Marwan\IMAGES/ai 
images/ff.png"))
my_img5 = ImageTk.PhotoImage(Image.open("E:/Marwan/IMAGES/ai 
images/55.png"))
my_img6 = ImageTk.PhotoImage(Image.open("E:/Marwan/IMAGES/ai 
images/77.png"))

#list of the images
image_list = [my_img1,my_img2,my_img3,my_img4, my_img5,my_img6]
#previwing the images at the first time
my_label = Label(image=my_img1)
my_label.grid(row=0, column=0)

#function of the forward button
def forward(img_num):
    #globaling the vars
    global my_label
global button_forward
global button_back
#forgetting the last img
my_label.grid_forget()
#previewing the current img
my_label = Label(image=image_list[img_num-1])
#commanding the buttons
button_forward = Button(root, text='>>', command= lambda: 
forward(img_num+1))
button_back = Button(root, text='<<', command= lambda: 
back(img_num-1))
#disabling the forward button at the last img
if img_num == 5:
    button_forward = Button(root, text='>>', state=DISABLED) 
#gridding the widgets and appears it   
my_label.grid(row=0,column=0,columnspan=3)
button_forward.grid(row=1, column=2)
button_back.grid(row=1, column=0)


#function of the forward button
def back(img_num):
    global my_label
    global button_forward
    global button_back
    
    my_label.grid_forget()
    my_label = Label(image=image_list[img_num-1])
    button_forward = Button(root, text='>>', command= lambda: 
    forward(img_num+1))
    button_back = Button(root, text='<<', command= lambda: 
    back(img_num-1))

if img_num == 5:
    button_forward = Button(root, text='>>', state=DISABLED) 
    
my_label.grid(row=0,column=0,columnspan=3)
button_forward.grid(row=1, column=2)
button_back.grid(row=1, column=0)




#Buttons of the first img
button_back = Button(root, text='<<',command= back, 
state=DISABLED)

button_exit = Button(root, text='Exit Program', 
command=root.quit)

button_forward = Button(root, text='>>', command= lambda: 
forward(2))

#gridding the widgets and appears it
button_back.grid(row=1, column=0)
button_exit.grid(row=1, column=1)

button_forward.grid(row=1, column=2)
root.mainloop()

Answer 1

在您的forward()和back()以及函数中，您已使用以下命令将columnspan设置为3：

my_label.grid(row=0,column=0,columnspan=3)

但是，当您第一次加载图像时，您不会设置columnspan值。您的代码如下所示：

my_label = Label(image=my_img1)
my_label.grid(row=0, column=0)

这就是为什么布局不仅仅适用于第一张图像。要修复它，只需设置 columnspan 值即可：

my_label = Label(image=my_img1)
my_label.grid(row=0,column=0,columnspan=3)

Answer 2

我注意到在你的前进和后退功能中你有这个。因此，当按后退/前进时，它会按您的预期工作。

my_label.grid(row=0,column=0,columnspan=3)

但是第一次加载图像时，你会遇到这样的情况：

#previwing the images at the first time
my_label = Label(image=my_img1)
my_label.grid(row=0, column=0) <--- 

将其更改为：

my_label.grid(row=0,column=0,columnspan=3)