CustomTkinter滚动帧异常：仅显示可滚动红色画布问题排查

核心问题及修复步骤 #

1. 错误传递列表数据：将列表转为字符串传入

在search_keywords方法中，你把filtered_keywords列表转成了字符串传入ListFrame，导致后续遍历的是字符串的每个字符而非列表项，同时列表高度计算完全错误。

修复代码：

def search_keywords(self, parent):
    # 移除str()转换，直接传入原列表
    self.keywords_frame = ListFrame(self, self.filtered_keywords, 50)

2. 滚动内容帧的父容器错误

你创建的self.frame父容器是ListFrame本身，而非画布self.canvas，导致内容帧不在画布的可视区域内，自然无法显示。

修复代码：

# 在ListFrame的__init__中修改frame的父容器
self.frame = ctk.CTkFrame(self.canvas)  # 改为self.canvas而非self

3. 重复创建滚动条导致资源混乱

每次触发<Configure>事件时，你都重新实例化滚动条，这会导致旧滚动条被覆盖，同时引发布局异常。只需创建一次滚动条，通过place和place_forget控制显示即可。

修复代码：

# 在ListFrame的__init__中只创建一次滚动条
self.vert_scrollbar = ctk.CTkScrollbar(self, orientation='vertical', command=self.canvas.yview)
self.canvas.configure(yscrollcommand=self.vert_scrollbar.set)
self.vert_scrollbar.place(relx=1, rely=0, relheight=1, anchor='ne')

# 在update_size中移除滚动条实例化代码，仅保留显示/隐藏逻辑
def update_size(self, event):
    if self.list_height >= self.winfo_height():
        height = self.list_height
        self.canvas.bind_all('<MouseWheel>', lambda event: self.canvas.yview_scroll(-event.delta, "units"))
        self.vert_scrollbar.place(relx=1, rely=0, relheight=1, anchor='ne')
    else:
        height = self.winfo_height()
        self.canvas.unbind_all('<MouseWheel>')
        self.vert_scrollbar.place_forget()

    # 创建画布窗口并动态更新滚动区域
    self.canvas.create_window((0,0), window=self.frame, anchor='nw', width=self.winfo_width(), height=height)
    self.canvas.configure(scrollregion=self.canvas.bbox("all"))

4. 初始化滚动区域无效

画布初始化时self.winfo_width()还未获取到实际宽度，导致滚动区域设置错误。需要在update_size中通过canvas.bbox("all")动态更新滚动区域，确保内容可完整滚动。

修复后完整ListFrame类示例 #

class ListFrame(ctk.CTkFrame):
    def __init__(self, parent, text_data, item_height):
        super().__init__(parent)
        self.pack(expand=True, fill='both')
        self._fg_color = 'white'

        # widget data
        self.text_data = text_data
        self.item_number = len(text_data)
        self.list_height = item_height * self.item_number

        # canvas - 初始不设置scrollregion
        self.canvas = tk.Canvas(self, background='red')
        self.canvas.pack(expand=True, fill='both')

        # display frame - 修改父容器为canvas
        self.frame = ctk.CTkFrame(self.canvas)
        for item in self.text_data:
            self.create_item(item).pack(expand=True, fill='both', pady=2)  # 增加pady优化项间距

        # scrollbar - 仅创建一次
        self.vert_scrollbar = ctk.CTkScrollbar(self, orientation='vertical', command=self.canvas.yview)
        self.canvas.configure(yscrollcommand=self.vert_scrollbar.set)
        self.vert_scrollbar.place(relx=1, rely=0, relheight=1, anchor='ne')

        self.canvas.bind_all('<MouseWheel>', lambda event: self.canvas.yview_scroll(-event.delta, "units"))
        self.bind('<Configure>', self.update_size)

    def update_size(self, event):
        if self.list_height >= self.winfo_height():
            height = self.list_height
            self.canvas.bind_all('<MouseWheel>', lambda event: self.canvas.yview_scroll(-event.delta, "units"))
            self.vert_scrollbar.place(relx=1, rely=0, relheight=1, anchor='ne')
        else:
            height = self.winfo_height()
            self.canvas.unbind_all('<MouseWheel>')
            self.vert_scrollbar.place_forget()

        self.canvas.create_window((0,0), window=self.frame, anchor='nw', width=self.winfo_width(), height=height)
        self.canvas.configure(scrollregion=self.canvas.bbox("all"))  # 动态更新滚动区域

    def create_item(self, item):
        frame = ctk.CTkFrame(self.frame)
        frame.rowconfigure(0, weight=1)
        frame.columnconfigure(0, weight=1)

        ctk.CTkLabel(frame, text=item).grid(row=0, column=0, padx=10)
        ctk.CTkButton(frame, text='DELETE').grid(row=0, column=1, padx=10)

        return frame

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