多页面Tkinter应用中导航栏无法显示/隐藏问题求助

问题分析 #

原代码存在以下关键问题：

• 导航栏创建逻辑与主视图类耦合，按钮绑定命令时直接执行函数而非引用，导致程序启动即创建导航栏，点击按钮无响应。
• 导航按钮未关联页面切换的show方法，无法实现页面跳转。
• 未跟踪导航栏显示状态，多次点击打开按钮会重复创建多个导航栏。
• 全局函数与变量的使用导致代码结构混乱，不利于维护。

修正后的代码 #

import tkinter as tk
from PIL import ImageTk, Image

class ScrollableFrame(tk.Frame):
    def __init__(self, container, *args, **kwargs):
        super().__init__(container, *args, **kwargs)
        canvas = tk.Canvas(self)
        scrollbar = tk.Scrollbar(self, orient="vertical", command=canvas.yview)
        self.scrollable_frame = tk.Frame(canvas)

        self.scrollable_frame.bind(
            "<Configure>",
            lambda e: canvas.configure(scrollregion=canvas.bbox("all"))
        )

        canvas.create_window((0, 0), window=self.scrollable_frame, anchor="nw")
        canvas.configure(yscrollcommand=scrollbar.set)

        canvas.pack(side="left", fill="both", expand=True)
        scrollbar.pack(side="right", fill="y")

class Page(tk.Frame):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)

    def show(self):
        self.lift()

class Page1(Page):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        frame = ScrollableFrame(self)
        frame.pack(fill="both", expand=True)
        for i in range(10):
            tk.Label(frame.scrollable_frame, text=f"Page1 - Label {i}").pack(pady=5)

class Page2(Page):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        frame = ScrollableFrame(self)
        frame.pack(fill="both", expand=True)
        for i in range(10):
            tk.Label(frame.scrollable_frame, text=f"Page2 - Label {i}").pack(pady=5)

class Page3(Page):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        frame = ScrollableFrame(self)
        frame.pack(fill="both", expand=True)
        for i in range(10):
            tk.Label(frame.scrollable_frame, text=f"Page3 - Label {i}").pack(pady=5)

class MainView(tk.Frame):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        # 用字典管理页面，方便扩展
        self.pages = {
            "Home": Page1(self),
            "Two": Page2(self),
            "Three": Page3(self)
        }

        self.buttonframe = tk.Frame(self, bg="#262626", height=40)
        self.buttonframe.pack(side="top", fill="x", expand=False)
        self.buttonframe.pack_propagate(False)

        self.container = tk.Frame(self)
        self.container.pack(side="top", fill="both", expand=True)

        # 统一放置所有页面
        for page in self.pages.values():
            page.place(in_=self.container, x=0, y=0, relwidth=1, relheight=1)

        # 跟踪导航栏状态
        self.nav_frame = None

        # 加载图标，添加容错处理
        try:
            self.open_img = ImageTk.PhotoImage(Image.open('open.png'))
            self.close_img = ImageTk.PhotoImage(Image.open('close.png'))
        except FileNotFoundError:
            self.open_img = None
            self.close_img = None

        # 创建导航切换按钮
        if self.open_img:
            self.toggle_btn = tk.Button(self.buttonframe, image=self.open_img, 
                                       command=self.toggle_nav, border=0, 
                                       bg="#262626", activebackground="#262626")
        else:
            self.toggle_btn = tk.Button(self.buttonframe, text="☰", 
                                       command=self.toggle_nav, border=0, 
                                       bg="#262626", fg="white", font=("Arial", 16))
        self.toggle_btn.place(x=0, y=0)

        # 默认显示首页
        self.pages["Home"].show()

    def toggle_nav(self):
        # 若导航栏已存在则销毁
        if self.nav_frame:
            self.nav_frame.destroy()
            self.nav_frame = None
            return

        # 创建导航栏框架
        self.nav_frame = tk.Frame(self.container, width=300, height=self.container.winfo_height(), bg='#12c4c0')
        self.nav_frame.place(x=0, y=0)
        # 绑定容器大小变化事件，确保导航栏高度自适应
        self.container.bind("<Configure>", lambda e: self.nav_frame.config(height=e.height))

        # 导航按钮创建函数
        def create_nav_btn(x, y, text, cmd):
            def on_enter(e):
                btn['background'] = '#0f9d9a'
                btn['foreground'] = "#262626"
            def on_leave(e):
                btn['background'] = '#12c4c0'
                btn['foreground'] = "#262626"

            btn = tk.Button(self.nav_frame, text=text, width=42, height=2,
                           fg="#262626", border=0, bg='#12c4c0',
                           activeforeground="#262626", activebackground='#0f9d9a',
                           command=cmd)
            btn.bind("<Enter>", on_enter)
            btn.bind("<Leave>", on_leave)
            btn.place(x=x, y=y)

        # 批量创建页面切换按钮
        y_pos = 80
        for page_name, page in self.pages.items():
            create_nav_btn(0, y_pos, page_name, page.show)
            y_pos += 37

        # 创建关闭导航栏按钮
        if self.close_img:
            close_btn = tk.Button(self.nav_frame, image=self.close_img, 
                                 command=self.toggle_nav, border=0, 
                                 activebackground='#12c4c0', bg="#12c4c0")
        else:
            close_btn = tk.Button(self.nav_frame, text="✕", 
                                 command=self.toggle_nav, border=0, 
                                 activebackground='#12c4c0', bg="#12c4c0",
                                 font=("Arial", 12))
        close_btn.place(x=0, y=0)

def main():
    root = tk.Tk()
    main_view = MainView(root)
    main_view.pack(side="top", fill="both", expand=True)
    screen_width = root.winfo_screenwidth()
    screen_height = root.winfo_screenheight()
    root.geometry(f"{screen_width}x{screen_height}")
    root.title("Admin Tools")
    try:
        root.iconbitmap("python.ico")
    except:
        pass  # 图标不存在时忽略
    root.mainloop()

if __name__ == "__main__":
    main()

关键修正说明 #

1. 导航栏状态管控：通过self.nav_frame变量跟踪导航栏存在状态，点击切换按钮时实现创建/销毁的切换，避免重复创建。
2. 命令绑定修复：将按钮命令改为绑定函数引用，而非直接执行函数，确保点击按钮才触发导航栏切换。
3. 页面跳转关联：将导航按钮直接绑定到对应页面的show方法，实现点击按钮切换页面。
4. 代码结构优化：将导航逻辑整合到MainView类中，用字典管理页面，提升代码扩展性与维护性。
5. 容错处理：添加图片加载失败的兼容方案，避免因缺失图片导致程序崩溃。

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