[python3]画面遷移後の画面をスクロールさせたい

前提・質問したいこと

Python初心者です。
現在Python3(PyCharm)で簡単な在庫システムを作っています。
一枚目の画面から二枚目の画面へ偏移したあと二枚目の画面でスクロールができるようにしたいです。（画面遷移はできていますが，スクロールバー自体はあるもののスクロールができていない状況です）

また，スクロールができた後二枚目画面の「確定」と「Back」と書かれているボタン，「備品名」と「備品個数」と書かれたラベルだけをスクロールせずにとどめるようにしたいです。

↓名前記入ページ（1枚目）

↓個数記入ページ（2枚目）

発生している問題・エラーメッセージ

下記に示しているのが全文です。
備品の種類を増やしたいので個数記入ページ（2枚目画像）をスクロールできるようにしたいと考えていますが，使用しているのがキャンバスでなくフレームなためかうまくスクロールしてくれません。。。
↓スクロールさせたい部分

        # タイトルラベル作成
        self.titleLabel1 = tk.Label(self.frame1, text="   備品名      備品個数 ", font=('Helvetica', '25'))#このラベルをとどめておきたい
        self.titleLabel1.pack(anchor='nw', expand=True)
        self.titleLabel2 = tk.Label(self.frame1, text="   マジック赤", font=('Helvetica', '13'))
        self.titleLabel2.place(relx=0.02,rely=0.1)
        self.titleLabel3 = tk.Label(self.frame1, text="   マジック青", font=('Helvetica', '13'))
        self.titleLabel3.place(relx=0.02,rely=0.18)
        self.titleLabel4 = tk.Label(self.frame1, text="   マジック黒", font=('Helvetica', '13'))
        self.titleLabel4.place(relx=0.02,rely=0.26)

        # 備品個数作成
        self.titleLabel5 = tk.Label(self.frame1, text=data1, font=('Helvetica', '13'))
        self.titleLabel5.place(relx=0.29, rely=0.1)
        self.titleLabel6 = tk.Label(self.frame1, text=data2, font=('Helvetica', '13'))
        self.titleLabel6.place(relx=0.29, rely=0.18)
        self.titleLabel7 = tk.Label(self.frame1, text=data3, font=('Helvetica', '13'))
        self.titleLabel7.place(relx=0.29, rely=0.26)

        # 必要個数作成
        sptxt1 = StringVar()
        self.sp1 = Spinbox(self.frame1, textvariable=sptxt1, from_=0, to=10, increment=1)
        self.sp1.place(relx=0.56, rely=0.1)
        sptxt2 = StringVar()
        self.sp2 = Spinbox(self.frame1, textvariable=sptxt2, from_=0, to=10, increment=1)
        self.sp2.place(relx=0.56, rely=0.18)
        sptxt3 = StringVar()
        self.sp3 = Spinbox(self.frame1, textvariable=sptxt3, from_=0, to=10, increment=1)
        self.sp3.place(relx=0.56, rely=0.26)

↓全文

# -*- coding: utf-8 -*-
from tkinter import*
import tkinter.ttk as ttk
try: import tkinter as tk
except: import tkinter as tk
import datetime

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

        super().__init__(*args)
        self.variable = StringVar()
        # ウィンドウタイトルを決定
        self.title("前室在庫")

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

        # ウィンドウのグリッドを 1x1 にする
        # この処理をコメントアウトすると配置がズレる
        self.grid_rowconfigure(0, weight=1)
        self.grid_columnconfigure(0, weight=1)


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

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

        # タイトルラベル作成
        self.titleLabel = tk.Label(self.main_frame, text="↓NAME HERE↓", font=('Franklin Gothic Deni', '25'))
        self.titleLabel.pack(anchor='s', expand=True)
        # エントリーボックス作成
        self.entryBox = ttk.Entry(master=self.main_frame,width=30,font=('Helvetica', '15'))
        self.entryBox.pack(anchor='n', expand=True,ipady=15)
        # フレーム1に移動するボタン
        self.changePageButton = tk.Button(self.main_frame, text="      G O       ",font=('Franklin Gothic Deni', '15'), bg="light goldenrod", command=lambda : self.changePage1(self.frame1))
        self.changePageButton.place(relx=0.41,rely=0.6)


#--------------------------------------------------------------------------
#-----------------------------------frame1---------------------------------
        # 移動先フレーム作成

        self.frame1 = tk.Frame()
        self.frame1.grid(row=0, column=0, sticky="nsew")
        bar1 = tk.Scrollbar(self.frame1, orient=tk.VERTICAL)
        bar1.pack(side=tk.RIGHT, fill=tk.Y)
        bar2 = tk.Scrollbar(self.frame1, orient=tk.HORIZONTAL)
        bar2.pack(side=tk.BOTTOM, fill=tk.X)


        # ファイル開封
        f1 = open('マジック赤.txt')
        f2 = open('マジック青.txt')
        f3 = open('マジック黒.txt')

        data1 = f1.read()
        data2 = f2.read()
        data3 = f3.read()
        f1.close()
        f2.close()
        f3.close()
        # タイトルラベル作成
        self.titleLabel1 = tk.Label(self.frame1, text="   備品名      備品個数 ", font=('Helvetica', '25'))
        self.titleLabel1.pack(anchor='nw', expand=True)
        self.titleLabel2 = tk.Label(self.frame1, text="   マジック赤", font=('Helvetica', '13'))
        self.titleLabel2.place(relx=0.02,rely=0.1)
        self.titleLabel3 = tk.Label(self.frame1, text="   マジック青", font=('Helvetica', '13'))
        self.titleLabel3.place(relx=0.02,rely=0.18)
        self.titleLabel4 = tk.Label(self.frame1, text="   マジック黒", font=('Helvetica', '13'))
        self.titleLabel4.place(relx=0.02,rely=0.26)

        # 備品個数作成
        self.titleLabel5 = tk.Label(self.frame1, text=data1, font=('Helvetica', '13'))
        self.titleLabel5.place(relx=0.29, rely=0.1)
        self.titleLabel6 = tk.Label(self.frame1, text=data2, font=('Helvetica', '13'))
        self.titleLabel6.place(relx=0.29, rely=0.18)
        self.titleLabel7 = tk.Label(self.frame1, text=data3, font=('Helvetica', '13'))
        self.titleLabel7.place(relx=0.29, rely=0.26)

        # 必要個数作成
        sptxt1 = StringVar()
        self.sp1 = Spinbox(self.frame1, textvariable=sptxt1, from_=0, to=10, increment=1)
        self.sp1.place(relx=0.56, rely=0.1)
        sptxt2 = StringVar()
        self.sp2 = Spinbox(self.frame1, textvariable=sptxt2, from_=0, to=10, increment=1)
        self.sp2.place(relx=0.56, rely=0.18)
        sptxt3 = StringVar()
        self.sp3 = Spinbox(self.frame1, textvariable=sptxt3, from_=0, to=10, increment=1)
        self.sp3.place(relx=0.56, rely=0.26)

        # 備品個数-必要個数ボタン
        self.kakutei_button = tk.Button(self.frame1, text="      確   定      ", command=lambda: self.Kakutei(self.main_frame))
        self.kakutei_button.pack(anchor='s', expand=True)



        # フレーム1からmainフレームに戻るボタン
        self.back_button = tk.Button(self.frame1, text="    Back    ", command=lambda : self.changePage2(self.main_frame))
        self.back_button.place(relx=0.85, rely=0.01)

#--------------------------------------------------------------------------

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

        # フレーム1に移動するときのアクション
    def changePage1(self, page):
        '''
        画面遷移用の関数
        '''
        page.tkraise()

        date = datetime.datetime.now()
        print(date.year, "年", date.month, "月", date.day, "日", date.hour, "時", date.minute, "分", date.second, "秒")
        print(self.entryBox.get(), "さんこんにちは！")
        file = "出庫履歴.txt"
        f4 = open(file, "a", encoding="utf_8")
        print(date.year, "年", date.month, "月", date.day, "日", date.hour, "時", date.minute, "分", date.second, "秒",
              file=f4)
        print(self.entryBox.get(), "さんが入室しました。", file=f4)
        # メインフレームに移動するときのアクション
    def changePage2(self, page):
        '''
        画面遷移用の関数
        '''
        page.tkraise()
        print("お疲れさまでした！")
        file = "出庫履歴.txt"
        f4 = open(file, "a", encoding="utf_8")
        print(self.entryBox.get(), "さんが退室しました。", file=f4)
    def Kakutei(self,Page):
        f1 = open('マジック赤.txt')
        data1 = f1.read()
        f1.close()
        o = int(data1)
        p = int(self.sp1.get())
        a = o - p
        self.titleLabel5.destroy()
        f1 = open('マジック赤.txt', 'w')
        print(a, file=f1)
        self.titleLabel10 = tk.Label(self.frame1, text= a, font=('Helvetica', '13'))
        self.titleLabel10.place(relx=0.29, rely=0.1)

        f2 = open('マジック青.txt')
        data2 = f2.read()
        f2.close()
        q = int(data2)
        r = int(self.sp2.get())
        b = q - r
        self.titleLabel6.destroy()
        f2 = open('マジック青.txt', 'w')
        print(b, file=f2)
        self.titleLabel8 = tk.Label(self.frame1, text=b, font=('Helvetica', '13'))
        self.titleLabel8.place(relx=0.29, rely=0.18)

        f3 = open('マジック黒.txt')
        data3 = f3.read()
        f3.close()
        s = int(data3)
        t = int(self.sp3.get())
        c = s - t
        self.titleLabel7.destroy()
        f3 = open('マジック黒.txt', 'w')
        print(c, file=f3)
        self.titleLabel9 = tk.Label(self.frame1, text=c, font=('Helvetica', '13'))
        self.titleLabel9.place(relx=0.29, rely=0.26)

        print("残り在庫")
        print("マジック赤", a, "個", "        (-", p, "個)")
        print("マジック青", b, "個", "        (-", r, "個)")
        print("マジック黒", c, "個", "        (-", t, "個)")

        file = "出庫履歴.txt"
        f4 = open(file, "a", encoding="utf_8")
        print("マジック赤", a, "個", "        (-", p, "個)", file=f4)
        print("マジック青", b, "個", "        (-", r, "個)", file=f4)
        print("マジック黒", c, "個", "        (-", t, "個)", file=f4)


if __name__ == "__main__":
    app = App()
    def process_b():
        quit()

    def key(event):

        if event.char == "@":
            process_b()

    app.bind("<Key>", key)
    app.focus_set()

    app.mainloop()

試したこと

フレームを使用していることが原因だと考えて自分なりにフレームをキャンバスに入れ替えてもうまくスクロールしてくれませんでした。

Pythonをはじめて日は浅く，知識不足ゆえ何卒ご教示お願い致します。
お手を貸していただけると幸いです。

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

回答1件

ベストアンサー

スクロールバーの部品を配置しているだけで、設定がされてません。

フレームを使用していることが原因だと考えて自分なりにフレームをキャンバスに入れ替えてもうまくスクロールしてくれませんでした。

キャンバスに入れる所は合ってます。残りの手順を確認して見て下さい。

キャンバスに入れる ... canvas.create_window
スクロール範囲を指定する scrollregion=canvas.bbox("all")

　リサイズ時に対応できるように bind <Configure> イベント内で呼び出す。

スクロールイベントを設定

　canvas の xscrollcommand, yscrollcommand に scrollbar.set

スクロールバーイベントの設定

　command に canvas の yview/xview

python
1#!/usr/bin/env python3.8
2
3
4import tkinter as tk
5from tkinter import ttk
6
7# NOTE: this code was copied from Layoutx project.
8
9class AutoScrollbar(ttk.Scrollbar):
10    # スクロールバー表示が不要な場合非表示にする
11    def set(self, lo, hi):
12        if float(lo) <= 0.0 and float(hi) >= 1.0:
13            if self.grid_info():
14                self.grid_remove()
15        else:
16            if not self.grid_info():
17                self.grid()
18        super().set(lo, hi)
19
20
21class ScrolledFrame(ttk.Frame):
22    def __init__(self, *args, **kw):
23        super().__init__(*args, **kw)
24
25        canvas = tk.Canvas(self)
26        vbar = AutoScrollbar(self, orient=tk.VERTICAL)
27        hbar = AutoScrollbar(self, orient=tk.HORIZONTAL)
28        grip = ttk.Sizegrip(self)
29        viewport = ttk.Frame(canvas)
30
31        self.grid_rowconfigure(0, weight=1)
32        self.grid_columnconfigure(0, weight=1)
33        canvas.grid(row=0, column=0, sticky=tk.NSEW)
34        vbar.grid(row=0, column=1, sticky=tk.NS)
35        hbar.grid(row=1, column=0, sticky=tk.EW)
36        grip.grid(row=1, column=1)
37
38        canvas.create_window(0, 0, window=viewport, anchor=tk.NW)
39
40        canvas.config(xscrollcommand=hbar.set, yscrollcommand=vbar.set)
41        vbar.config(command=canvas.yview)
42        hbar.config(command=canvas.xview)
43
44        def _on_configure(event):
45            canvas.config(scrollregion=canvas.bbox(tk.ALL))
46
47        canvas.bind("<Configure>", _on_configure)
48
49        self._viewport = viewport
50        self._canvas = canvas
51        self._vbar = vbar
52        self._hbar = hbar
53        self._grip = grip
54
55    @property
56    def container(self):
57        return self._viewport
58
59
60def main():
61    root = tk.Tk()
62
63    frame = ScrolledFrame(root)
64    frame.pack(fill=tk.BOTH, expand=tk.YES)
65    viewport = frame.container # ← キャンバス内に配置した frame 
66
67    # ボタン20個を縦に配置。
68    for idx in range(20):
69        button = ttk.Button(viewport)
70        button.config(text="Button {}".format(idx))
71        button.pack()
72
73    root.mainloop()
74
75
76if __name__ == '__main__':
77    main()

投稿2020/11/12 01:16

teamikl

総合スコア8664

MM921

2020/11/16 00:47

teamiklさん，返信が遅くなり申し訳ありません。ご回答ありがとうございました。やっぱりスクロールバーの設置には設定が必要だったんですね。おっしゃったとおり残りの手順を順を追って確認していったところ，うまく動作するようになりました。非常にわかりやすい回答でとても助かりました。ありがとうございました。

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