Pythonのtkinterのレイアウトが上手くいかない。

Question

前提

先日からtkinterの勉強を始めたのですが、うまくいかなく困っています。

実現したいこと

• ラジオボタンを左側に配置し、右側にファイル参照を置きたい。

該当のソースコード

import tkinter
from tkinter import *
from tkinter import ttk
from tkinter import filedialog
from tkinter import messagebox
import os


# ファイルの参照処理
def click_refer_button():
    fTyp = [("","*")]
    iDir = os.path.abspath(os.path.dirname(__file__))
    filepath = filedialog.askopenfilename(filetypes = fTyp, initialdir = iDir)
    filepath.set(filepath)


# 出力処理
def click_export_button():
    path = file_path.get()

def rb1_clicked():
    print(flg1.get())

if __name__ == '__main__':
    # ウィンドウを作成
    root = tkinter.Tk()
    root.title("test")
    root.geometry("500x500")

    flg1 = StringVar()
    flg1.set('0')
    
    #グループB用変数
    flg2 = StringVar()
    
    #ラジオ1（グループA）
    rb1 = ttk.Radiobutton(root,text='1',value=0,variable=flg1,command=rb1_clicked)
    rb1.grid(row=1,column=0)
    
    #ラジオ2（グループA）
    rb2 = ttk.Radiobutton(root,text='2',value=1,variable=flg1,command=rb1_clicked)
    rb2.grid(row=2,column=0)
    
    #ラジオ3（グループA）
    rb3 = ttk.Radiobutton(root,text='3',value=2,variable=flg1,command=rb1_clicked)
    rb3.grid(row=3,column=0)

    # Frame1の作成
    frame1 = ttk.Frame(root, padding=10)
    frame1.grid()

    # 「ファイル」ラベルの作成
    s = StringVar()
    s.set('ファイル名：')
    label1 = ttk.Label(frame1, textvariable=s)
    label1.grid(row=0, column=1)

    # 参照ファイルのパスを表示するテキストボックスの作成
    file_path = StringVar()
    filepath_entry = ttk.Entry(frame1, textvariable=file_path, width=30)
    filepath_entry.grid(row=0, column=2)

    # 参照ボタンの作成
    refer_button = ttk.Button(frame1, text=u'参照', command=click_refer_button)
    refer_button.grid(row=0, column=3)

    # Frame2の作成
    frame2 = ttk.Frame(root, padding=10)
    frame2.grid()

    # テキスト出力ボタンの作成
    export_button = ttk.Button(frame2, text='開始', command=click_export_button, width=10)
    export_button.grid(row=4, column=0)

    # テキスト出力ボックスの作成
    textboxname = StringVar()
    textboxname.set('\n\n結果 ')
    label3 = ttk.Label(frame2, textvariable=textboxname)
    label3.grid(row=5, column=0)
    textBox = Text(frame2, width=50)
    textBox.grid(row=6, column=0)

    # ウィンドウを動かす
    root.mainloop()

試したこと

row や column の値をいろいろと変更してみましたが配置は変わるのですが、思った通りに動いてくれません。

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

実行結果です。

Answer 1

pack で左右に配置する方法

左フレーム、右フレームを作り、pack の side オプションに tk.LEFT, tk.RIGHT を設定

---

grid で左右に配置する方法

左 column=0 右 column=1 に設定

但し、結果の下のテキスト欄が column=0 の最大幅となる為、
column=1 の開始は、テキスト欄より右になります。
ラジオボタンとの間には空白が出来てしまう為、
frame2 に columnspan=2 を設定する等して調整。

更に、row=1 はファイル入力欄の縦幅が最大値になるので、
ラジオボタンの縦の間隔が不規則になります。
ファイル入力にラジオボタン3つ分の rowspan=3 を設定します。

frame1, grame2 の grid を以下の様に変更

    frame1.grid(row=1, column=1, rowspan=3)

    frame2.grid(columnspan=2)

※ このウィジェット構造では、gridで配置する場合
ラジオボタンが増えると、rowspanの値も増やさないといけなくなります。
ラジオボタンの横に他のウィジェットを揃える必要が無ければ、
フレームにラジオボタンを配置してから、親ウィジェットにgridで配置する等
コードを保守しやすいように工夫します。

---

packでの配置 サンプルコード

Comments

[kurosukee]

先述のコードのようにラジオボタン一つひとつに column=0を設定してはならないということでしょうか？
またどのウィジェットをcolumn=0に設定すればよいのでしょうか？

[teamikl]

> ラジオボタン一つひとつに column=0を設定してはならないということでしょうか？

状況によりますが、今回の質問では
まず、ラジオボタン３つの右側にウィジェットを配置する場合、
右側のウィジェットには rowspan=3 と３列分使う設定が必要になります。

この 3 という数値はラジオボタンの個数によって変わってくるので
この様な数値は「マジックナンバー」と呼ばれていて、不具合の原因となりやすい箇所で
コードを保守しやすくする為には、出来るだけ避けるように設計します。

今回の場合であれば、ラジオボタン３つも一つのフレーム上に配置すれば
rowspan の設定は不要になります。コードの記述量は少し増えて冗長に思われるかもしれませんが
「ラジオボタンの数を増やすと rowspanの値も変更しないとレイアウトが崩れる」
という状況を回避できます。

> どのウィジェットをcolumn=0に設定すればよいのでしょうか？

回答に書いたコードの通りです。

grid では左側から順に詰めるので、
左右に配置したい場合は、columnを２分割して
左に配置したいウィジェットに column=0
右に配置したいウィジェットを column=1 とします。

[kurosukee]

何度も申し訳ないです。
目的のように配置できたのですが、このコード(variable=flg1など)ではラジオボタンはフレーム化できていないのでしょうか？
またフレーム化のやり方を教えていただけますでしょうか。

[teamikl]

> ラジオボタンはフレーム化できていないのでしょうか？

ラジオボタンのグループを纏めてフレーム上に配置、という意図なら可能です。
一纏めにしたグループをクラス化すると良いかもしれません。
pack で配置する場合のサンプルコードを解答に載せたので参考にして見て下さい。

[kurosukee]

ご丁寧にありがとうございます！
非常にわかりやすかったです。