pythonのTkinterで,Buttonを多数配置したCanvasと,Scrollbarとを紐づかせたが、上手くいかない

Question

多数のButtonウィジェットをCanvasウィジェット上に縦に配置し、スクロールできるようにいろいろ試してみたのですが、スクロールできるようになりません。以下のソースコードをどのように改善すればよいでしょうか。
Pythonのバージョンは3.10.1です。

from tkinter import *
from tkinter.font import Font

#ウィンドウ
root = Tk()
root.geometry('600x400')
root.resizable(width = False, height = False)

#フォント
font = Font(root, size = 20)

#キャンバス
cvs = Canvas(root)

#縦スクロールバー
scr = Scrollbar(root, orient = VERTICAL)

#紐づけ
scr.config(command = cvs.yview)
cvs.config(yscrollcommand = scr.set)

#ボタン(15個)
button_list = []
for i in range(15):
    button_list.append(
        Button(
            cvs,
            text = f'ボタン{i+1}',
            font = font,
        )
    )

#各ウィジェットを配置
scr.pack(side = RIGHT, fill = Y)
cvs.pack(side = RIGHT)
for button in button_list:
    button.pack(side = TOP)

#ウィンドウ表示
root.mainloop()

上記ソースコードの実行結果↓

Answer 1

Canvas 内でスクロールしたい場合は、
create_window でキャンバス内のアイテムとして配置する必要があります。

現状のコードでは、Canvas 上に
ウィジェットのレイアウトマネージャ(pack/grid) で配置しています。

率直な解決策としては、pack で配置してる箇所を cvs.create_window での配置に変更ですが、
create_window では座標指定が必要になってくるので、間に Frame を嚙ませるといいかもしれません。

• Button を Frame 上に配置する
• Frame を create_window で Canvas 内アイテムとして配置する

以上でボタンがキャンバス内のスクロール対象になるはずですが、
望み通りの挙動にするには、他にレイアウトの問題があります。
キャンバスの縦幅とスクロールバーの長さがあわなくなるので、適宜調整してください。(cvs.pack の fill 辺り)

Comments

[urue]

回答ありがとうございます。早速試してみたいと思います。

Answer 2

以下のソースコードで、表示が少し変ですが、ボタン部分がスクロールできるようになりました。質問文のソースコードからの変更・追記は以下の四つです

• Canvas に scrollregion パラメータを設定
• Canvas を親ウィジェットとする Frame を新たに生成
• Button の親ウィジェットを、新たに生成した Frame に設定
• Frame を pack ではなく、Canvas の create_window で配置

from tkinter import *
from tkinter.font import Font

#ウィンドウ
root = Tk()
root.geometry('600x400')
root.resizable(width = False, height = False)

#フォント
font = Font(root, size = 20)

#キャンバス
cvs = Canvas(
    root,
    scrollregion = (0, 0, 100, 1000),
)

#縦スクロールバー
scr = Scrollbar(root, orient = VERTICAL)

#紐づけ
scr.config(command = cvs.yview)
cvs.config(yscrollcommand = scr.set)

#フレーム
frm = Frame(cvs)

#ボタン(15個)
button_list = []
for i in range(15):
    button_list.append(
        Button(
            frm,
            text = f'ボタン{i+1}',
            font = font,
        )
    )

#各ウィジェットを配置
scr.pack(side = RIGHT, fill = Y)
cvs.pack(side = RIGHT)
cvs.create_window(0, 0, window = frm, anchor = NW)
for button in button_list:
    button.pack(side = TOP)

#ウィンドウ表示
root.mainloop()