为toggle_menu_frame添加滚动条后异常：左侧矩形遮挡且滚动失效

问题根源分析 #

• 左侧出现推挤元素的矩形：canvas内部的子frame未与canvas宽度对齐，且背景色不一致导致异色区域显现
• 滚动条失效：仅监听canvas尺寸变化，未同步监听内部frame的内容尺寸变化，且scrollregion更新逻辑不完整

修正后的完整实现代码 #

1. 创建toggle_menu_frame和canvas

toggle_menu_fm = tk.Frame(root, bg="lightgray", borderwidth=3, relief="raised")
toggle_menu_fm.place(x=145, y=0, height=920, width=800)
canvas1 = tk.Canvas(toggle_menu_fm, bg="lightgray")  # 统一背景色消除异色矩形
canvas1.pack(side=tk.LEFT, fill=tk.BOTH, expand=1)

2. 创建滚动条

my_scrollbar = ttk.Scrollbar(toggle_menu_fm, orient=tk.VERTICAL, command=canvas1.yview)
my_scrollbar.pack(side=tk.RIGHT, fill=tk.Y)

3. 配置canvas滚动关联

canvas1.configure(yscrollcommand=my_scrollbar.set)

4. 创建内部容器frame

frame = tk.Frame(canvas1, bg="lightgray")  # 与canvas背景色保持一致

5. 绑定事件并创建canvas内部窗口

# 创建窗口时关联canvas宽度，后续动态更新
canvas_window = canvas1.create_window((0, 0), window=frame, anchor="nw", width=canvas1.winfo_width())

# canvas尺寸变化时，同步调整内部窗口宽度
def adjust_canvas_window(event):
    canvas1.itemconfig(canvas_window, width=event.width)

canvas1.bind('<Configure>', adjust_canvas_window)

# frame内容变化时，更新canvas滚动区域
def update_scroll_region(event):
    canvas1.configure(scrollregion=canvas1.bbox("all"))

frame.bind('<Configure>', update_scroll_region)

核心修正点 #

• 统一canvas与内部frame的背景色，消除左侧异色矩形
• 监听canvas尺寸变化，动态同步内部窗口宽度，避免推挤布局
• 监听内部frame的内容变化事件，实时更新滚动区域，确保滚动条正常工作
• 移除全局变量依赖，通过事件对象直接操作控件，代码更健壮

内容的提问来源于stack exchange，提问作者rayen samali