使用Tkinter将Treeview和按钮放Canvas上为何消失？求修改代码

问题原因 #

• 父容器与定位不匹配：将组件父组件改为frame后，仍使用相对于root的大数值绝对坐标（比如x=960+200），这些坐标远超frame初始尺寸，导致组件被放到frame可视区域之外，看起来像是消失了。
• 滚动区域未正确覆盖：虽然绑定了frame的<Configure>事件，但组件超出frame初始范围时，需要确保事件能正确触发并更新Canvas的滚动区域，否则Canvas不会显示超出自身初始范围的内容。
• 滚动条容器错误：Treeview的滚动条仍以root为父组件，和Treeview不在同一容器，布局逻辑混乱，进一步导致组件显示异常。

修改后的可运行代码 #

import tkinter
from tkinter import ttk
from tkinter import *

root = tkinter.Tk()
root.geometry("1500x900")
root.title("Writer")

# 配置Canvas和滚动容器Frame
canvas = tkinter.Canvas(root, borderwidth=10)
frame = tkinter.Frame(canvas)
vsb_canvas = tkinter.Scrollbar(root, orient="vertical", command=canvas.yview)
canvas.configure(yscrollcommand=vsb_canvas.set)

# 布局Canvas和全局滚动条
canvas.pack(side="left", fill="both", expand=True)
vsb_canvas.pack(side="right", fill="y")
canvas.create_window((0, 0), window=frame, anchor="nw")

# 更新Canvas滚动区域，确保覆盖frame内所有组件
def update_scrollregion(event):
    canvas.configure(scrollregion=canvas.bbox("all"))
frame.bind("<Configure>", update_scrollregion)


def treeframe1(rows, df):
    tree["columns"] = list(range(1, len(df.columns) + 1))
    tree['show'] = 'headings'
    tree['height'] = 45  # 使用整数替代字符串更规范

    colnames = df.columns
    tree.column(1, width=90, anchor='c')
    tree.heading(1, text=colnames[0])

    for i in range(2, len(df.columns) + 1):
        tree.column(i, width=100, anchor='c')
        tree.heading(i, text=colnames[i - 1])

    for i in rows:
        tree.insert('', 'end', values=i)


# 所有组件父组件改为frame，调整坐标为相对于frame的合理值
tree = ttk.Treeview(frame, selectmode='browse', height=45)
tree.place(x=200, y=45, width=920)

# Treeview垂直滚动条，父组件改为frame
vsb_tree_y = ttk.Scrollbar(frame, orient="vertical", command=tree.yview)
vsb_tree_y.place(x=190, y=45, height=880)
tree.configure(yscrollcommand=vsb_tree_y.set)

# Treeview水平滚动条，父组件改为frame
vsb_tree_x = ttk.Scrollbar(frame, orient="horizontal", command=tree.xview)
vsb_tree_x.place(x=200, y=930, width=920)
tree.configure(xscrollcommand=vsb_tree_x.set)

# 按钮组件父组件改为frame，调整坐标
b1 = Button(frame, text="dd1", width=15)
b1.place(x=50, y=45)

b2 = Button(frame, text="dd2", width=15)
b2.place(x=50, y=95)

b3 = Button(frame, text="dd3", width=15)
b3.place(x=50, y=145)

root.mainloop()

关键修改点说明 #

• 所有需要放入滚动区域的组件（Treeview、滚动条、按钮）的父组件统一设置为frame。
• 调整place的坐标值为相对于frame的合理位置，避免组件超出frame可视范围。
• 把Treeview的滚动条也放入frame，保证和Treeview布局逻辑统一。
• 优化滚动区域更新函数，确保frame内所有组件都能被Canvas的滚动区域覆盖。

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