【tkinter】フレーム内のウィジェット均等配置について【Python】

Question

フレーム内のウィジェットを均等に配置したい

独学でGUIの勉強をしています。

図のように、大きなラベルフレームの中にフレーム１、２を入れ、それぞれの中にLabelとEntryをgridしているのですが、デザインが思ったようになりません。

解消したい問題点は2点です。
１．フレーム１内にgridした同じ行内のEntryウィジェットを、フレーム横幅に対して均等な長さで配置したい

２．フレーム１の下により横幅の大きいフレーム２を配置しており、フレーム１自体の横幅はフレーム２に合わせて拡張されるが、フレーム１内にgridしたウィジェットの横幅は元のままになっている（padx=5で右端まで伸びているはずのEntry3が、拡張できていない）

解決法に心当たりのある方、ご回答よろしくお願いします。

該当のソースコード

import tkinter as tk
from tkinter import ttk
import tkinter.font as font
from tkinter.scrolledtext import ScrolledText

#tk
root = tk.Tk()
root.focus_force()
root.resizable(False, False)
root.title("APP")


# 画面ぼやけ対策
import ctypes
try:
 ctypes.windll.shcore.SetProcessDpiAwareness(True)
except:
 pass

# =============================================================================
# 事前準備
pad = {"padx":5, "pady":5}
we = tk.W + tk.E
fon = font.Font(root, size=10)

LFrameStyle = ttk.Style()
LFrameStyle.theme_use("default")
LFrameStyle.configure("Dict.TLabelframe", background="gray94")
LFrameStyle.configure("Dict.TLabelframe.Label", font=("", "12"), background="gray94", foreground="black", relief="ridge")


# フレーム
fra_Label = ttk.LabelFrame(root, labelanchor="nw", text="Label Frame", style="Dict.TLabelframe")

fra1 = tk.Frame(fra_Label, cnf=pad, bg="IndianRed1")
fra2 = tk.Frame(fra_Label, cnf=pad, bg="steelblue")

# =============================================================================
# フレーム①
lbl1 = ttk.Label(fra1, background="IndianRed1", text="Label 1", font=fon)
lbl1.grid(row=0, column=0, cnf=pad, sticky=we)

ent1 = tk.Entry(fra1, width=40, font=fon)
ent1.insert(tk.END, "Entry 1")
ent1.grid(row=1, column=0, cnf=pad, sticky=we)

lbl2 = ttk.Label(fra1, background="IndianRed1", text="Label 2", font=fon)
lbl2.grid(row=2, column=0, cnf=pad, sticky=we)
ent2_1 = tk.Entry(fra1, font=fon)
ent2_1.insert(tk.END, "Entry 2")
ent2_1.grid(row=3, column=0, cnf=pad, sticky=we)

ent2_2 = tk.Entry(fra1, font=fon)
ent2_2.grid(row=3, column=1, cnf=pad, sticky=we)

lbl3 = ttk.Label(fra1, background="IndianRed1", text="Label 3", font=fon)
lbl2.grid(row=4, column=0, cnf=pad, sticky=we)

ent3 = ScrolledText(fra1, height=5, font=fon)
ent3.insert(tk.END, "Entry 3")
ent3.grid(row=5, columnspan=2, cnf=pad, sticky=we)


# =================================================================================
# フレーム②
lbl4 = ttk.Label(fra2, background="steelblue", text="Label 4", font=fon)
lbl4.grid(row=0, column=0, cnf=pad, sticky=we)

ent4_1 = tk.Entry(fra2, font=fon)
ent4_1.insert(tk.END, "Entry 4")
ent4_1.grid(row=1, column=0, cnf=pad, sticky=we)

ent4_2 = tk.Entry(fra2, font=fon)
ent4_2.grid(row=1, column=1, cnf=pad, sticky=we)

ent4_3 = tk.Entry(fra2, font=fon)
ent4_3.grid(row=1, column=2, cnf=pad, sticky=we)

ent4_4 = tk.Entry(fra2, font=fon)
ent4_4.grid(row=1, column=3, cnf=pad, sticky=we)



# =============================================================================
# フレーム綴じる

fra1.columnconfigure([1, 3, 5], weight=1)
fra1.rowconfigure([0, 1, 2], weight=1)
fra1.pack(expand=True, fill="x", padx=10)

fra2.columnconfigure([1, 3, 5], weight=1)
fra2.rowconfigure([0, 1, 2], weight=1)
fra2.pack(expand=False, fill="x", padx=10)

fra_Label.columnconfigure([1, 3, 5], weight=1)
fra_Label.rowconfigure([0, 1, 2], weight=1)
fra_Label.pack(expand=False, fill=tk.BOTH, padx=10, pady=10)


# =============================================================================
root.mainloop()

補足情報（FW/ツールのバージョンなど）

Windows10
Python 3.8.3
tk 8.6.10

Comments

[teamikl]

コードを実行するとエラーが出ましたが、
掲載のコードは実行したのと同じですか？

[netz-eng]

ご返信ありがとうございます。

ご指摘の通り、掲載したコードには
　from tkinter.scrolledtext import ScrolledText
の宣言が抜けておりました。
申し訳ありません、訂正しておきます！

Answer 1

現状の設定(row/column configure)では、
グリッドのセルの横幅は、何も指定しなければ均等になります。

セルに格納するウィジェットに応じて伸長しますが、
ウィジェットにwidth指定がある場合は、最低限その幅を確保するので、
均衡を崩す原因になってます。

問題点:

• ent1 の width
• 右端の余白 -> column 5

他の問題点

• w が未定義 → we
• ScrolledText が未定義

---

# import 忘れ
+ from tkinter.scrolledtext import ScrolledText

# 左端が均等にならない原因 width
- ent1 = tk.Entry(fra1, width=40, font=fon)
+ ent1 = tk.Entry(fra1, font=fon)

# 未定義の変数、多分 `we`
- ent3.grid(row=5, columnspan=2, cnf=pad, sticky=w)
+ ent3.grid(row=5, columnspan=2, cnf=pad, sticky=we)

# grid の設定1
- fra1.columnconfigure([1, 3, 5], weight=1)
- fra1.rowconfigure([0, 1, 2], weight=1)
+ fra1.columnconfigure([0, 1], weight=1)
+ fra1.rowconfigure([5], weight=1)

# gridの設定2、column=5 が右端の余白の原因
- fra2.columnconfigure([1, 3, 5], weight=1)
- fra2.rowconfigure([0, 1, 2], weight=1)
+ fra2.columnconfigure([0, 1, 2, 3], weight=1)
+ fra2.rowconfigure([0, 1], weight=1)

# fra_Label は pack() で配置する為、grid 用の設定は不要
- fra_Label.columnconfigure([1, 3, 5], weight=1)
- fra_Label.rowconfigure([0, 1, 2], weight=1)

Comments

[netz-eng]

ご回答ありがとうございます。
添削していただいたコードで、無事求めていた画面構成にすることができました！
（未定義の部分は、質問文を編集しておきます。ご指摘ありがとうございます）

今までほぼコピー＆ペーストでcolumn/rowconfigureを使っていたので、今回ようやく正しい使い方を学べました。

一点お尋ねしたいのですが、fra1.rowconfigure([5], weight=1)　の部分で第一引数が[5]となっているのは、何故ですか？
この部分をコメントアウトして実行してもGUIの見た目が変わらなかったので、何か意味があればお教え願いたいです。

[teamikl]

row=5 のScrolledText のセルの縦幅が伸縮可能かどうかですが、
リサイズ自体を禁止されてるようなので、不要なら設定しなくても大丈夫です。

そこまでコードを精査してなかったので、リサイズ無効は想定してなくて
縦幅が長くなるウィジェットだから縦の伸縮を有効にしておこうかなくらいで変更しましたが、

実行に差し支えないなら、row設定を後々追加したい場合を想定して、
保守用途にコードを残すみたいな考え方もあります。

※ 実際にリサイズ時に縦幅を伸縮可能にするには、stickyで縦も設定する他、
その親のフレームのレイアウト設定等も変更する必要があります。

[netz-eng]

なるほど、わかりました。もしリサイズすることがあれば、stickyやフレーム設定は見落としてしまいそうなので覚えておきます。
ありがとうございます^^