Python(TkInter) ダイアログ上に配置したWidgetに対する余白が 左右で一致しないのが気になります。

Question

標題の件、非常に単純なデザインなのですが、TkInterの画面設計が非常に不得意なので教えてください。
以下のとおり、左右の余白が一致していないのが気になっており、一致させたいのですが　どうにもこうにも対応方法が分かりません。

def pw_Open(self, event=None):
        lw = math.ceil(ww * 0.1)
        lh = math.ceil(wh * 0.1)
        self.pwentry = Toplevel(self.dialog)
        self.pwentry.geometry(str(lw)+"x"+str(lh)+"+"+str(int(ww/2-lw/2))+"+"+str(int(wh/2-lh/2)))

        btnw = math.ceil(lw * 0.04)

        self.txt9 = Entry(self.pwentry, width=btnw*2, show='*')
        self.btn8 = Button(self.pwentry, text="Enter", width=btnw, command=self.pw_On)
        self.btn8.bind('<Return>', self.pw_On)
        self.btn9 = Button(self.pwentry, text="Cancel", width=btnw, command=self.pw_Off)
        self.btn9.bind('<Return>', self.pw_Off)
        self.pwentry.title("Enter the password to view below")
        self.pwentry.resizable(0,0)
        self.pwentry.protocol('WM_DELETE_WINDOW', (lambda: 'pass')())
        self.txt9.grid(row=0, column=0, columnspan=2, sticky=W+E, padx=10, pady=(10,0))
        self.txt9.focus_set()
        self.btn8.grid(row=1, column=0, sticky=W+E, padx=(10,0), pady=(0,10))
        self.btn9.grid(row=1, column=1, sticky=W+E, padx=(0,10), pady=(0,10))
        self.pwentry.grab_set()

2行2列のフレーム想定で、Widgetを配置しています。
どういう対策を施せば良いのでしょうか

Answer 1

ww が未定義なので、ウィンドウの横幅と仮定しますが

問題の原因は、

• 余白設定 padx が、ウィンドウ幅からの計算ではなく固定値になっている
• grid() レイアウトが伸縮可能で無いため、左詰めになっている -> grid_columnconfigure()を設定

その前に、Entry の width 指定は、ピクセルではなく、フォントサイズと文字数に影響します。
以下のコードで、ButtonとEntry が同じサイズにならないのが確認できます。

import tkinter as tk

root = tk.Tk()
# Entryのオプションに font=("", 20) を設定してみて下さい。
# Entry の横幅が増えるのが確認できます。
tk.Entry(root, width=20).pack()
tk.Button(root, width=20, text="button").pack()
root.mainloop()

Entry が丁度ボタン２つ分となっているのは、width 指定のためではなく
grid レイアウトによる調整です。grid()/pack()を使う場合、width は省略可能です。

リサイズ禁止の場合は、place() で固定レイアウトにする手段もあります。

---

修正方法

要点は2箇所。grid_columnconfigureと width の省略
(コードは実行確認のため変数等を置き換えてるので、適宜読み替えて下さい)

from tkinter import *

root = Tk()

def open_dialog():

    dialog = Toplevel(root)
    dialog.title("Enter the password to view below")
    dialog.resizable(0, 0)
    dialog.geometry("200x200")
    
    # gridのcolumnを伸縮可能にする
    dialog.grid_columnconfigure(0, weight=1)
    dialog.grid_columnconfigure(1, weight=1)

    # widthは省略、レイアウトに任せます
    entry = Entry(dialog, show='*')
    button_ok = Button(dialog, text="Enter")
    button_cancel = Button(dialog, text="Cancel")

    button_ok.grid(row=1, column=0, sticky=W+E, padx=(10,0), pady=(0,10))
    button_cancel.grid(row=1, column=1, sticky=W+E, padx=(0,10), pady=(0,10))
    entry.grid(row=0, column=0, columnspan=2, sticky=W+E, padx=10, pady=(10,0))

    entry.focus_set()
    dialog.grab_set()


Button(root, text="Open dialog", command=open_dialog).pack()
root.mainloop()

Comments

[saya24]

できました、とてもスッキリしました。ありがとうございます。