Tkinter动态添加Frame后滚动条失效问题求助

静态添加内容时滚动条可正常工作，但点击按钮动态添加Frame后，新Frame能成功添加，却无法通过滚动条查看底部内容，滚动条处于失效状态。以下是可行的解决方案：

问题根源 #

1. 动态添加内容时重复调用canvas.create_window，导致Canvas内的容器Frame被重复创建，滚动区域计算混乱。
2. 动态添加内容后未及时更新Canvas的滚动区域，使得滚动条无法识别新的内容范围。
3. 绑定<Configure>事件时使用了HTML转义字符<和>，导致事件绑定失效。

解决方案步骤 #

• 移除重复的canvas.create_window调用：初始化时已经创建过一次容器Frame的窗口，动态添加内容时无需重复创建，否则会覆盖原有布局并干扰滚动计算。
• 动态添加后更新滚动区域：每次添加新Frame后，先让容器Frame完成尺寸计算，再重新设置Canvas的滚动区域为所有内容的边界。
• 修正事件绑定的语法错误：将<Configure>改为<Configure>，确保Canvas尺寸变化时能自动更新滚动区域。

修改后的完整代码 #

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

root = tk.Tk()
root.grid_rowconfigure(0, weight=1)
root.columnconfigure(0, weight=1)
root.title("Hello Python")
root.configure(bg="#010523")
# root.iconbitmap('logo.ico')  # 可根据实际情况启用
root.geometry("400x500")

frame_main = tk.Frame(root, bg="#010523")
frame_main.grid(sticky='news')

# ********************header frame********************************
header_frame = LabelFrame(frame_main, bg="#010523", border=0, height=100)
header_frame.grid(row=0, column=0, columnspan=2, sticky='ew')

width =50
height =50
# 替换为实际图片路径
photo= Image.open("logo.png")
photo= photo.resize((width, height), Image.Resampling.LANCZOS)  # 替换已弃用的ANTIALIAS

# create an object of PhotoImage
photoImg = ImageTk.PhotoImage(photo)
photo_label= Label(header_frame, image=photoImg, bg="#010523")
photo_label.grid(row=0, column=0, rowspan=2)

# Label
public_broadcast = Label(header_frame, text="Public broadcast",
                    font="bold", bg="#010523", fg="white")
public_broadcast.grid(row=0, column=1)

_id = Label(header_frame, text="MY ID: 0013A20041EFD12C",
            font="10", bg="#010523", fg="grey")
_id.grid(row=1, column=1, padx=10)
# ********************end of header frame*************************

# Create a frame for the canvas with non-zero row&column weights
frame_canvas = tk.Frame(frame_main)
frame_canvas.grid(row=2, column=0, pady=(5, 0), sticky='nw')
frame_canvas.grid_rowconfigure(0, weight=1)
frame_canvas.grid_columnconfigure(0, weight=1)
frame_canvas.grid_propagate(False)

# Add a canvas in that frame
canvas = tk.Canvas(frame_canvas, bg="yellow")
canvas.grid(row=0, column=0, sticky="news")

# Link a scrollbar to the canvas
vsb = tk.Scrollbar(frame_canvas, orient=VERTICAL, command=canvas.yview)
vsb.grid(row=0, column=1, sticky='ns')
canvas.configure(yscrollcommand=vsb.set)

# Create a frame to contain the messages
frame_buttons = tk.Frame(canvas, bg="blue")

# Initialize row counter
last_frame_row = 3

frame_canvas.config(width=400, height=300)

# Entering self msg frame with text
def add_msg_frame():
    global last_frame_row
    msg = "This is a test msg"
    # msg = e.get()
    # e.delete(0, END)
    new_frame = Frame(frame_buttons, bg="#4857a8", borderwidth=0)
    new_frame.grid(row=last_frame_row, column=1, columnspan=2, sticky='e', pady=5)
    last_frame_row += 1
    
    new_label = Label(new_frame, text=msg, font="10", bg="#4857a8", fg="white")
    new_label.grid(row=0, column=0)
    
    # 更新滚动区域
    frame_buttons.update_idletasks()
    canvas.config(scrollregion=canvas.bbox("all"))

def add_reply_msg(device_id="0983ADFCD9827sd", msg="this is a sample message"):
    global last_frame_row
    new_frame = Frame(frame_buttons, bg="#1f243f", borderwidth=0)
    new_frame.grid(row=last_frame_row, column=0, columnspan=2, sticky='w', pady=5)
    last_frame_row += 1
    
    new_label = Label(new_frame, text=device_id, bg="#1f243f", font="10", fg="#a6a6a6")
    new_label.grid(row=0, column=0)
    
    new_label2 = Label(new_frame, text=msg, font="10", bg="#1f243f", fg="white")
    new_label2.grid(row=1, column=0)
    
    # 更新滚动区域
    frame_buttons.update_idletasks()
    canvas.config(scrollregion=canvas.bbox("all"))

# 初始化添加内容
add_reply_msg()
add_reply_msg()
add_msg_frame()

frame_buttons.update_idletasks()

# Set the canvas scrolling region and create the window once
canvas.config(scrollregion=canvas.bbox("all"))
canvas.create_window((0, 0), window=frame_buttons, anchor='nw')

# 修正事件绑定语法
canvas.bind('<Configure>', lambda e: canvas.configure(scrollregion=canvas.bbox("all")))

# Entry area
eFrame = Frame(root, width=400, height=100)
eFrame.grid(row=1000, column=0)

e = Entry(eFrame, width=50)
e.grid(row=0, column=0)

ebtn = Button(eFrame, text="Send", bg="skyblue", command=add_msg_frame)
ebtn.grid(row=0, column=1)

# Launch the GUI
root.mainloop()

内容的提问来源于stack exchange，提问作者FAIZ AHMED