TkInter: フレームへのWIDGET配置・レイアウトが思い通りにならない

Question

以下のフォーム内で緑色のラインで示した　コンボボックス・チェックボックス・テキストボックスの配置が希望どおりにならずこまっています。一番右のテキストボックスの長さを　もっと長くしたいのですが、1カラム分の長さを期待しているコンボボックスが長くなってしまっていて　このような状態になってしまっています。

一体何が原因でしょう？　同じようなことを幾度と尋ね　学習能力なく申し訳ありません。

#############################################################################
#                                                                           #
#       変換対応表メニュー用フレーム設置                                    #
#                                                                           #
#############################################################################
frmConvMenu = ttk.Frame(root, name="frmConvMenu")
frmConvMenu.grid_rowconfigure([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], weight=1)
frmConvMenu.grid_columnconfigure([0, 1, 2, 3, 4, 5, 6, 7, 8, 9], weight=1, minsize=40)
frmConvMenu.grid(row=0, column=0, sticky=tk.E + tk.W + tk.N + tk.S)

# 1 上段枠
lbfrm1 = ttk.LabelFrame(frmConvMenu, text="対応表登録", labelanchor="n")
lbfrm1.grid(row=1, column=0, rowspan=5, columnspan=10, sticky=tk.W + tk.E + tk.N + tk.S, padx=(10,10))

# 2 登録済対応表の選択コンボボックス
cmbox_Tbl1 = ttk.Combobox(frmConvMenu, height=3, font=("Arial", 16), state="readonly")
cmbox_Tbl1.grid(row=2, column=1, columnspan=8, sticky=tk.E + tk.W, padx=(10,10))

# 3 Ｕｐｌｏａｄボタン
btn_Upload = ttk.Button(frmConvMenu, text = "Upload", command=lambda : open_FileDialog_Import(ent_UpPath))
btn_Upload.grid(row=3, column=1, columnspan=1, sticky=tk.E + tk.W, padx=(10,0))

# 3 Ｋｅｙ選択コンボボックス
cmbox_Key = ttk.Combobox(frmConvMenu, height=3, font=("Arial", 16), state="readonly")
cmbox_Key.grid(row=3, column=2, columnspan=1, sticky=tk.E)

# 3 初期化宣言チェックボックス
reqinitial = tk.BooleanVar()
reqinitial.set(False)
chk_Initial = tk.Checkbutton(frmConvMenu, variable=reqinitial, bg="#FFFFCC")
chk_Initial.grid(row=3, column=3, sticky=tk.E + tk.W)

# 3 Ｕｐｌｏａｄファイパス　テキストボックス
ent_UpPath = ttk.Entry(frmConvMenu, state=tk.DISABLED, font=("Arial", 16))
ent_UpPath.grid(row=3, column=4, columnspan=5, sticky=tk.E + tk.W, padx=(0,10))

# 4 個別編集ボタン
btn_TblM = ttk.Button(frmConvMenu, text = "個別編集")
btn_TblM.grid(row=4, column=1, columnspan=8, sticky=tk.E + tk.W, padx=(10,10))

# 6 下段枠
lbfrm2 = ttk.LabelFrame(frmConvMenu, text="変換定義", labelanchor="n")
lbfrm2.grid(row=6, column=0, rowspan=5, columnspan=10, sticky=tk.W + tk.E + tk.N + tk.S, padx=(10,10), pady=(20,0))

# 7 登録済対応表の選択コンボボックス
cmbox_Tbl2 = ttk.Combobox(frmConvMenu, height=3, font=("Arial", 16), state="readonly")
cmbox_Tbl2.grid(row=7, column=1, columnspan=8, sticky=tk.E + tk.W, pady=(20,0), padx=(10,10))

# 7 変換定義メンテナンスボタン
btn_ConvM = ttk.Button(frmConvMenu, text = "変更定義の追加/変更/削除")
btn_ConvM.grid(row=8, column=1, columnspan=8, sticky=tk.E + tk.W, padx=(10,10))

# 9 変換定義参照ボタン
btn_Inq = ttk.Button(frmConvMenu, text = "変更定義一覧の参照")
btn_Inq.grid(row=9, column=1, columnspan=8, sticky=tk.E + tk.W, padx=(10,10))

# 11 メニューへボタン
btn_ReturnMenu = ttk.Button(frmConvMenu, text = "閉じる", command=lambda: change_frame(frmMain))
btn_ReturnMenu.grid(row=11, column=9, sticky=tk.E + tk.W, padx=(0,10))

ようやく思い通りのメッセージになりました　19:35

Answer 1

(gridでレイアウトを組む場合)
ttk.Combobox 生成時の引数に width=5 を設定して見て下さい。(数値は適当な値

※ tkinterでは、テキストを表示するウィジェットの width/height は、文字数・行数なので、
実際の長さはフォントサイズの影響を受けます。

レイアウトでは、「枠のサイズ」「ウィジェットのサイズ」をそれぞれ個別にみる必要があり
grid で指定したのは枠の最小サイズ minsize=40 ですが、
ウィジェットの幅がこれより大きい場合は、枠サイズを拡張します。

---

縦横を揃える必要がない場合は、packでレイアウトを組む方が手軽です。
packでレイアウトを組む場合の、ウィジェットの親子関係

ttk.Frame
  ttk.LabelFrame "対応表登録"
    ttk.Combobox
    ttk.Frame  # frame上に横向きに配置
      ttk.Button "Upload"
      ttk.Combobox
      ttk.Checkbutton
      ttk.Entry
    ttk.Button "個別編集"
  ttk.LabelFrame "変換定義"
    ttk.Combobox
    ttk.Button "変更定義の追加/変更/削除"
    ttk.Button "変更定義一覧の参照"
  ttk.Button "閉じる"

※ LabelFrame 内に表示したいウィジェットは、LabelFrame を親にして生成します。

Comments

[saya24]

teamiklさん　いつもご協力誠に有難うございます。
ご回答頂ければ幸いです、
枠のサイズ　と表現されている言葉ですが、私の認識は　フレームにWIDGETを配置していくうえで　私たち自身が　頭の中で想像すべき方眼紙イメージのひと枠ということですが　それにまちがいありませんか？
私　毎回　この面でお世話になっているので　何か人より劣っているんじゃないか、大きな勘違いをしているんじゃないか、とよく不安になります。

[teamikl]

> 頭の中で想像すべき方眼紙イメージのひと枠ということですが　それにまちがいありませんか？

gridレイアウトの場合は、基本その様なイメージです
細かい相違点はあり、各枠の長さは等幅・固定長ではなく、中のモノの大きさに影響されます。

この挙動は、設定次第で、中のモノを枠内のサイズに収める、
枠をはみ出して表示する等いろいろあります。
今回のコードの場合は、枠が伸縮可能な為、
その中のモノの大きさに応じて枠が拡張されます。

gridレイアウトで設計の段階で方眼紙をイメージするのは良いと思います。
row/column指定は、実際その通りに配置されています。
今回は、そのうちの枠の長さが想定と違ったという問題ですが、

恐らく勘違いされているかなと思う点は、
minsize 指定は等幅・固定幅という訳ではありません。
ウィンドウをリサイズして小さくした時に、最小限確保する長さです。

----
レイアウトは最終的に目的の見た目・挙動を得られれば良いので、
どの方法が正解・間違いとかはありませんが、実装方法により
実装が楽なコード、変更する時に管理のしやすいコードといった違いはあります。

具体的な使い分けは説明し難いのですが、
ウィジェット数が少ない・縦並びが多い場合は、packの方が楽に組めます。

12x10 の等幅な方眼紙を想定して、columnspan で枠連結させる事で長さを調整したい
...というように見受けられますが、
別の実装方法で、grid の各枠の長さは、weight 指定により比率でも指定することもできます。

LabelFrame の上に重なるように他ウィジェットを配置してますが、
LabelFrame を親としたウィジェットを作ると、自動的に内部への配置になります。

[saya24]

>12x10 の等幅な方眼紙を想定して、columnspan で枠連結させる事で長さを調整したい
>...というように見受けられますが、

そのとおりです。鋭い．．．

正解がない、ということでまたデザイン時に悩まされそうで怖いのですが、今回EntryやLabelの幅は　文字数から制御される、ことや　LabelFrameがFrame同様　ベースになりうるWIDGETと認識できたことは　今後間違いなく役立つ情報だと思います。

ようやく期待どおりのレイアウトになりました、ありがとうございました。

[saya24]

ひょっとして、１フレーム内ではGRIDとPACKを併用できないから　フレームを小分けにしてGRIDとPACKを使い分けるのがコツなのかな。
ある程度仕上がっているデザインを壊すのは　忍びないが　今後のためにしっかり認識しておくために　作り直すかなぁ．．．

[teamikl]

> フレームを小分けにしてGRIDとPACKを使い分けるのがコツなのかな。

そうですね、過剰に小分けにするのも別問題がありますが、
適度にFrame 単位にまとめると、コードの保守もやり易くなります。

pack のみだとウィジェット数が多い時に
中間でまとめる為だけの Frame が無駄に多く成ったり、
grid だと、並び順を入れ替える為に、row/column の入れ替えが発生するので、
どちらも一長一短な側面はあります。適材適所で使い分けられるようになるのが理想かな。

例えば、ウィジェットの順序の入れ替えでは

buttonA.pack()
buttonB.pack()

buttonA.grid(row=0)
buttonB.grid(row=1)

packの場合は、buttonB を移動するのみ (1箇所)
gridの場合は、buttonA,buttonB の rowを変更する (2箇所変更)

実例で考えると、
「対応表登録」に新しいボタンを追加したいといった追加要望があった場合、
packでは単純に一つ追加のみですが、grid では新しいrowが追加された分、
変換定義以降のrowが全てズレてしまいます。(全てを1枚のframe上で組む場合のデメリット)

LabelFrame/Frame 単位で纏められれば、
「変換定義」 に影響することなく、「対応表登録」に追加できます。

> ある程度仕上がっているデザインを壊すのは

作り直しや壊すという感覚ではなく、別でレイアウトのみの練習で作ってみても良いのでは。

[saya24]

ご見解ありがとうございます。

本当うまくいかない．．．別のフレームを作って、GRIDで当該フレームを希望の位置に配置しました。
それまでは　良かったのですが

その中に横一列にWIDGETをすきまなく横一列に並べるには　PACKではだめなのですか．．．

HTMLの時もさんざ　希望通りにならなかったけれど．．．今回も

[saya24]

やっとできました...UIは大変ですね

[teamikl]

> その中に横一列にWIDGETをすきまなく横一列に並べるには　PACKではだめなのですか．．．

横一列に並べるにはpackのオプションにside を指定します。
但し、単一Frame上への縦横の混在は、自由に指定出来ないので、
横用の中間Frameが別途必要です。

packでレイアウトを組む場合は、それぞれ
縦用のFrame・横用のFrame に纏めると、解りやすくなると思います。