1. ホーム
  2. python

[解決済み] tkinterで2つのフレームを切り替える

2022-10-12 13:20:01

質問

チュートリアルが示してくれたように、私は最初のいくつかのスクリプトを素敵な小さな GUI で構築しましたが、より複雑なプログラムに対して何をすべきかを扱っているものはありません。

もしあなたが、オープニング画面のための「スタートメニュー」を持つ何かを持っていて、ユーザーが選択すると、プログラムの別のセクションに移動し、適切に画面を再描画する場合、これを行うためのエレガントな方法は何ですか?

単に .destroy() を作成し、別の部分のウィジェットで満たされた新しいフレームを作成するのですか? そして、戻るボタンを押すと、このプロセスを逆転させるのですか?

どのように解決するのですか?

1つの方法は、フレームを互いに重ね、積み重ねた順番に1つを他のフレームより上に上げるだけです。一番上にあるものが、見えるものになります。これは、すべてのフレームが同じサイズである場合に最適ですが、少しの作業で、任意のサイズのフレームで動作するようにすることができます。

注意 : これが動作するためには、あるページのすべてのウィジェットが、そのページ (すなわち self ) またはその子孫を親 (またはマスター、お好みの用語に依存) として持つ必要があります。

ここでは、一般的な概念を示すために少し工夫した例を示します。

try:
    import tkinter as tk                # python 3
    from tkinter import font as tkfont  # python 3
except ImportError:
    import Tkinter as tk     # python 2
    import tkFont as tkfont  # python 2

class SampleApp(tk.Tk):

    def __init__(self, *args, **kwargs):
        tk.Tk.__init__(self, *args, **kwargs)

        self.title_font = tkfont.Font(family='Helvetica', size=18, weight="bold", slant="italic")

        # the container is where we'll stack a bunch of frames
        # on top of each other, then the one we want visible
        # will be raised above the others
        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):
            page_name = F.__name__
            frame = F(parent=container, controller=self)
            self.frames[page_name] = frame

            # put all of the pages in the same location;
            # the one on the top of the stacking order
            # will be the one that is visible.
            frame.grid(row=0, column=0, sticky="nsew")

        self.show_frame("StartPage")

    def show_frame(self, page_name):
        '''Show a frame for the given page name'''
        frame = self.frames[page_name]
        frame.tkraise()


class StartPage(tk.Frame):

    def __init__(self, parent, controller):
        tk.Frame.__init__(self, parent)
        self.controller = controller
        label = tk.Label(self, text="This is the start page", font=controller.title_font)
        label.pack(side="top", fill="x", pady=10)

        button1 = tk.Button(self, text="Go to Page One",
                            command=lambda: controller.show_frame("PageOne"))
        button2 = tk.Button(self, text="Go to Page Two",
                            command=lambda: controller.show_frame("PageTwo"))
        button1.pack()
        button2.pack()


class PageOne(tk.Frame):

    def __init__(self, parent, controller):
        tk.Frame.__init__(self, parent)
        self.controller = controller
        label = tk.Label(self, text="This is page 1", font=controller.title_font)
        label.pack(side="top", fill="x", pady=10)
        button = tk.Button(self, text="Go to the start page",
                           command=lambda: controller.show_frame("StartPage"))
        button.pack()


class PageTwo(tk.Frame):

    def __init__(self, parent, controller):
        tk.Frame.__init__(self, parent)
        self.controller = controller
        label = tk.Label(self, text="This is page 2", font=controller.title_font)
        label.pack(side="top", fill="x", pady=10)
        button = tk.Button(self, text="Go to the start page",
                           command=lambda: controller.show_frame("StartPage"))
        button.pack()


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

もし、クラスでインスタンスを作成するというコンセプトが分かりにくい場合や、異なるページが構築中に異なる引数を必要とする場合、それぞれのクラスを明示的に別々に呼び出すことができます。ループは主に、各クラスが同一であるという点を説明するために役立ちます。

たとえば、クラスを個別に作成するために、ループを削除することができます ( for F in (StartPage, ...) をこのようにします。

self.frames["StartPage"] = StartPage(parent=container, controller=self)
self.frames["PageOne"] = PageOne(parent=container, controller=self)
self.frames["PageTwo"] = PageTwo(parent=container, controller=self)

self.frames["StartPage"].grid(row=0, column=0, sticky="nsew")
self.frames["PageOne"].grid(row=0, column=0, sticky="nsew")
self.frames["PageTwo"].grid(row=0, column=0, sticky="nsew")


このコード(またはこのコードをコピーしたオンラインチュートリアル)を出発点として、長い間、人々は他の質問をしてきました。これらの質問に対する回答を読むとよいでしょう。