如何在带滚动条的Tkinter中固定Label与Treeview控件位置？

问题描述 #

编写的Tkinter模板查看器中，添加的Label和Treeview控件会随Canvas滚动而移动，无法固定在页面顶部，还会与底部内容重叠。原代码将这些控件直接放置在Canvas上，导致它们成为Canvas的滚动元素之一。

原因分析 #

当控件直接作为Canvas的子组件，或通过非create_window的方式添加到Canvas时，它们会被纳入Canvas的滚动区域，滚动Canvas时这些控件会跟随滚动。同时place方法的坐标基于Canvas，进一步加剧了位置混乱。

解决方法 #

将需要固定的控件从Canvas中移出，放置在Canvas同级的独立容器中，让这些控件属于主窗口的固定区域，不参与Canvas的滚动。

修改后的完整代码 #

import os
from tkinter import *
from tkinter import ttk
from PIL import Image,ImageTk

root = Tk()
root.title("Template viewer")
root.geometry("1000x600")
root.resizable(False, False)

# 创建主框架
main_frame = Frame(root)
main_frame.pack(fill=BOTH, expand=1)

# 创建固定控件的容器（顶部区域，不随Canvas滚动）
fixed_frame = Frame(main_frame)
fixed_frame.pack(fill=X, side=TOP)

# 创建X滚动条的容器
sec = Frame(main_frame)
sec.pack(fill=X, side=BOTTOM)

# 创建Canvas（仅承载需要滚动的内容）
my_canvas = Canvas(main_frame, background='blue')
my_canvas.pack(side=LEFT, fill=BOTH, expand=1)

# 添加滚动条
x_scrollbar = ttk.Scrollbar(sec, orient=HORIZONTAL, command=my_canvas.xview)
x_scrollbar.pack(side=BOTTOM, fill=X)
y_scrollbar = ttk.Scrollbar(main_frame, orient=VERTICAL, command=my_canvas.yview)
y_scrollbar.pack(side=RIGHT, fill=Y)

# 配置Canvas滚动
my_canvas.configure(xscrollcommand=x_scrollbar.set)
my_canvas.configure(yscrollcommand=y_scrollbar.set)
my_canvas.bind("<Configure>", lambda e: my_canvas.config(scrollregion=my_canvas.bbox(ALL)))

# 创建Canvas内的滚动内容框架
scroll_content_frame = Frame(my_canvas)
my_canvas.create_window((0,0), window=scroll_content_frame, anchor="nw")

# 将固定控件放在fixed_frame中，不再属于Canvas
lbltwo = Label(fixed_frame, text="this is a template", fg='black', bg='red', font=("Helvetica", 16))
lbltwo.pack(pady=10, anchor=W)  # 用pack替代place，布局更稳定

# 添加Treeview到fixed_frame
style = ttk.Style()
style.theme_use('clam')

tree = ttk.Treeview(fixed_frame, column=("FName", "LName"), show='headings', height=5)
tree.column("# 1", anchor=CENTER, stretch=NO, width=490)
tree.heading("# 1", text="Column1")
tree.column("# 2", anchor=CENTER, stretch=NO, width=490)
tree.heading("# 2", text="Column2")

tree.insert('', 'end', values=('Entry1', 'file1'))
tree.insert('', 'end', values=('Entry2', 'file2'))
tree.pack(fill=X, pady=(0, 10))  # 用pack布局，固定在Label下方

# 添加需要滚动的内容到Canvas
# 保留图片引用避免垃圾回收
img = Image.open("/path/to/image/file/")
resized_image = img.resize((500,400))
new_image = ImageTk.PhotoImage(resized_image)
my_canvas.create_image(500, 900, anchor=CENTER, image=new_image)
my_canvas.image = new_image

# 添加矩形到Canvas滚动区域
b1 = my_canvas.create_rectangle(0, 600, 1000, 1100, outline="black")

root.mainloop()

关键改动说明 #

• 新增fixed_frame容器：该Frame与Canvas同级，属于main_frame的顶部固定区域，所有需要固定的控件都放在这里，不参与Canvas滚动。
• 调整控件父组件：将Label和Treeview的父组件从my_canvas改为fixed_frame，彻底脱离Canvas的滚动范围。
• 替换布局方式：用pack替代place布局，避免相对坐标带来的重叠问题，让固定控件的位置更稳定。
• 优化Canvas内容管理：Canvas仅承载需要滚动的动态内容（图片、矩形等），滚动区域只包含这些元素。

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