如何让Tkinter Toplevel窗口始终定位在Canvas矩形位置？

问题根源 #

你的代码无法实现对齐的核心原因有三个：

1. 坐标转换错误：使用main1的屏幕坐标计算窗口位置，但Canvas是嵌套在main1内的元素，应该以Canvas自身的屏幕坐标为基准叠加矩形的相对坐标。
2. 标题栏高度计算时机错误：创建Toplevel后立即计算标题栏高度，此时窗口尚未完成初始化，获取的尺寸数据不准确。
3. 作用域与初始化问题：内部函数top的定义方式容易引发作用域混淆，且窗口尺寸设置未考虑系统窗口边框的影响。

修复后的代码 #

import tkinter as tk

class PageOne(tk.Frame):
    def __init__(self, parent, *args, **kwargs):
        super().__init__(parent, *args, **kwargs)
        self.toolbar1 = tk.Frame(self,background='#393951', height=30)
        self.sidepanel = tk.Frame(self,background='#192232', padx=15, pady=5)
        self.sidebtnfrm1 = tk.Frame(self,background='#192232', padx=15, pady=5)
        self.sidebtnfrm2 = tk.Frame(self,background='#192232', padx=15, pady=5)
        self.main1 = tk.Frame(self,background='#192232')
        self.main2 = tk.Frame(self,background='#192232')

        self.grid_rowconfigure(1, weight=15, uniform=True)
        self.grid_rowconfigure(2, weight=1, uniform=True)
        self.grid_rowconfigure(3, weight=1, uniform=True)
        self.grid_columnconfigure(0, weight=2, uniform=True)
        self.grid_columnconfigure(1, weight=6, uniform=True)
        self.grid_columnconfigure(2, weight=5, uniform=True)

        self.toolbar1.grid(row=0, column=0, columnspan=3, sticky="nsew")
        self.sidepanel.grid(row=1, column=0, sticky="nsew")
        self.sidebtnfrm1.grid(row=2, column=0,sticky="nsew")
        self.sidebtnfrm2.grid(row=3, column=0,sticky="nsew")
        self.main1.grid(row=1, column=1, rowspan=3,sticky="nsew")
        self.main2.grid(row=1, column=2, rowspan=3,sticky="nsew")
        
        self.canvas0 = tk.Canvas(self.main1,background="#192232",highlightthickness=0)
        self.canvas0.pack(fill="both", pady=25, expand=True)
        # 初始创建矩形
        self.canvas0.create_rectangle(10,10,206,206,fill="#192232", outline="#8c92ac",width=2,tags=("rectangle",))
        self.canvas0.bind("<Configure>", self.resize_canvas_objects)
        
        submit_btn = tk.Button(self.sidebtnfrm2,text="Submit",command=self.show_toplevel)
        submit_btn.pack(side="left")
    
    def show_toplevel(self):
        # 获取矩形相对Canvas的坐标
        x1, y1, x2, y2 = self.canvas0.bbox("rectangle")
        rect_width = x2 - x1
        rect_height = y2 - y1
        
        topi = tk.Toplevel(self)
        # 先隐藏窗口，避免闪烁
        topi.withdraw()
        # 设置窗口内部尺寸（不含标题栏）
        topi.geometry(f"{rect_width}x{rect_height}")
        # 等待窗口初始化完成
        topi.update_idletasks()
        
        # 计算标题栏高度
        titlebar_height = topi.winfo_height() - rect_height
        # 计算窗口在屏幕上的绝对位置：Canvas屏幕坐标 + 矩形相对坐标 - 标题栏高度（因为窗口的y坐标是标题栏顶部）
        window_x = self.canvas0.winfo_rootx() + x1
        window_y = self.canvas0.winfo_rooty() + y1 - titlebar_height
        
        # 设置最终位置
        topi.geometry(f"{rect_width}x{rect_height}+{window_x}+{window_y}")
        topi.deiconify()
        topi.attributes('-topmost', True)
        topi.attributes('-topmost', False)
    
    def resize_canvas_objects(self, event):
        # 调整矩形大小以适配Canvas（保留2px边距）
        x0, y0 = 2, 2
        x1, y1 = event.width - 2, event.height - 2
        self.canvas0.coords("rectangle", x0, y0, x1, y1)
        self.canvas0.configure(scrollregion=self.canvas0.bbox("all"))

root = tk.Tk()
root.wm_state('zoomed')
p1 = PageOne(root)
p1.pack(fill="both", expand=True)
root.mainloop()

关键修改说明 #

• 将内部函数top改为类方法show_toplevel，避免作用域混淆问题。
• 使用self.canvas0.winfo_rootx()/self.canvas0.winfo_rooty()获取Canvas的屏幕坐标，确保矩形相对坐标转换为屏幕坐标的准确性。
• 添加topi.withdraw()和topi.update_idletasks()，等待窗口初始化完成后再计算标题栏高度，避免获取错误的尺寸数据。
• 调整Canvas的pack参数，添加expand=True，确保Canvas能随main1的大小变化而拉伸。
• 调整resize时的矩形坐标，保留2px边距，避免矩形贴紧Canvas边缘。

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