30
29

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Tkinterで画面切り替え・画面遷移

Last updated at Posted at 2020-01-26

#Tkinterで画面切り替え
超シンプルなコード紹介。
別記事( ここ )はOpenCV関係のコードで長くなっちゃったんでこっちは短くまとめる。
pillowが入ってれば動くはず。
##コード

main.py
# -*- coding: utf-8 -*-
import tkinter as tk
import PIL.Image, PIL.ImageTk

class App(tk.Tk):
    # 呪文
    def __init__(self, *args, **kwargs):
        # 呪文
        tk.Tk.__init__(self, *args, **kwargs)

        # ウィンドウタイトルを決定
        self.title("Tkinter change page")

        # ウィンドウの大きさを決定
        self.geometry("800x600")

        # ウィンドウのグリッドを 1x1 にする
        # この処理をコメントアウトすると配置がズレる
        self.grid_rowconfigure(0, weight=1)
        self.grid_columnconfigure(0, weight=1)
#-----------------------------------main_frame-----------------------------
        # メインページフレーム作成
        self.main_frame = tk.Frame()
        self.main_frame.grid(row=0, column=0, sticky="nsew")
        # タイトルラベル作成
        self.titleLabel = tk.Label(self.main_frame, text="Main Page", font=('Helvetica', '35'))
        self.titleLabel.pack(anchor='center', expand=True)
        # フレーム1に移動するボタン
        self.changePageButton = tk.Button(self.main_frame, text="Go to frame1", command=lambda : self.changePage(self.frame1))
        self.changePageButton.pack()
#--------------------------------------------------------------------------
#-----------------------------------frame1---------------------------------
        # 移動先フレーム作成
        self.frame1 = tk.Frame()
        self.frame1.grid(row=0, column=0, sticky="nsew")
        # タイトルラベル作成
        self.titleLabel = tk.Label(self.frame1, text="Frame 1", font=('Helvetica', '35'))
        self.titleLabel.pack(anchor='center', expand=True)
        # フレーム1からmainフレームに戻るボタン
        self.back_button = tk.Button(self.frame1, text="Back", command=lambda : self.changePage(self.main_frame))
        self.back_button.pack()
#--------------------------------------------------------------------------

        #main_frameを一番上に表示
        self.main_frame.tkraise()

    def changePage(self, page):
        '''
        画面遷移用の関数
        '''
        page.tkraise()

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

##ざっと解説
ポイントはtkraiseというコマンド。tkraiseは指定のフレームを最前面に表示させる。
フレームを重ねて配置して、ボタンを押すたびに裏にあるフレームを持ってくる構成。
ボタンにはなんの装飾もせず超シンプルにしてあります。
##図解
こんなイメージ
コメント 2020-01-26 202500.png
##詳しく説明
コード中のコメントアウトに大体のことは書いてあるけど一応、、

まずメインフレーム(main_frame)と移動先のフレーム(frame1)を作成。
2つのフレームをgridメソッドを使って座標(0,0)に配置
gridを使うことで重ねて配置することが出来る。
タイトルラベルについては特に言うことなし。
ボタンウィジェットはcommandにchangePage関数を指定する。
changePage関数は引数にフレーム名をとる。
因みにボタンウィジェットのcommandに引数(selfはカウントしない)をとる関数を指定する場合、
command=lambda :関数
とする必要がある。
##おわり
かなり短いコードにしたので分かりやすいと思う。
今まで僕が見た中で最短だもの。
もちろんtkraiseを使わずその都度ページを表示したり消したりするやり方もあるけど一番簡単なのはtkraiseだと思う。

30
29
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
30
29

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?