Python tkinterでフレームを複数つくりボタンをクリックしたら前後を入れ替えたい。

前提

Python tkinterでフレームを複数つくりボタンをクリックしたら前後を入れ替える機能を作ろうとしています。

フレームをmain_frameとsub_frameの二種類を作成し、main_frameに次のページボタンを設置し、押されたらmain_frameとsub_frameを入れ替わるようにしたいのですが、main_frameとsub_frameが表示されません。

ウィンドウは表示されているので、フレームがうまく作成されていないと考えています。tk.Frameで作成し、pack()で配置をしていると思うのですが表示されません。

初歩的な部分かと思いますが、間違っているところ、足りないところを教えて頂きたく思います。
よろしくお願いします。

コード
import tkinter as tk
import PIL.Image, PIL.ImageTk
import datetime
import time

root = tk.Tk()

#----------------計測に使う数値--------------------------------------------

#-----------------------------------クラス宣言----------------------------
class Stopwatch_frame(tk.Frame):	#class tk.Frameを継承してStopwatchを定義
	def __init__(self,main_Frame):
		super().__init__(main_Frame)	#親クラスのメソッドを実行
		#self.pack()

		# ウィンドウタイトルを決定
		main_Frame.title("ストップウォッチ")

        # ウィンドウの大きさを決定
		main_Frame.geometry("800x600")
		main_Frame.config(bg="black")

		self.startTime=time.time()
		self.stopTime=0.0
		self.elapsedTime=0.0
		self.playTime=False

		# ウィンドウのグリッドを 1x1 にする
		self.grid_rowconfigure(0, weight=1)
		self.grid_columnconfigure(0, weight=1)

#-----------------------------------main_frame-----------------------------

        # メインページフレーム作成
		self.main_frame = tk.Frame(bg='blue')
		#self.main_frame.grid(row=0, column=0, sticky="nsew")
		self.main_frame.pack()

		#日付ラベルの作成
		self.label = tk.Label(self.main_frame,text=datetime.date.today(),font=("", 30, "bold"),background='skyblue')
		self.label.place(x=300,y=100)

		#main_frameを一番上に表示
		self.main_frame.tkraise()
		
		#-----------------------------------移動先frame---------------------------------
		# 移動先フレーム作成

		self.sub_frame = tk.Frame(bg='white')
		#self.sub_frame.grid(row=0, column=0, sticky="nsew")
		self.sub_frame.pack()
		

        # タイトルラベル作成
		self.titleLabel = tk.Label(self.sub_frame, text="Frame 1", font=('Helvetica', '35'))
		self.titleLabel.place(x = 400, y = 400)
        
		
		#main_frameを一番上に表示
		#self.main_frame.tkraise()

		#メインフレームボタン
		self.resetButton = tk.Button(self.main_frame,text="リセット", command= resetButtonClick, width=20).place(x=550, y=370)
		self.startButto =  tk.Button(self.main_frame,text="スタート", command= startButtonClick, width=20).place(x=100, y=370)
		self.stopButton =  tk.Button(self.main_frame,text="ストップ", command= stopButtonClick, width=20).place(x=320, y=370)
		self.changePageButton = tk.Button(self.main_frame, text="次のページ", command=change_page(self,self.sub_frame), width=20).place(x=550, y=450)
		self.recordButton = tk.Button(self.main_frame,text="記録",width=20).place(x=320, y=450)

		#タイマー用のキャンパス
		self.canvas = tk.Canvas(self.main_frame,width=400,height=120,bg="skyblue")	
		self.canvas.place(x=200,y=180)


	

#----------------関数-----------------------------------------------------

#ページの切り替え
def change_page(self,page):
	page.tkraise()

def resetButtonClick(self):
		self.startTime=time.time()
		self.stopTime=0.0
		self.elapsedTime=0.0
		self.playTime=False	#計測をやめる

def startButtonClick(self):
	if not self.playTime:	#flagがFalseだったら実行(計測を行っていない)
		self.startTime=time.time()-self.elapsedTime	#スタート時間から経過時間を引いた値を格納
		self.playTime=True	#flagをTrueに変える（計測を行う）

def stopButtonClick(self):
	if self.playTime:
		self.stopTime=time.time()-self.startTime	#現在の時刻から開始時間を引いた値を格納
		self.playTime=False	#flagをTrueに変える(計測を行っていない)

def update(self):
		self.canvas.delete("Time")
		if self.playTime == True:
			self.elapsedTime=time.time()-self.startTime
			self.canvas.create_text(280,40,text=round(self.elapsedTime,1),font=("Helvetica",40,"bold"),fill="black",tag="Time",anchor="e")
		else:
			self.canvas.create_text(280,40,text=round(self.stopTime,1),font=("Helvetica",40,"bold"),fill="black",tag="Time",anchor="e")

		self.after(50,self.update)	#更新させる間隔



def main():
	
	app = Stopwatch_frame(main_Frame = root)
	
	app.mainloop()

if __name__ == "__main__":	## モジュールを直接実行した時だけ、実行したいコード
   
    main()

meg_

2022/08/27 13:34

> うまく機能しません。具体的に説明していただけますでしょうか？

yu_jin

2022/08/27 13:50

失礼しました。「うまく機能しません。」→ボタンを押してもフレームの入れ替わりが起こらないということです。ですが、フレーム自体の作成が成功しているのか？という問題が出てきております。質問を訂正させていただきます。

meg_

2022/08/27 14:51

質問のコードをこちらの環境で実行すると黒い画面のみ表示されます。そちらでばボタンが表示されているのでしょうか？

yu_jin

2022/08/27 15:03

いいえ、こちらでもウィンドウタイトル「ストップウォッチ」の黒い画面が表示されています。本来行いたい動きは、実行したら各ボタンを設置しているmain_frameが表示され、設置されている「次のページ」を押すとsub_frameと入れ替わるということを行いたいのですが、そもそもmain_frameが表示されなくて困っています。

行動規範の内容に同意します

回答1件

ベストアンサー

当方の環境では質問のコードを実行すると黒い画面のみ表示されましたので、質問のコードを色々と修正いたしました。
元のコードと比較いただき変更点について必要であれば参考になさってください。

Python
1import tkinter as tk
2import PIL.Image, PIL.ImageTk
3import datetime
4import time
5
6root = tk.Tk()
7
8#----------------計測に使う数値--------------------------------------------
9
10#-----------------------------------クラス宣言----------------------------
11class Stopwatch_frame(tk.Frame):	#class tk.Frameを継承してStopwatchを定義
12	def __init__(self, main_Frame):
13		super().__init__(main_Frame)	#親クラスのメソッドを実行
14
15		# ウィンドウタイトルを決定
16		self.master.title("ストップウォッチ")
17
18        # ウィンドウの大きさを決定
19		self.master.geometry("800x600")
20		self.master.config(bg="black")
21
22		self.startTime=time.time()
23		self.stopTime=0.0
24		self.elapsedTime=0.0
25		self.playTime=False
26
27		# ウィンドウのグリッドを 1x1 にする
28		self.master.grid_rowconfigure(0, weight=1)
29		self.master.grid_columnconfigure(0, weight=1)
30
31#-----------------------------------main_frame-----------------------------
32
33        # メインページフレーム作成
34		self.main_frame = tk.Frame(main_Frame, bg='blue')
35		self.main_frame.grid(row=0, column=0, sticky="nsew")
36
37		#日付ラベルの作成
38		self.label = tk.Label(self.main_frame,text=datetime.date.today(),font=("", 30, "bold"),background='skyblue')
39		self.label.place(x=300,y=100)
40		
41		#-----------------------------------移動先frame---------------------------------
42		# 移動先フレーム作成
43
44		self.sub_frame = tk.Frame(bg='white')
45		self.sub_frame.grid(row=0, column=0, sticky="nsew")	
46
47        # タイトルラベル作成
48		self.titleLabel = tk.Label(self.sub_frame, text="Frame 1", font=('Helvetica', '35'))
49		self.titleLabel.place(x = 400, y = 400)
50
51		#main_frameを一番上に表示
52		self.main_frame.tkraise()
53
54		#メインフレームボタン
55		self.resetButton = tk.Button(self.main_frame,text="リセット", command= resetButtonClick, width=20).place(x=550, y=370)
56		self.startButto =  tk.Button(self.main_frame,text="スタート", command= startButtonClick, width=20).place(x=100, y=370)
57		self.stopButton =  tk.Button(self.main_frame,text="ストップ", command= stopButtonClick, width=20).place(x=320, y=370)
58		# self.changePageButton = tk.Button(self.main_frame, text="次のページ", width=20).place(x=550, y=450)
59		self.changePageButton = tk.Button(self.main_frame, text="次のページ", command=lambda: change_page(self.sub_frame), width=20).place(x=550, y=450)
60		self.recordButton = tk.Button(self.main_frame,text="記録",width=20).place(x=320, y=450)
61
62		#タイマー用のキャンパス
63		self.canvas = tk.Canvas(self.main_frame,width=400,height=120,bg="skyblue")	
64		self.canvas.place(x=200,y=180)
65
66
67	
68
69#----------------関数-----------------------------------------------------
70
71#ページの切り替え
72def change_page(page):
73	page.tkraise()
74
75def resetButtonClick(self):
76		self.startTime=time.time()
77		self.stopTime=0.0
78		self.elapsedTime=0.0
79		self.playTime=False	#計測をやめる
80
81def startButtonClick(self):
82	if not self.playTime:	#flagがFalseだったら実行(計測を行っていない)
83		self.startTime=time.time()-self.elapsedTime	#スタート時間から経過時間を引いた値を格納
84		self.playTime=True	#flagをTrueに変える（計測を行う）
85
86def stopButtonClick(self):
87	if self.playTime:
88		self.stopTime=time.time()-self.startTime	#現在の時刻から開始時間を引いた値を格納
89		self.playTime=False	#flagをTrueに変える(計測を行っていない)
90
91def update(self):
92		self.canvas.delete("Time")
93		if self.playTime == True:
94			self.elapsedTime=time.time()-self.startTime
95			self.canvas.create_text(280,40,text=round(self.elapsedTime,1),font=("Helvetica",40,"bold"),fill="black",tag="Time",anchor="e")
96		else:
97			self.canvas.create_text(280,40,text=round(self.stopTime,1),font=("Helvetica",40,"bold"),fill="black",tag="Time",anchor="e")
98
99		self.after(50,self.update)	#更新させる間隔
100
101
102
103def main():
104	
105	app = Stopwatch_frame(root)
106	
107	app.mainloop()
108
109if __name__ == "__main__":	## モジュールを直接実行した時だけ、実行したいコード
110   
111    main()