TkInter: Widgetの配置（GRID）が 思うようにならない

Question

ちゃんと座標形式で画面設計を前もって行い
それにもとづいてWidget配置（GRID）を行っているのですが　毎回毎回自分が意図したようにならず　本当に困っています。

質問

なぜ意図した表示が行われないのか、どこを変更すれば　設計のように表示されるか？　ご教示頂けますでしょうか？
TkInterで画面を作る都度、プログラム以前自分に何かの能力が欠落しているんじゃないかと　悩まされます。

!

1021 1016 提示コードを全体に差替え、下段に実行時のメニュー画像を追加

# tkinterのインポート
import tkinter as tk
import tkinter.ttk as ttk
import math
import os
from tkinter import filedialog
import tkinter.messagebox as tkmb
import openpyxl
#################################################################################
#                                                                               #
#       一般関数                                                                #
#                                                                               #
#                                                                               #
#################################################################################
# フレーム切替え=画面遷移
def change_frame(frame):
        frame.tkraise()


#################################################################################
#                                                                               #
#       画面生成                                                                #
#                                                                               #
#                                                                               #
#################################################################################
def resource_path(relative_path):
        try:
            # PyInstaller creates a temp folder and stores path in _MEIPASS
            base_path = sys._MEIPASS
        except Exception:
            base_path = os.path.abspath(".")

        return os.path.join(base_path, relative_path)


def adjust_windowsize(root):
    ww = root.winfo_screenwidth()
    wh = root.winfo_screenheight()

    lw = math.ceil(ww * 0.208)
    lh = math.ceil(wh * 0.277)

    root.geometry(str(lw)+"x"+str(lh)+"+"+str(int(ww/2-lw/2))+"+"+str(int(wh/2-lh/2)))
#################################################################################
#                                                                               #
#       フレーム生成                                                            #
#                                                                               #
#                                                                               #
#################################################################################
def generate_frame(root):
    #############################################################################
    #                                                                           #
    #       メインメニュー用フレーム設置                                        #
    #                                                                           #
    #############################################################################
    frmMain = ttk.Frame(root)
    frmMain.grid(row=0, column=0, sticky=tk.E + tk.W + tk.N + tk.S)

    # メインメニューにボタン配置
    btn_SettingMenu = tk.Button(frmMain, text = "入出力定義", font=("",0,"normal","roman","normal"), command=lambda: change_frame(frmIOMenu))
    btn_SettingMenu.pack(fill = tk.BOTH, expand=True)

    btn_SettingMenu = tk.Button(frmMain, text = "変換定義", font=("",0,"normal","roman","normal"))
    btn_SettingMenu.pack(fill = tk.BOTH, expand=True)

    btn_RunMenu = tk.Button(frmMain, text = "実行メニュー", font=("",0,"normal","roman","normal"))
    btn_RunMenu.pack(fill = tk.BOTH, expand=True)
    btn_RunMenu.focus_set()

    btn_SettingMenu = tk.Button(frmMain, text = "終了", font=("",0,"normal","roman","normal"), command=root.destroy)
    btn_SettingMenu.pack(fill = tk.BOTH, expand=True)
    #############################################################################
    #                                                                           #
    #       入出力定義メニュー用フレーム設置                                    #
    #                                                                           #
    #############################################################################
    frmIOMenu = ttk.Frame(root)
    frmIOMenu.grid(row=0, column=0, sticky=tk.E + tk.W + tk.N + tk.S)
    
    # 0
    cmbox_RecNo = ttk.Combobox(frmIOMenu, state="readonly", height=3)
    cmbox_RecNo.grid(row=0, column=0, columnspan=2, sticky=tk.N + tk.S + tk.E + tk.W)

    # 0
    ent_RecName = tk.Entry(frmIOMenu)
    ent_RecName.grid(row=0, column=2, columnspan=8, sticky=tk.E + tk.W + tk.N + tk.S)

    # 3 シート構成・列構成ツリー
    tree1 = ttk.Treeview(frmIOMenu, show="tree", height=4)
    tree1.grid(row=3, column=0, rowspan=4, columnspan=5, sticky=tk.E + tk.W + tk.N + tk.S)
    ###hscrollbar = ttk.Scrollbar(frmIOMenu, orient=tk.VERTICAL)
    ###hscrollbar.grid(row=3, column=5, rowspan=4, sticky=tk.N + tk.S + tk.E)

    # 3
    btn_AddColumn = tk.Button(frmIOMenu, text = "→")
    btn_AddColumn.grid(row=3, column=5, sticky=tk.E + tk.W + tk.N)

    # 3 シート構成・列構成ツリー
    tree2 = ttk.Treeview(frmIOMenu, show="headings", height=4)
    tree2["columns"] =(1)
    tree2.grid(row=3, column=6, rowspan=4, columnspan=4, sticky=tk.E + tk.W + tk.N + tk.S)

    # 1 入力ファイル指定ボタン、選択ファイル格納テキストボックス配置
    ent_InputPath = tk.Entry(frmIOMenu, state="disabled")
    ent_InputPath.grid(row=1, column=3, columnspan=7, sticky=tk.E + tk.W + tk.N + tk.S)

    btn_AssignInputFile = tk.Button(frmIOMenu, text = "入力ファイル指定")
    btn_AssignInputFile.grid(row=1, column=0, columnspan=3, sticky=tk.E + tk.W + tk.N + tk.S)

    # 2 出力ファイル指定ボタン、選択ファイル格納テキストボックス配置
    ent_OutputPath = tk.Entry(frmIOMenu, state="disabled")
    ent_OutputPath.grid(row=2, column=3, columnspan=7, sticky=tk.E + tk.W + tk.N + tk.S)

    btn_AssignOutputFile = tk.Button(frmIOMenu, text = "出力ファイル指定")
    btn_AssignOutputFile.grid(row=2, column=0, columnspan=3, sticky=tk.E + tk.W + tk.N + tk.S)

    # 4
    btn_Up = tk.Button(frmIOMenu, text = "↑")
    btn_Up.grid(row=4, column=5, sticky=tk.E + tk.W + tk.N)

    # 5
    btn_Down = tk.Button(frmIOMenu, text = "↓")
    btn_Down.grid(row=5, column=5, sticky=tk.E + tk.W + tk.N)

    # 6
    btn_Down = tk.Button(frmIOMenu, text = "←")
    btn_Down.grid(row=6, column=5, sticky=tk.E + tk.W + tk.N)

    # 7
    cmbox_Type = ttk.Combobox(frmIOMenu, state="readonly", height=3)
    cmbox_Type.grid(row=7, column=0, columnspan=4, sticky=tk.N + tk.S + tk.E + tk.W)

    # 7
    cmbox_ConvNo = ttk.Combobox(frmIOMenu, state="readonly", height=3)
    cmbox_ConvNo.grid(row=7, column=4, columnspan=2, sticky=tk.N + tk.S + tk.E + tk.W)
    
    # 7
    cmbox_Type = ttk.Combobox(frmIOMenu, state="readonly", height=3)
    cmbox_Type.grid(row=7, column=0, columnspan=4, sticky=tk.N + tk.S + tk.E + tk.W)

    # 7
    ent_AsName = tk.Entry(frmIOMenu)
    ent_AsName.grid(row=7, column=6, columnspan=4, sticky=tk.E + tk.W + tk.N + tk.S)
    
    # 8
    btn_Define = tk.Button(frmIOMenu, text = "定義")
    btn_Define.grid(row=8, column=4, columnspan=2, sticky=tk.N + tk.S + tk.E+ tk.W)
   
    # 8
    btn_Delete = tk.Button(frmIOMenu, text = "削除")
    btn_Delete.grid(row=8, column=6, columnspan=2, sticky=tk.N + tk.S + tk.E + tk.W)

    # 8
    btn_ReturnMenu = tk.Button(frmIOMenu, text = "閉じる", command=lambda: change_frame(frmMain))
    btn_ReturnMenu.grid(row=8, column=8, columnspan=2, sticky=tk.E + tk.W + tk.N + tk.S)

    # 起動時メインのフレームを前面に
    frmMain.tkraise()




if __name__ == "__main__":
    # ウインドウの作成
    root = tk.Tk()

    #フォームサイズを実行端末から導き、ド真中に配置表示
    adjust_windowsize(root)

    #タイトルを指定
    root.title("TkInterの勉強")

    #フレーム切替え達成の上で　とても重要、ルートのグリッド定義
    root.grid_rowconfigure(0, weight=1)
    root.grid_columnconfigure(0, weight=1)
    
    root.grid_rowconfigure(1, weight=1)
    root.grid_columnconfigure(1, weight=1)
    
    root.grid_rowconfigure(2, weight=1)
    root.grid_columnconfigure(2, weight=1)
    
    root.grid_rowconfigure(3, weight=1)
    root.grid_columnconfigure(3, weight=1)
    
    root.grid_rowconfigure(4, weight=1)
    root.grid_columnconfigure(4, weight=1)
    
    root.grid_rowconfigure(5, weight=1)
    root.grid_columnconfigure(5, weight=1)
   
    root.grid_rowconfigure(6, weight=1)
    root.grid_columnconfigure(6, weight=1)

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

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

    root.grid_columnconfigure(9, weight=1)

    #フォームの最大化、×ボタン操作を無効化
    root.resizable(0,0)
    root.protocol('WM_DELETE_WINDOW', (lambda: 'pass')())

    # カーソル変更
    root["cursor"] = "hand2"

    generate_frame(root)

    root.mainloop()

1021 1540 最終的にこうなり、満足！

frmIOMenu = tk.Frame(root, bg="red")
    
frmIOMenu.grid_rowconfigure([0, 1, 2, 3, 4, 5, 6, 7, 8], weight=1)
frmIOMenu.grid_columnconfigure([0, 1, 2, 3, 4, 5, 6, 7, 8, 9], weight=1, minsize=40)
frmIOMenu.grid(row=0, column=0, sticky=tk.E + tk.W + tk.N + tk.S)

Comments

[fj68]

意図しない余白や見切れが発生しているということなので、rootに対してgeometryなどでサイズを指定しているからではと愚推します。
ただ、該当部分がないため判断できません。
質問にはコード全体を掲載していただけると助かります。
よろしくおねがいします。

[saya24]

fj68さん、お時間を頂戴致しまして誠にありがとうございます。

本文に文字数制限があるため、画面遷移用途外の　ボタン押下から動作する関数は除去し　コード全容を貼り付けさせていただきました。rootの上にフレームを貼り付けておりますが　2種フレームの最上位表示を切替えることで　画面遷移イメージを達成しております

確認を頂けたら幸いです！

[fj68]

編集、ありがとうございます。

adjust_windowsize()関数内の以下について

lw = math.ceil(ww * 0.208)
lh = math.ceil(wh * 0.277)

それぞれ0.208や0.277というマジックナンバーはどのように決められましたか？
それぞれwinfo_width()やwinfo_height()ではダメなのでしょうか？

出先でPCがなく検証できないので、頂いたコードを当方でも後ほど試してみます。
よろしくお願いいたします。

Answer 1

問題の原因: 伸縮オプションを変更していない、固定幅でのレイアウト組

grid() でレイアウトを組む場合は、親ウィジェットの row/column configure で
各セルの細かい制御・設定が可能です。

root: tk.Tk
  frmIOMenu: ttk.Frame
    cmbox_RecNo: ttk.Combobox
    ent_RecName: tk.Entry
    ... 各フォーム部品

という構造になっているので、
それぞれの親ウィジェットに当たる root, frmIOMenu で必要なオプションを設定します。

• root.grid_rowconfigure(...)
• root.grid_columnconfigure(...)
• frmIOMenu.grid_rowconfigure(...)
• frmIOMenu.grid_columnconfigure(...)

レイアウト横幅が見切れる問題については、適切な minsize を指定する事で回避できます。

• root.minsize(width, height)
• root.grid_columnconfigure(..., minsize=width)
• frmIOMenu.grid_columnconfigure(..., minsize=width)

具体的な設定は、目的の挙動により異なりますが

見切れや不要な空白が生まれる原因は、親ウィジェットで指定されたサイズ(固定値)に対して
内部の小ウィジェットの幅が固定幅・サイズが足りない・大きすぎる事によっておこるので、

解決策としては、(A) 小ウィジェットを伸縮可能にする。→ grid_(row|column)configureでweight指定
(B) 固定幅で不要な空白をなくしたい場合は、リサイズ禁止にして minsize を指定、という方針になります。

レイアウトを柔軟にしたいは、極力、固定値のサイズ指定は使わずに、
レイアウトマネージャにサイズ計算を任せた方が良いです。

---

Tkinterで画面を作る都度、プログラム以前自分に何かの能力が欠落しているんじゃないかと　悩まされます。。

レイアウトでの問題個所の見つけ方・デバッグ方法ですが、

• ウィジェットの構造を書き出す (親子関係が把握できるように)
• 親ウィジェットに色を付けてみる。ウィンドウをリサイズして伸縮可能になっているかどうかを確認。

- frmIOMenu = ttk.Frame(root)
+ frmIOMenu = tk.Frame(root, bg="red")

※ ttk だと色変更が手間なので、一時的に tk.Frame を利用。デバッグが終われば元に戻します。

---

質問に掲載のコードだけでは、レイアウトの問題は再現しませんでした。

import tkinter as tk
from tkinter import ttk

def main():
    root = tk.Tk()

    ## XXX: 問題の再現
    # root.geometry("400x300")


    #  ここに質問のコードをコピー


    root.mainloop()


if __name__ == "__main__":
    main()

Comments

[saya24]

teamiklさん、ご親切ご丁寧な見解をありがとうございます。
興味深いコメントとして「質問に掲載のコードだけでは、レイアウトの問題は再現しませんでした。」の記載がございました。

当初提示したコード＝【フレーム部分のみ】（現在本文に貼り付けたコードは全容ですが当初はフレーム部分のみを掲載していました）を、 root.geometry("400x300")　の状況下で　採用して実行頂いたところ、ご提示の当方期待のイメージになった！！！　ということですか？？

となると、fj86さんも言及されているように　rootの画面サイズとの関係性が原因なのかもしれませんね

で、teamiklさんから　A案・B案を試してみれば　ということですね

[teamikl]

更新された質問のコードに関して、一点、明らかな誤解があり gridのオプションについて
フォーム部品をgridで配置してる対象は frmIOMenu ウィジェットなので

ルートのグリッド定義～の対象は root ではなく
frmIOMenu の grid_(row|column)configure の設定が必要です。

----
見切れ・余白の原因はその通りで、固定値でサイズ指定していることに起因します。
コード上の問題としては、rootのgridオプションで伸縮可能に設定されてますが（※ ここが誤解)
フォーム部品に関してはフレームに対してgridのオプション指定が必要です。

[saya24]

>frmIOMenu の grid_(row|column)configure
に当方も気が付いて　いま全行と全列に対し　上記を施したうえで　実行したのですが
設計書のとおり　0行目一つ目のコンボボックスが2列要して
1行目と2行目一つ目のボタンが３列要している状況を　表現した筈なのに　0～2行目はじめのウィジェットの列幅が同じになってしまっています。teamiklさんの実行状況もそのようですね

また7行目はじめのコンッボックスしかり　設計書どおり4列を要す定義をした筈なのに　0行目～2行目の最初のウィジェット同様の列幅で表現されてしまいますよね。
ほんと、これ苦手！！！　一体何が原因でしょうか....

[teamikl]

> cmbox_RecNo = ttk.Combobox(frmIOMenu, state="readonly", height=3)

左上のウィジェットについては、試しにコンボボックスを
他のウィジェットや適当な色のフレームに差し替えて見て下さい。

フレームだと意図通り均等な長さに、
Entry や Button だと 下のボタンより少し短いくらいになります。
恐らく、Comboboxだと column 2 の列の横幅が0 もしくは 1 ドットになっている為、
columnspan=2 と指定したのに columnspan=3 とほぼ同じ幅に見えているようです。

grid の row, column, columnspan の指定には問題はありません。

対策
frmMenuIO.grid_columnconfigure([0, 1, 2], weight=1, minsize=100)
column 0~2 に対して均等に最小幅を設定します。

[saya24]

色々とありがとうございます。お陰様で思い通りになりました。

Widget種類ごとに　適用カラム幅（高さ）が違う？！ということですかねぇ...
だとした場合、固定幅の升目で画面デザインを前もって対応したところで、たちうちできないような。

今回フレーム上の各列にminsize=40を設定して意図したイメージになりました。
この手段が鉄板だったりすれば　超うれしいですね。今後の画面設計に活かせるノウハウになるので

TkInterでのアプリ開発・学習に着手したので、ここ１か月　多方面でお世話になることと思います。
またご支援を頂けたら　非常にありがたいです！

[teamikl]

minsize 指定での対応で良さそうですね。

＞Widget種類ごとに　適用カラム幅（高さ）が違う？！ということですかねぇ...

もう少し詳細に解説すると grid の row/column 幅は、
ウィンドウ幅やウィジェット幅を元に計算されるのですが、

ウィジェット毎に最小サイズが決まっているので、
今回の場合では、ウィンドウが小さすぎた為
ボタンとコンボボックスがどちらも最小幅となり、
columnspan 2 と 3 の区別がつかない状況になってました。

例えば、weight の指定だけでも、親フレームを伸縮可能にして
ウィンドウを大きめにリサイズすれば想定通りの幅になります。

####
# コメント欄の為コードは詰めて書いてます。インデントは不要。
# 実行してウィンドウの横幅を変えて見て下さい

import tkinter as tk
from tkinter import ttk

root = tk.Tk()
ttk.Entry(root).grid(row=0, column=0, columnspan=2, sticky=tk.NSEW)
ttk.Label(root).grid(row=0, column=2, columnspan=8, sticky=tk.NSEW)
ttk.Button(root, text="AAA").grid(row=1, column=0, columnspan=3, sticky=tk.NSEW)
ttk.Label(root).grid(row=1, column=3, columnspan=7, sticky=tk.NSEW)
root.grid_columnconfigure([0, 1, 2, 3, 4, 5, 6, 7, 8, 9], weight=1)
root.mainloop()