Canvasのサイズを自動的に変化させたい

Question

実現したいこと

tkinterのCanvasを子とするgridで配置したFrameを適切なサイズにしたいです。言葉で説明するのが難しいので以下の画像を見て頂きたいです。

1つ目の画像（図1）ではメインウィンドウがgridで配置した4つのFrameで構成されています。左上、左下、右上にはTextウィジェットがwidth=80, height=30の同サイズで配置されています。右下のFrame（以下Canvasフレームと呼びます）はCanvasウィジェットをもつFrameとボタンウィジェットを持つFrameとの2つのFrameで構成されたFrameがgridで4つ配置されています。

図１の画像のウィンドウでは、どのTextウィジェットも同サイズで、Canvasフレームの大きさはそれらのTextウィジェットの大きさに合わせるようなサイズになっており、ボタンウィジェットもそれに応じてサイズが大きくなっています。しかし、Canvasのサイズが小さいのでウィンドウサイズ自体はこのサイズで固定して、Canvasをもつフレームの大きさを大きくしたいです。Canvasには一応fill=X, expand=Trueを設定したいますが、Canvasのサイズは大きくならずボタンのサイズが大きくなっています。

そこで、Canvasのサイズを指定せずに実行したところ2つ目の画像（図2）となりました。Canvasのサイズ自体は大きくなりましたが、その変化に引っ張られて左下のTextウィジェットのサイズが変化して、メインウィンドウのサイズが縦に長くなっています。

理想としては、ウィンドウのサイズは図１のままに、その中でCanvasの大きさを出来る限り大きくしたいです。
説明が分かりずらいかもしれません。
分かりずらい箇所はご指摘をお願いします。

図１

図２

該当のソースコード

ソースコードでは、rootにTextウィジェットを含むフレーム（左上、左下、右上）とCanvasを含むフレーム（右下）をgirdで配置しています。右下のフレームでは、Canvasを含むフレーム4つががgridで配置されています。

from tkinter import *
import random

def createWordList(cvs):
    # word list
    space = 10
    size = 15
    h = 0
    w = 80
    words = ['フリー', '緑色', '7年保存', 'ビスケット', '電卓', '災害備蓄用', '放送禁止用語', 'キャプテンアメリカザファーストアベンジャー', '日本初と', '史上最強']
    # ワードリスト設定
    cnt = 0
    for i in range(len(words)):
        word = words[i]
        new_word = word
        if len(word) > 5:
            new_word = ''
            for j in range(len(word)):
                cnt += 1
                if cnt % 6 == 0:
                    new_word += '\n'
                new_word += word[j]
            cnt = 0
        words[i] = new_word
    words_list = []
    for i in range(10):
        for word in words:
            words_list.append(word)
    words_list.append('last word')
    N = len(words_list)
    # テキストサイズの取得
    bbox_h_list = []
    cnt = 0
    for i in range(N):
        id = cvs.create_text(0, 0, text=words_list[i], font=('', size))
        x0, y0, x1, y1 = cvs.bbox(id)
        bbox_h_list.append(y1 - y0)
    # キャンバスクリア
    cvs.delete('all')
    # テキスト描画
    items = []
    pre_y = 0
    pre_h = 0
    cnt = 0
    for i in range(N):
        _h = bbox_h_list[i]
        _y = space + _h / 2 + pre_y + pre_h / 2
        cnt += 1
        item = cvs.create_text(w, _y, text=words_list[i], font=('', size), tag=f'word:{words_list[i]}')
        items.append(item)
        pre_y = _y
        pre_h = bbox_h_list[i]
        x0, y0, x1, y1 = cvs.bbox(item)
    # パラメータ
    min_h = min(bbox_h_list)
    rH = min_h * 1.0
    xmax = 0
    ymax = 0
    for item in items:
        x0, y0, x1, y1 = cvs.bbox(item)
        if xmax < x1:
            xmax = x1
        if ymax < y1:
            ymax = y1
    # バー配置
    BM = 100
    tbx = 15
    for i in range(N):
        item = items[i]
        x0, y0, x1, y1 = cvs.bbox(item)
        p = random.random()
        _h = y1 - y0
        yc = y1 - (_h / 2)
        rec = cvs.create_rectangle(xmax + tbx, yc - rH / 2, xmax + tbx + p * BM, yc + rH / 2, fill='red', tag='rec:')
        items.append(rec)
    # スクロール範囲
    cvs.configure(scrollregion=(0,0, xmax + tbx + BM + 20, ymax + 20))
    return items
    
def createWordListFrame(master, k):
    wl_f = Frame(master)
    wl_f.grid()

    cvs_f = Frame(wl_f)
    cvs_f.pack(side=TOP, fill=BOTH, expand=True)

    cvs = Canvas(cvs_f, bg='#FFFFFF', scrollregion=(0,0,500,5000))
    hbar = Scrollbar(cvs_f, orient=HORIZONTAL)
    hbar.pack(side=BOTTOM, fill=X)
    hbar.config(command=cvs.xview)
    vbar = Scrollbar(cvs_f, orient=VERTICAL)
    vbar.pack(side=RIGHT, fill=Y)
    vbar.config(command=cvs.yview)
    # キャンバスサイズ
    cvs.config(width=5, height=25)
    cvs.config(xscrollcommand=hbar.set, yscrollcommand=vbar.set)
    cvs.pack(side=TOP, expand=True, fill=BOTH)
    items_list.append(createWordList(cvs))
    cvs.bind("<MouseWheel>", lambda event, cvs=cvs: mouseYScroll(event, cvs))
    cvs.bind('<1>', lambda event, cvs=cvs: click(event, cvs, k))

    bt_f = Frame(wl_f, bg='blue')
    bt_f.pack(side=BOTTOM, fill=BOTH, expand=True)
    bt = Button(bt_f, text='clear', command= lambda cvs=cvs: click2(cvs))
    bt.pack(side=TOP, anchor=CENTER, expand=True, fill=BOTH)

    return wl_f, cvs

def WLarrange():
    global WLframe
    global wl_fs
    global fN
    row = 0
    clm = 0
    for i in range(fN):
        wl_f = wl_fs[i]
        wl_f.grid(row=row, column=clm, sticky=NSEW)
        WLframe.grid_rowconfigure(row, weight=1)
        WLframe.grid_columnconfigure(clm, weight=1)
        clm += 1
        if clm == fN // 2 + fN % 2:
            row += 1
            clm = 0

def setText(f):
    txt = Text(f, width=80, height=30)
    txt.pack(side=TOP, expand=True, fill=BOTH)

def mouseYScroll(event, cvs):
    if event.delta > 0:
        cvs.yview_scroll(-1, 'units')
    elif event.delta < 0:
        cvs.yview_scroll(1, 'units')

def click(event, cvs, k):
    global items_list
    items = items_list[k]
    x, y = cvs.canvasx(event.x), cvs.canvasy(event.y)
    objs = [obj for obj in cvs.find_overlapping(x,y,x,y)]
    tgs = [cvs.itemcget(obj, 'tags') for obj in objs]
    if len(objs) > 0:
        for item in items:
            if 'word:' in cvs.itemcget(item, 'tags'):
                cvs.itemconfig(item, fill='black')
                cvs.itemconfig(item, font=('Helvetica', 15))
    for obj in objs:
        if 'word:' in cvs.itemcget(item, 'tags'):
            cvs.itemconfig(obj, fill='blue')
            cvs.itemconfig(obj, font=('Helvetica', 15, 'bold'))

def click2(cvs):
    cvs.delete('all')
        
root=Tk()

BTFrame1 = Frame(root)
BTFrame1.grid(row=0, column=0, sticky=NSEW)
setText(BTFrame1)

BTFrame2 = Frame(root)
BTFrame2.grid(row=0, column=1, sticky=NSEW)
setText(BTFrame2)

BTFrame3 = Frame(root)
setText(BTFrame3)
BTFrame3.grid(row=1, column=0, sticky=NSEW)

WLframe = Frame(root)
WLframe.grid(row=1, column=1, sticky=NSEW)
items_list = []
cvss = []
wl_fs = []
fN = 4
for i in range(fN):
    wl_f, cvs = createWordListFrame(WLframe, i)
    wl_fs.append(wl_f)
    cvss.append(cvs)
WLarrange()

root.grid_rowconfigure(0, weight=1)
root.grid_rowconfigure(1, weight=1)
root.grid_columnconfigure(0, weight=1)
root.grid_columnconfigure(1, weight=1)

root.mainloop()

Answer 1

ボタンを配置するフレームが余分に作られているので、
ボタンに対するレイアウト指定は、そのフレーム内でしか有効になりません。

bt.pack(side=TOP, anchor=CENTER, expand=False) とすると
ボタンは意図通りの大きさになりますが、下地の青いフレームが見えてしまいます。

レイアウトを外側に伝搬させるには、親となるフレームを伸縮可能にする必要がありますが、
packやgridのオプション指定が複雑になる為、

不要なフレームを省いて、キャンバスを配置しているフレームに直接配置して見て下さい。

wl_f: Frame
  cvs_f: Frame
    cvs: Canvas
    hbar: Scrollbar
    vbar: Scrollbar
  bt_f: Frame <-- ここを省く
    bt: Button

- bt_f = Frame(wl_f, bg='blue')
- bt_f.pack(side=BOTTOM, fill=BOTH, expand=True)

- bt = Button(bt_f, text='clear', command= lambda cvs=cvs: click2(cvs))
- bt.pack(side=TOP, anchor=CENTER, expand=True, fill=BOTH)

# 変更点2か所 Buttonの親ウィジェット, expand True -> False

+ bt = Button(wl_f, text='clear', command= lambda cvs=cvs: click2(cvs))
+ bt.pack(side=TOP, anchor=CENTER, expand=False, fill=BOTH)

Comments

[yamatan]

上手くいきました。
ありがとうございます。
むやみにフレームを配置するのも気を付けなけらば行けませんね。