PythonのTkinterでフレーム切り替えを行う

今回は、Pythonの標準インストールされている『Tkinter』の配置に関する実践的Tipsを書き留めています。Classで作成したフレームをキー入力によって切り替える方法について書いています。Classで定義したものを切り替えた場合、キーバインドが反応しない問題についても軽く触れております。

1 はじめもす
2 Tkinterで紙芝居を実装する
- 2.1 classで定義したbindが反応しない
3 おわりもす

はじめもす

ども！最近ベランダにキャンプ用の椅子を置いてボケーっと外を眺めている龍ちゃんです。思い付きでベランダに出てみたのですが、意外とリフレッシュになっています。さすがに仕事時間以外でベランダに出ていますよｗ

さて、続きの『Tkinter』になります。今回の内容は実践的なシナリオになります。今回取り扱うシナリオとしては「Tkinterでフレームを切り替えて紙芝居を実装」になります。フロントエンドだとSPA的に画面を切り替えるイメージが近いかと思います。

Tkinterで紙芝居を実装する

イメージは以下になります。一つのフレームに重ねて複数のフレームを配置します。もう特に説明をすることもないのが困るところです。

ソースコードは以下になります。containerを画面いっぱいに表示して、その上にFrameを(0,0)に配置しています。

import tkinter as tk

class App(tk.Tk):
    def __init__(self):
        super().__init__()
        self.title("Sample Tkinter App")
        self.geometry("400x300")

        self.frames = {}

        self.container = tk.Frame(self)  # フレームを配置するためのコンテナ
        self.container.grid_columnconfigure(0, weight=1)
        self.container.grid_rowconfigure(0, weight=1)
        self.container.pack(expand=True, fill="both")  # コンテナを画面いっぱいに配置

        for F in (FrameOne, FrameTwo, FrameThree):
            frame = F(self.container)
            self.frames[F] = frame
            frame.grid(
                row=0,
                column=0,
                sticky="nsew",
            )

        self.show_frame(FrameOne)  # 一番最初に表示するフレームの指定

        self.bind_all("1", lambda e: self.show_frame(FrameOne))
        self.bind_all("2", lambda e: self.show_frame(FrameTwo))
        self.bind_all("3", lambda e: self.show_frame(FrameThree))

    def show_frame(self, _frame):
        frame: tk.Frame = self.frames[_frame]
        # フレームにフォーカスを当てる
        frame.focus_force()
        # フレームを前面に配置
        frame.tkraise()

class FrameOne(tk.Frame):
    def __init__(self, parent):
        super().__init__(parent)
        self.configure(bg="blue")

class FrameTwo(tk.Frame):
    def __init__(self, parent):
        super().__init__(parent)
        self.configure(bg="red")

class FrameThree(tk.Frame):
    def __init__(self, parent):
        super().__init__(parent)
        self.configure(bg="green")

app = App()
app.mainloop()

数字キーを1,2,3を押してもらえれば、画面の色が変更されるかと思います。

frame.tkraise() # フレームを前面に配置

このコマンドで切り替えています。

classで定義したbindが反応しない

classで定義したフレームが切り替えた場合、キーバインドが反応しないといった問題にぶち当たるかもしれません。フレームに対してフォーカスが乗っていない可能性があります。というか十中八九原因はそれだと思います。切り替えのタイミングで以下のコマンドを乗っけておくと解消するかもしれません。

frame.focus_force()

おわりもす

ども～プチTipsを空き時間で書き溜めるといったものが趣味になりつつあります。ふんわりとブログを書いているので、短いブログを短いスパンで書くのが一番楽かもしれません。たまには長編を書きたいところですね。

Python系の記事をちょこちょこっと書いているのですが、誰かの助けになるとうれしいですね。以下にPython関連で書いたブログをまとめておきます。

ではまた～

ご覧いただきありがとうございます！この投稿はお役に立ちましたか？

役に立った役に立たなかった

0人がこの投稿は役に立ったと言っています。

はじめもす

Tkinterで紙芝居を実装する

classで定義したbindが反応しない

おわりもす

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル