tkinterで2つのフレームを切り替える

94

チュートリアルで示したように、最初のいくつかのスクリプトには、素敵な小さなGUIを使用して作成しましたが、より複雑なプログラムの処理方法については説明していません。

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

.destroy()「スタートメニュー」フレームだけで、別のパーツのウィジェットで満たされた新しいフレームを作成しますか？そして、彼らが戻るボタンを押したときにこのプロセスを逆にしますか？

python  python-3.x  tkinter  frame 
— マックス・ティリー
ソース

回答:

177

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()

スタートページ ページ1 ページ2

クラスでインスタンスを作成するという概念がわかりにくい場合、または構築中に異なるページで異なる引数が必要な場合は、各クラスを個別に明示的に呼び出すことができます。ループは主に、各クラスが同一であるという点を説明するのに役立ちます。

たとえば、クラスを個別に作成するには、ループを削除できます（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")

時間が経つにつれて、人々はこのコード（またはこのコードをコピーしたオンラインチュートリアル）を出発点として使用して他の質問をしました。これらの質問に対する回答を読むことをお勧めします。

— ブライアン・オークリー
ソース
3
うわー、どうもありがとうございました。実用的な質問ではなく学術的な質問と同じように、これらのページを重ねて隠しておくと、遅れて応答しなくなる前に何ページ必要になりますか？
— Max Tilley 2011
4
知りません。おそらく数千。テストするのは簡単でしょう。
— ブライアンオークリー2011
1
フレームを互いに積み重ねる必要なしに、コードの行数を大幅に減らして、これと同様の効果を実現する本当に簡単な方法はありませんか？
— パララックスシュガー
2
@StevenVascellaro：はい、pack_forgetを使用している場合は使用できますpack。
— ブライアンオークリー
2
警告：ユーザーは、Tabキーを押して背景フレームの「非表示」ウィジェットを選択し、Enterキーを押してアクティブ化することができます。
— Stevoisiak
31

これは別の簡単な答えですが、クラスは使用していません。

from tkinter import *


def raise_frame(frame):
    frame.tkraise()

root = Tk()

f1 = Frame(root)
f2 = Frame(root)
f3 = Frame(root)
f4 = Frame(root)

for frame in (f1, f2, f3, f4):
    frame.grid(row=0, column=0, sticky='news')

Button(f1, text='Go to frame 2', command=lambda:raise_frame(f2)).pack()
Label(f1, text='FRAME 1').pack()

Label(f2, text='FRAME 2').pack()
Button(f2, text='Go to frame 3', command=lambda:raise_frame(f3)).pack()

Label(f3, text='FRAME 3').pack(side='left')
Button(f3, text='Go to frame 4', command=lambda:raise_frame(f4)).pack(side='left')

Label(f4, text='FRAME 4').pack()
Button(f4, text='Goto to frame 1', command=lambda:raise_frame(f1)).pack()

raise_frame(f1)
root.mainloop()
— レコバユ
ソース
28

警告：以下の回答は、フレームの破棄と再作成を繰り返すことにより、メモリリークを引き起こす可能性があります。

フレームを切り替える1つの方法 tkinterは、古いフレームを破棄してから、新しいフレームと交換することです。

ブライアン・オークリーの答えを修正して、古いフレームを交換する前に破壊しました。追加のボーナスとして、これによりcontainerオブジェクトが不要になり、任意のジェネリックFrameクラスを使用できるようになります。

# Multi-frame tkinter application v2.3
import tkinter as tk

class SampleApp(tk.Tk):
    def __init__(self):
        tk.Tk.__init__(self)
        self._frame = None
        self.switch_frame(StartPage)

    def switch_frame(self, frame_class):
        """Destroys current frame and replaces it with a new one."""
        new_frame = frame_class(self)
        if self._frame is not None:
            self._frame.destroy()
        self._frame = new_frame
        self._frame.pack()

class StartPage(tk.Frame):
    def __init__(self, master):
        tk.Frame.__init__(self, master)
        tk.Label(self, text="This is the start page").pack(side="top", fill="x", pady=10)
        tk.Button(self, text="Open page one",
                  command=lambda: master.switch_frame(PageOne)).pack()
        tk.Button(self, text="Open page two",
                  command=lambda: master.switch_frame(PageTwo)).pack()

class PageOne(tk.Frame):
    def __init__(self, master):
        tk.Frame.__init__(self, master)
        tk.Label(self, text="This is page one").pack(side="top", fill="x", pady=10)
        tk.Button(self, text="Return to start page",
                  command=lambda: master.switch_frame(StartPage)).pack()

class PageTwo(tk.Frame):
    def __init__(self, master):
        tk.Frame.__init__(self, master)
        tk.Label(self, text="This is page two").pack(side="top", fill="x", pady=10)
        tk.Button(self, text="Return to start page",
                  command=lambda: master.switch_frame(StartPage)).pack()

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

スタートページ 1ページ目 2ページ目

説明

switch_frame()を実装するすべてのClassオブジェクトを受け入れることによって機能しますFrame。次に、関数は古いフレームを置き換える新しいフレームを作成します。

  • 古い_frameものが存在する場合は削除し、新しいフレームに置き換えます。
  • .pack()メニューバーなど、で追加された他のフレームは影響を受けません。
  • を実装する任意のクラスで使用できます tkinter.Frame。
  • ウィンドウは、新しいコンテンツに合わせて自動的にサイズ変更されます

バージョン履歴

v2.3

- Pack buttons and labels as they are initialized

v2.2

- Initialize `_frame` as `None`.
- Check if `_frame` is `None` before calling `.destroy()`.

v2.1.1

- Remove type-hinting for backwards compatibility with Python 3.4.

v2.1

- Add type-hinting for `frame_class`.

v2.0

- Remove extraneous `container` frame.
    - Application now works with any generic `tkinter.frame` instance.
- Remove `controller` argument from frame classes.
    - Frame switching is now done with `master.switch_frame()`.

v1.6

- Check if frame attribute exists before destroying it.
- Use `switch_frame()` to set first frame.

v1.5

  - Revert 'Initialize new `_frame` after old `_frame` is destroyed'.
      - Initializing the frame before calling `.destroy()` results
        in a smoother visual transition.

v1.4

- Pack frames in `switch_frame()`.
- Initialize new `_frame` after old `_frame` is destroyed.
    - Remove `new_frame` variable.

v1.3

- Rename `parent` to `master` for consistency with base `Frame` class.

v1.2

- Remove `main()` function.

v1.1

- Rename `frame` to `_frame`.
    - Naming implies variable should be private.
- Create new frame before destroying old frame.

v1.0

- Initial version.
— Stevoisiak
ソース
1
この方法を試してみると、この奇妙なフレームのブリードオーバーが発生します。複製できるかどうかはわかり
— a
2
@quantikブリードオーバー効果は、古いボタンが適切に破棄されていないために発生します。ボタンをフレームクラスに直接アタッチしていることを確認してください（通常はself）。
— Stevoisiak 2018
1
後からswitch_frame()考えると、名前は少し誤解を招く可能性があります。名前を変更する必要がありreplace_frame()ますか？
— Stevoisiak 2018年
11
この回答のバージョン履歴部分を削除することをお勧めします。それは完全に役に立たない。履歴を見たい場合は、stackoverflowがそれを行うメカニズムを提供します。この答えを読んだほとんどの人は歴史を気にしません。
— ブライアンオークリー
2
バージョン履歴ありがとうございます。時間の経過とともに回答を更新および改訂したことを知っておくとよいでしょう。
— VasylVaskivskyi19年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.