如何在Tkinter可滚动Canvas内创建可调整大小的Frame且不破坏滚动条功能

解决方案 #

核心原理：Canvas的滚动逻辑仅对create_window插入的组件生效，直接用grid/pack布局内部Frame会脱离Canvas的内容管理，导致滚动失效。我们可以通过监听Canvas尺寸变化事件，手动调整内部Frame的宽高实现适配，同时保留滚动功能。

核心修改点

• 保存create_window返回的内部窗口ID，用于动态调整Frame尺寸
• 扩展Canvas的<Configure>事件处理逻辑：
  • 强制内部Frame宽度始终等于Canvas宽度，避免横向空白
  • 内容高度小于Canvas高度时，拉伸Frame填充纵向空白；内容高度超出时保持原始高度，触发滚动
  • 动态更新scrollregion保证滚动范围正确

修改后完整代码

import tkinter as tk


def get_vertically_scrollable_frame(parent_frame: tk.Frame or tk.Tk) -> tk.Frame:
    """
    :param parent_frame: The frame to place the canvas and scrollbar onto.
    :return: A scrollable tk.Frame object nested within the parent_frame object.
    """
    assert isinstance(parent_frame, tk.Frame) or isinstance(parent_frame, tk.Tk)

    # Create the canvas and scrollbar.
    canvas = tk.Canvas(master=parent_frame, bg="blue")
    scrollbar = tk.Scrollbar(master=parent_frame, orient=tk.VERTICAL, command=canvas.yview)

    # Let the canvas and scrollbar resize to fit the parent_frame object.
    parent_frame.rowconfigure(0, weight=1)
    parent_frame.columnconfigure(0, weight=1)
    canvas.grid(row=0, column=0, sticky='news')
    scrollbar.grid(row=0, column=1, sticky='nes')

    # Link the canvas and scrollbar together.
    canvas.configure(yscrollcommand=scrollbar.set)

    # Create the tk.Frame that is within the canvas.
    canvas_frame = tk.Frame(master=canvas, bg="red")
    # 保存内部窗口ID，用于后续调整尺寸
    win_id = canvas.create_window((0, 0), window=canvas_frame, anchor="nw")

    def on_canvas_configure(event):
        # 调整内部Frame宽度适配Canvas
        canvas.itemconfig(win_id, width=event.width)
        # 获取内部Frame内容实际所需高度
        frame_req_height = canvas_frame.winfo_reqheight()
        # 内容高度不足时拉伸填充Canvas，超出时保持原始高度触发滚动
        canvas.itemconfig(win_id, height=max(frame_req_height, event.height))
        # 更新滚动区域
        canvas.configure(scrollregion=canvas.bbox("all"))

    canvas.bind('<Configure>', on_canvas_configure)

    return canvas_frame


if __name__ == "__main__":
    window = tk.Tk()
    window.rowconfigure(0, weight=1)
    window.columnconfigure(0, weight=1)

    parent_frame = tk.Frame(master=window)
    parent_frame.grid(row=0, column=0, sticky="news")

    scrollable_frame = get_vertically_scrollable_frame(parent_frame)

    # Add the widgets to the new frame.
    scrollable_frame.columnconfigure(0, weight=1)  # Resize everything horizontally.
    tk.Label(master=scrollable_frame, text="First name").grid(row=0, column=0, sticky="w")
    tk.Entry(master=scrollable_frame).grid(row=1, column=0, sticky="ew")
    tk.Label(master=scrollable_frame, text="").grid(row=2, column=0, sticky="w")
    tk.Label(master=scrollable_frame, text="Last name").grid(row=3, column=0, sticky="w")
    tk.Entry(master=scrollable_frame).grid(row=4, column=0, sticky="ew")
    tk.Label(master=scrollable_frame, text="").grid(row=5, column=0, sticky="w")
    tk.Label(master=scrollable_frame, text="Email").grid(row=6, column=0, sticky="w")
    tk.Entry(master=scrollable_frame).grid(row=7, column=0, sticky="ew")
    tk.Label(master=scrollable_frame, text="").grid(row=8, column=0, sticky="w")
    tk.Label(master=scrollable_frame, text="Favorite color").grid(row=9, column=0, sticky="w")
    tk.Entry(master=scrollable_frame).grid(row=10, column=0, sticky="ew")
    tk.Label(master=scrollable_frame, text="").grid(row=11, column=0, sticky="w")
    tk.Frame(master=scrollable_frame).grid(row=12, column=0, sticky="news")
    scrollable_frame.rowconfigure(12, weight=1)  # Vertically resize filler frame from last line.
    tk.Button(master=scrollable_frame, text="Clear").grid(row=13, column=0, sticky="ews")
    tk.Button(master=scrollable_frame, text="Submit").grid(row=14, column=0, sticky="ews")

    window.mainloop()

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