Tkinter页面切换异常：点击侧边栏按钮报错求助

问题描述 #

使用CustomTkinter开发GUI界面时，点击左侧侧边栏按钮会触发错误，无法实现点击按钮打开新页面且侧边栏保持固定的功能。

错误原因分析 #

1. 布局冲突：初始化时创建的self.content_label占据了右侧内容区域（column1）的位置，点击按钮后创建的right_frame也布局在同一区域，两者重叠导致布局混乱，同时未销毁的content_label会干扰新页面的显示。
2. 参数错误：CustomTkinter组件（CTkFrame、CTkLabel）不支持原生Tkinter的bg参数，使用该参数会引发属性错误，正确的背景色参数应为fg_color。
3. 事件处理单一：所有侧边栏按钮绑定同一个事件函数，无法区分点击的按钮，导致所有按钮点击后显示相同内容，不符合多页面切换需求。

修复方案 #

1. 移除初始化阶段多余的self.content_label，避免布局重叠。
2. 将所有CTk组件的bg参数替换为fg_color，符合CustomTkinter的API规范。
3. 为每个侧边栏按钮的事件处理函数传递唯一标识（如按钮名称），实现不同按钮对应不同页面内容。
4. 优化页面切换逻辑：预先创建一个固定的内容容器框架，每次切换页面时销毁容器内的所有子组件，再添加新页面的内容，无需重复创建和销毁整个框架，提升性能。

完整修复代码 #

import tkinter
import tkinter.messagebox
import customtkinter

customtkinter.set_appearance_mode("dark")  
customtkinter.set_default_color_theme("dark-blue") 

class App(customtkinter.CTk):
    def __init__(self):
        super().__init__()

        # 配置窗口
        self.title("Opium")
        self.geometry(f"{1100}x{580}")

        # 配置网格布局
        self.grid_columnconfigure(1, weight=1)
        self.grid_columnconfigure((2, 3), weight=0)
        self.grid_rowconfigure((0, 1, 2), weight=1)

        # 创建侧边栏框架及组件
        self.sidebar_frame = customtkinter.CTkFrame(self, width=140, corner_radius=0)
        self.sidebar_frame.grid(row=0, column=0, rowspan=4, sticky="nsew")
        self.sidebar_frame.grid_rowconfigure(4, weight=1)
        
        self.logo_label = customtkinter.CTkLabel(self.sidebar_frame, text="Opium", font=customtkinter.CTkFont(size=30, weight="bold"))
        self.logo_label.grid(row=0, column=0, padx=20, pady=(20, 10))
        
        # 侧边栏按钮绑定带参数的事件函数
        self.sidebar_button_1 = customtkinter.CTkButton(self.sidebar_frame, text="Button 1", command=lambda: self.sidebar_button_event("页面1"))
        self.sidebar_button_1.grid(row=1, column=0, padx=20, pady=10)
        
        self.sidebar_button_2 = customtkinter.CTkButton(self.sidebar_frame, text="Button 2", command=lambda: self.sidebar_button_event("页面2"))
        self.sidebar_button_2.grid(row=2, column=0, padx=20, pady=10)
        
        self.sidebar_button_3 = customtkinter.CTkButton(self.sidebar_frame, text="Button 3", command=lambda: self.sidebar_button_event("页面3"))
        self.sidebar_button_3.grid(row=3, column=0, padx=20, pady=10)
        
        self.appearance_mode_label = customtkinter.CTkLabel(self.sidebar_frame, text="外观模式:", anchor="w")
        self.appearance_mode_label.grid(row=5, column=0, padx=20, pady=(10, 0))
        
        self.appearance_mode_optionemenu = customtkinter.CTkOptionMenu(self.sidebar_frame, values=["浅色", "深色", "跟随系统"],
                                                                       command=self.change_appearance_mode_event)
        self.appearance_mode_optionemenu.grid(row=6, column=0, padx=20, pady=(10, 10))
        self.appearance_mode_optionemenu.set("深色")

        # 创建固定的内容容器框架
        self.content_container = customtkinter.CTkFrame(self, fg_color="transparent")
        self.content_container.grid(row=0, column=1, rowspan=4, sticky="nsew", padx=(10, 0), pady=(20, 10))
        self.content_container.grid_rowconfigure(0, weight=1)
        self.content_container.grid_columnconfigure(0, weight=1)

    def change_appearance_mode_event(self, new_appearance_mode: str):
        customtkinter.set_appearance_mode(new_appearance_mode)

    def sidebar_button_event(self, page_name):
        # 销毁容器内所有子组件
        for widget in self.content_container.winfo_children():
            widget.destroy()
        
        # 根据按钮参数创建对应页面内容
        page_label = customtkinter.CTkLabel(self.content_container, text=page_name, font=customtkinter.CTkFont(size=30, weight="bold"))
        page_label.grid(row=0, column=0, sticky="nsew", padx=20, pady=20)

if __name__ == "__main__":
    app = App()
    app.mainloop()

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