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

PythonのTkinterでフレーム切り替えを行う
◆ Live配信スケジュール ◆
サイオステクノロジーでは、Microsoft MVPの武井による「わかりみの深いシリーズ」など、定期的なLive配信を行っています。
⇒ 詳細スケジュールはこちらから
⇒ 見逃してしまった方はYoutubeチャンネルをご覧ください
VSCode Dev Containersで楽々開発環境構築祭り〜Python/Reactなどなど〜
Visual Studio Codeの拡張機能であるDev Containersを使ってReactとかPythonとかSpring Bootとかの開発環境をラクチンで構築する方法を紹介するイベントです。
https://tech-lab.connpass.com/event/311864/

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

はじめもす

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

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

Tkinterで紙芝居を実装する

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

Tkinterでフレームを切り替える方法  一つのGridに重ねて変更する
一番上のフレームを変更することで表示変更

ソースコードは以下になります。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関連で書いたブログをまとめておきます。

ではまた~

 

アバター画像
About 龍:Ryu 106 Articles
2022年入社で主にフロントエンドの業務でTailwindと遊ぶ日々。お酒とうまいご飯が好きで、運動がちょっと嫌いなエンジニアです。しゃべれるエンジニアを目指しておしゃべりとブログ執筆に注力中(業務もね)//
ご覧いただきありがとうございます! この投稿はお役に立ちましたか?

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

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


ご覧いただきありがとうございます。
ブログの最新情報はSNSでも発信しております。
ぜひTwitterのフォロー&Facebookページにいいねをお願い致します!



>> 雑誌等の執筆依頼を受付しております。
   ご希望の方はお気軽にお問い合わせください!

Be the first to comment

Leave a Reply

Your email address will not be published.


*


質問はこちら 閉じる