添加图片导致Tkinter GUI输入框布局错乱问题求助

你的问题出在把图片放在了输入框所在的entry_frame内部第2行第3列，这会直接拉伸该行的高度，加上输入框只设置了sticky=tk.E（仅右对齐）、没给列设置权重，导致整个输入框布局移位。下面给你两种可行的解决办法：

方案1：图片和输入框分框架摆放（推荐） #

把图片放到独立的框架里，和输入框框架并排放在主窗口的不同列，彻底隔离两者的布局影响，同时优化输入框的拉伸规则：

import tkinter as tk
from tkinter import ttk
from PIL import Image, ImageTk

# 补上你代码里用到的三个函数（假设你已实现，这里占位）
def trigonometry_calculator():
    pass
def reset():
    pass
def done():
    pass

root = tk.Tk()

# 输入框专属框架
entry_frame = tk.Frame(root)
entry_frame.grid(row=0, column=0, padx=10, pady=10)

# 逐个布置输入框，统一设置sticky=tk.EW让输入框能横向拉伸
a_label = ttk.Label(entry_frame, text="a =")
a_label.grid(row=0, column=0, sticky=tk.W)
a_var = tk.StringVar()
a_entry = ttk.Entry(entry_frame, textvariable=a_var)
a_entry.grid(row=0, column=1, sticky=tk.EW, pady=10)

b_label = ttk.Label(entry_frame, text="b =")
b_label.grid(row=1, column=0, sticky=tk.W)
b_var = tk.StringVar()
b_entry = ttk.Entry(entry_frame, textvariable=b_var)
b_entry.grid(row=1, column=1, sticky=tk.EW, pady=10)

c_label = ttk.Label(entry_frame, text="c =")
c_label.grid(row=2, column=0, sticky=tk.W)
c_var = tk.StringVar()
c_entry = ttk.Entry(entry_frame, textvariable=c_var)
c_entry.grid(row=2, column=1, sticky=tk.EW, pady=10)

A_label = ttk.Label(entry_frame, text="A =")
A_label.grid(row=3, column=0, sticky=tk.W)
A_var = tk.StringVar()
A_entry = ttk.Entry(entry_frame, textvariable=A_var)
A_entry.grid(row=3, column=1, sticky=tk.EW, pady=10)

B_label = ttk.Label(entry_frame, text="B =")
B_label.grid(row=4, column=0, sticky=tk.W)
B_var = tk.StringVar()
B_entry = ttk.Entry(entry_frame, textvariable=B_var)  # 修正原代码错绑b_var的问题
B_entry.grid(row=4, column=1, sticky=tk.EW, pady=10)

C_label = ttk.Label(entry_frame, text="C =")
C_label.grid(row=5, column=0, sticky=tk.W)
C_entry = ttk.Label(entry_frame, text="90")
C_entry.grid(row=5, column=1, sticky=tk.E, pady=10)

# 设置输入框列的权重，让输入框能随窗口宽度自适应
entry_frame.grid_columnconfigure(1, weight=1)

# 图片专属框架
image_frame = tk.Frame(root)
image_frame.grid(row=0, column=1, padx=10, pady=10)

triangle = ImageTk.PhotoImage(Image.open("Triangle.png"))
triangle_img = ttk.Label(image_frame, image=triangle)
triangle_img.image = triangle  # 必须保留引用，防止图片被Python垃圾回收
triangle_img.grid(row=0, column=0)

# 按钮框架
button_frame = ttk.Frame(root)
button_frame.grid(row=1, column=0, columnspan=2, pady=10)

calculate_button = ttk.Button(button_frame, text="Calculate", command=trigonometry_calculator)
calculate_button.grid(row=0, column=0, padx=5)

clear_button = ttk.Button(button_frame, text="Clear", command=reset)
clear_button.grid(row=0, column=1, padx=5)

quit_button = ttk.Button(button_frame, text="Quit", command=done)
quit_button.grid(row=0, column=2, padx=5)

root.mainloop()

这个方案结构清晰，图片和输入框互不干扰，以后修改布局也更方便。

方案2：图片留在输入框框架内，调整跨行列对齐 #

如果一定要把图片放在输入框框架里，就让图片跨所有输入框的行，避免单独撑高某一行：

只需要修改图片部分的代码，其他输入框设置和方案1一致：

triangle = ImageTk.PhotoImage(Image.open("Triangle.png"))
triangle_img = ttk.Label(entry_frame, image=triangle)
triangle_img.image = triangle
# 让图片跨6行（和输入框行数一致），垂直居中对齐
triangle_img.grid(row=0, column=2, rowspan=6, padx=10, sticky=tk.NS)

这样图片会垂直居中在输入框右侧，不会单独拉伸某一行，输入框布局也能保持整齐。

内容的提问来源于stack exchange，提问作者Shane Rosario