如何实现可动态新增标签的Tkinter可滚动Frame组件

你的代码存在两处核心逻辑错误，对应你遇到的两个故障：

• 无法滚动：你仅在frame_canvas触发<Configure>事件（即自身尺寸变化）时才更新canvas的滚动区域，但新消息添加到内部的names_frame时不会触发外层frame的尺寸变化事件，滚动区域从未更新，自然无法滚动。
• 宽度过窄：一是你布局canvas和外层frame时没有设置拉伸规则，组件会收缩到最小适配尺寸；二是嵌入canvas的names_frame没有和canvas宽度做绑定，不会随canvas宽度自动撑满，最终只能显示消息前两个字符。
  另外你把垂直滚动条放在canvas内部作为子组件，还会导致滚动条覆盖canvas内容的问题。

按以下步骤修改对应代码即可：

• 调整布局配置，让canvas随窗口自动拉伸：将frame_canvas.grid的sticky参数从'nw'改为'nsew'，给frame_canvas添加行列权重配置；给canvas.grid也添加sticky='nsew'参数，让canvas撑满外层frame。
• 修正滚动条的父容器：把滚动条的父组件从canvas改为frame_canvas，让滚动条和canvas平级布局，避免覆盖内容。
• 绑定正确的事件更新滚动区域、同步宽度：给names_frame绑定<Configure>事件，当内部消息增加导致frame尺寸变化时，自动更新canvas的scrollregion；给canvas绑定<Configure>事件，当canvas自身尺寸变化时，同步设置嵌入的names_frame宽度和canvas一致。
• 新增消息后自动滚动到底部：每次添加完新标签后，调用canvas的滚动方法把视图定位到最底部。
• 优化全局变量写法：把message_queue、canvas、names_frame改为类实例属性（加self.前缀），不要用全局变量避免逻辑异常。

import tkinter as tk

class App(tk.Tk):

    def __init__(self, pipe, *args, **kw):
        super().__init__(*args, **kw)
        self.app_pipe, _ = pipe
        self.check_interval = 250
        # 替换全局变量为实例属性
        self.message_queue = []

        self.configure(bg='gray')
        self.columnconfigure(0, weight=1)
        self.rowconfigure(0, weight=1)

        frame_main = tk.Frame(self, bg='gray')
        frame_main.grid(sticky='news')
        frame_main.columnconfigure(0, weight=1)
        frame_main.rowconfigure(1, weight=1) # 给canvas所在行加权重

        label1 = tk.Label(frame_main, text='Channel')
        label1.grid(row=0, column=0, sticky='nw')

        frame_canvas = tk.Frame(frame_main, bg='red')
        # 修改sticky参数为nsew
        frame_canvas.grid(row=1, column=0, sticky='nsew')
        frame_canvas.columnconfigure(0, weight=1)
        frame_canvas.rowconfigure(0, weight=1)

        self.canvas = tk.Canvas(frame_canvas, bg='yellow')
        # 加sticky参数撑满父容器
        self.canvas.grid(row=0, column=0, sticky='nsew')

        # 滚动条父容器改为frame_canvas
        vsb = tk.Scrollbar(frame_canvas, orient='vertical', command=self.canvas.yview)
        vsb.grid(row=0, column=1, sticky='ns')
        self.canvas.configure(yscrollcommand=vsb.set)

        # 替换全局变量为实例属性
        self.names_frame = tk.Frame(self.canvas)
        self.canvas_window = self.canvas.create_window((0, 0), window=self.names_frame, anchor='nw')

        # 内容变化时更新滚动区域
        def update_scrollregion(event):
            self.canvas.configure(scrollregion=self.canvas.bbox('all'))
        self.names_frame.bind('<Configure>', update_scrollregion)

        # canvas尺寸变化时同步内部frame宽度
        def fit_frame_width(event):
            self.canvas.itemconfig(self.canvas_window, width=event.width)
        self.canvas.bind('<Configure>', fit_frame_width)

        self.bind('<<newMessage>>', self.add_message)

        self.after(self.check_interval, self.check)
    
    def check(self):
        while self.app_pipe.poll():
            msg = self.app_pipe.recv()

            if len(self.message_queue) < 200:
                self.message_queue.append(msg)
            elif len(self.message_queue) == 199:
                self.message_queue.pop(0)
                self.message_queue.append(msg)

            self.event_generate('<<newMessage>>', when='tail')

        self.after(self.check_interval, self.check)

    def add_message(self, *args):
        if self.message_queue[-1]['command'] == 'message':
            message = self.message_queue[-1]['data']
            print(message.author.name, len(self.message_queue))
            name = tk.Label(self.names_frame, text=message.author.name)
            name.grid(row=len(self.message_queue)-1, column=0, sticky='w')
            # 新增消息后自动滚动到底部
            self.canvas.yview_moveto(1.0)

修改后运行即可正常滚动，消息内容也会完整显示。

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