tkinter的GUI設計：界面與邏輯分離（三）-- 多頁面

知識點：

使用 tkinter.Frame.tkraise() 函數去提升當前 tkinter.Frame 的 z 軸順序，使得多個 tkinter.Frame 的可見性得以切換

 

本文基於：win7 + python34

 

1

2

3

4

5

import matplotlib
matplotlib.use("TkAgg")

from matplotlib.backends.backend_tkagg import FigureCanvasTkAgg, NavigationToolbar2TkAgg
from matplotlib.figure import Figure

import tkinter as tk
from tkinter import ttk


LARGE_FONT= ("Verdana", 12)


class Application(tk.Tk):
    '''
    多頁面測試程序
        界面與邏輯分離
    '''
    def __init__(self):
        
        super().__init__()

        self.iconbitmap(default="kankan_01.ico")
        self.wm_title("多頁面測試程序")
        
        container = tk.Frame(self)
        container.pack(side="top", fill="both", expand = True)
        container.grid_rowconfigure(0, weight=1)
        container.grid_columnconfigure(0, weight=1)

        self.frames = {}
        for F in (StartPage, PageOne, PageTwo, PageThree):
            frame = F(container, self)
            self.frames[F] = frame
            frame.grid(row=0, column=0, sticky="nsew")  # 四個頁面的位置都是 grid(row=0, column=0), 位置重疊，只有最上面的可見！！

        self.show_frame(StartPage)

        
    def show_frame(self, cont):
        frame = self.frames[cont]
        frame.tkraise() # 切換，提升當前 tk.Frame z軸順序（使可見）！！此語句是本程序的點睛之處

        
class StartPage(tk.Frame):
    '''主頁'''
    def __init__(self, parent, root):
        super().__init__(parent)
        label = tk.Label(self, text="這里是主頁", font=LARGE_FONT)
        label.pack(pady=10,padx=10)

        button1 = ttk.Button(self, text="去到第一頁", command=lambda: root.show_frame(PageOne)).pack()
        button2 = ttk.Button(self, text="去到第二頁", command=lambda: root.show_frame(PageTwo)).pack()
        button3 = ttk.Button(self, text="去到繪圖頁", command=lambda: root.show_frame(PageThree)).pack()



class PageOne(tk.Frame):
    '''第一頁'''
    def __init__(self, parent, root):
        super().__init__(parent)
        label = tk.Label(self, text="這是第一頁", font=LARGE_FONT)
        label.pack(pady=10,padx=10)

        button1 = ttk.Button(self, text="回到主頁", command=lambda: root.show_frame(StartPage)).pack()
        button2 = ttk.Button(self, text="去到第二頁", command=lambda: root.show_frame(PageTwo)).pack()



class PageTwo(tk.Frame):
    '''第二頁'''
    def __init__(self, parent, root):
        super().__init__(parent)
        label = tk.Label(self, text="這是第二頁", font=LARGE_FONT)
        label.pack(pady=10,padx=10)

        button1 = ttk.Button(self, text="回到主頁", command=lambda: root.show_frame(StartPage)).pack()
        button2 = ttk.Button(self, text="去到第一頁", command=lambda: root.show_frame(PageOne)).pack()



class PageThree(tk.Frame):
    '''第三頁'''
    def __init__(self, parent, root):
        super().__init__(parent)
        tk.Label(self, text="這是繪圖頁", font=LARGE_FONT).pack(pady=10,padx=10)

        button1 = ttk.Button(self, text="回到主頁", command=lambda: root.show_frame(StartPage)).pack()

        fig = Figure(figsize=(5,5), dpi=100)
        a = fig.add_subplot(111)
        a.plot([1,2,3,4,5,6,7,8],[5,6,1,3,8,9,3,5])

        
        canvas = FigureCanvasTkAgg(fig, self)
        canvas.show()
        canvas.get_tk_widget().pack(side=tk.BOTTOM, fill=tk.BOTH, expand=True)

        toolbar = NavigationToolbar2TkAgg(canvas, self)
        toolbar.update()
        canvas._tkcanvas.pack(side=tk.TOP, fill=tk.BOTH, expand=True)

        

if __name__ == '__main__':
    # 實例化Application
    app = Application()
    
    # 主消息循環:
    app.mainloop()