如何在Python Tkinter中实现子窗口拖拽停靠至父窗格并填充

核心逻辑 #

要实现子窗口的停靠与取消停靠，需完成以下关键操作：

• 监听子窗口的鼠标按下、拖动、释放事件，记录拖拽状态与位置
• 鼠标释放时，判断落点是否在目标PanedWindow的窗格范围内
• 停靠时：将子窗口从独立Toplevel转为PanedWindow的子组件，填充整个窗格；同时显示取消停靠按钮
• 取消停靠时：将组件从PanedWindow移除，恢复为独立Toplevel窗口

完整实现代码 #

import tkinter as tk
import customtkinter as ctk

class Properties(ctk.CTkToplevel):
    def __init__(self, master, pane_container):
        super().__init__(master)
        self.master = master
        self.pane_container = pane_container  # 目标PanedWindow容器
        self.is_docked = False  # 标记停靠状态
        self.drag_start_x = 0
        self.drag_start_y = 0

        self.title("Properties")
        self.geometry("250x600")

        # 绑定拖拽相关事件
        self.bind("<ButtonPress-1>", self.start_drag)
        self.bind("<B1-Motion>", self.on_drag)
        self.bind("<ButtonRelease-1>", self.end_drag)

        # 子窗口内部内容示例
        self.content_label = ctk.CTkLabel(self, text="属性面板内容区域")
        self.content_label.pack(pady=40)

        # 取消停靠按钮（初始隐藏）
        self.undock_btn = ctk.CTkButton(self, text="取消停靠", command=self.undock)
        self.undock_btn.pack(side="top", anchor="ne", padx=5, pady=5)
        self.undock_btn.pack_forget()

    def start_drag(self, event):
        # 记录拖拽起始坐标（窗口内相对位置）
        self.drag_start_x = event.x
        self.drag_start_y = event.y

    def on_drag(self, event):
        # 拖动时更新窗口位置
        if not self.is_docked:
            new_x = self.winfo_x() + event.x - self.drag_start_x
            new_y = self.winfo_y() + event.y - self.drag_start_y
            self.geometry(f"+{new_x}+{new_y}")

    def end_drag(self, event):
        if self.is_docked:
            return
        
        # 获取鼠标释放位置对应的组件
        target_widget = self.winfo_containing(event.x_root, event.y_root)
        # 判断是否落在PanedWindow的窗格内
        if target_widget and target_widget.master == self.pane_container:
            self.dock(target_widget)

    def dock(self, target_pane):
        # 执行停靠操作
        self.is_docked = True
        self.withdraw()  # 隐藏原独立窗口
        # 切换父组件为目标窗格
        self.master = target_pane
        self.pack(fill="both", expand=True)
        self.deiconify()
        self.undock_btn.pack(side="top", anchor="ne", padx=5, pady=5)  # 显示取消停靠按钮
        self.title("")  # 清空窗口标题

    def undock(self):
        # 执行取消停靠操作
        self.is_docked = False
        self.pack_forget()
        # 恢复父组件为主窗口
        self.master = self.master.master
        self.geometry("250x600")
        self.title("Properties")
        self.deiconify()
        self.undock_btn.pack_forget()  # 隐藏取消停靠按钮

if __name__ == "__main__":
    root = ctk.CTk()
    root.title("主窗口")
    root.geometry("800x600")

    # 创建PanedWindow容器
    panel_divider = tk.PanedWindow(orient="horizontal", background="Black")
    panel_divider.pack(fill="both", expand=True)

    # 创建左侧窗格
    tool_panel = ctk.CTkFrame(panel_divider, width=200)
    panel_divider.add(tool_panel)

    # 创建右侧窗格
    content_panel = ctk.CTkFrame(panel_divider)
    panel_divider.add(content_panel)

    # 初始化属性窗口
    props_window = Properties(root, panel_divider)

    root.mainloop()

关键细节说明 #

1. 拖拽事件处理：通过三个鼠标事件实现窗口拖拽，拖动过程中仅更新独立窗口的位置，已停靠状态下忽略拖拽操作。
2. 停靠判断：利用winfo_containing方法获取鼠标落点的组件，通过组件的父容器判断是否为目标PanedWindow的窗格。
3. 状态切换：
   • 停靠时：将窗口的父组件切换为目标窗格，使用pack(fill="both", expand=True)让组件填充整个窗格空间。
   • 取消停靠时：恢复窗口的父组件为主窗口，还原初始大小与标题，回到独立窗口状态。

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