Python(TkInter) 希望のデザインを達成するため、Widgetを貼付けていきたいが PACK・GRID・PLACEの使い方がよく分からない

Question

【一つのframe】の上で　以下のようなデザインを達成したいのですが、そもそも
①PACKとGRIDを使い分けることができるのか、一度PACKを使いだしたら　同frame内では　PACKの利用に統一しなければいけないのか？
②GRIDのrowとcolumnの考え方も、１あたりのメッシュを認識できていないのに　どうやって位置を決定づけられるのだろう？？
と疑問を抱いています。

1行目に左詰めで、２つのwidgetを並べて貼り付け、
2行目では一つのwidgetを横いっぱいに配置
3行目も　一つのwidgetを横いっぱいに配置

少し空白行をあけて....

再度別の一つのwidgetを横いっぱいにに配置
その直下に　2つのwidgetを左詰めで並べて配置
その直下で　2つのwidgetを右詰めで並べて配置

ということを達成したいのですが、どういう貼付け方を行うべきでしょうか？

ひょっとして１つのframeでは　無理でしょうか？？

Answer 1

(1) PACKとGRIDを使い分けることができるのか、

一度PACKを使いだしたら　同frame内では　PACKの利用に統一しなければいけないのか？

間に frame を挟むことで使い分けは可能です。

同frame内に　PACKとGRID は混在できないので、統一する必要がありますが、
階層が異なる場合、例えばPACKで配置した子frame内でGRIDを使うことは可能です。

PLACE はこの制限を受けません。

(2) GRIDのrowとcolumnの考え方も、１あたりのメッシュを認識できていないのに

どうやって位置を決定づけられるのだろう？？

座標指定が、ピクセル単位の(x,y)ではなくセル単位(row,column) となる。
各セルの width, height は、それぞれの行・列に配置されたウィジェットのうち
最大のモノが適応される…と考えると解りやすいのではないでしょうか。

---

1つのフレームという事で、実際にgrid を使って説明します。
(packの方が管理はしやすいのですが、「横に並べる」時にフレームを使います)

1行目に左詰めで、２つのwidgetを並べて貼り付け、

column を順に指定します。

2行目では一つのwidgetを横いっぱいに配置
3行目も　一つのwidgetを横いっぱいに配置

columnspan で横セルを結合します。
また rowconfigure と sticky=tk.NSWE でリサイズ時に最大化するように指定

少し空白行をあけて....

ttk.Separator 等がありますが、空のラベルを入れました。(ソース後述)

再度別の一つのwidgetを横いっぱいにに配置

2,3 行目と同じ。

その直下に　2つのwidgetを左詰めで並べて配置

1行目と同じ。

その直下で　2つのwidgetを右詰めで並べて配置

右詰めで column を指定します。

---

※ 説明の為に、row, column の表を作りましたが、
この様に管理するのはお勧めしません。
row, column 追加があった際の保守性が悪くなります。

回避策はソースコード内で説明しますが、
極力 rowやcolumn の指定にマジックナンバーを使わない事です。

---

from types import SimpleNamespace
import tkinter as tk
from tkinter import ttk
from tkinter.scrolledtext import ScrolledText


def create_view(root):
    parent = ttk.Frame(root, style="parent.TFrame")

    labelA = ttk.Label(parent, text="Label", width=20, style="a.TLabel")
    labelB = ttk.Label(parent, text="ListBox?", width=20, style="b.TLabel")
    labelC = ttk.Label(parent, text="Label", width=20, style="c.TLabel")

    buttonA = ttk.Button(parent, text="Button")
    buttonB = ttk.Button(parent, text="Button")
    buttonC = ttk.Button(parent, text="Button")
    buttonD = ttk.Button(parent, text="Quit", command=root.destroy)

    separator = ttk.Label(parent, style="a.TLabel") # As blank vertical space

    text = ScrolledText(parent, height=10)
    text.insert(tk.END, "ScrolledText")
    message = tk.Message(parent, text="Message ....", width=200)

    # NOTE: export all local variables
    return SimpleNamespace(**locals())


def init_view_style(view):
    # style config
    bgcolor = "#dde7ee"
    bgcolor2 = "#9bc2e6"
    fgcolor = "yellow"
    font = ("", 10, "bold")

    # Style non-ttk widgets
    view.root.configure(bg=bgcolor)
    view.text.config(insertbackground="white", bg="black", fg=fgcolor, borderwidth=0, font=font)
    view.message.configure(fg=fgcolor, bg=bgcolor2, font=font)

    # ttk widgets style
    style = ttk.Style(view.root)
    style.configure("TLabel", font=("", 10, "bold"), anchor="c")
    style.configure("a.TLabel", background=bgcolor)
    style.configure("b.TLabel", background="black", foreground=fgcolor)
    style.configure("c.TLabel", background=bgcolor2, foreground=fgcolor)
    style.configure("TButton", background=bgcolor)
    style.configure("parent.TFrame", background=bgcolor)


def init_view_layout(view):
    # Grid Layout を使う時の Tips

    # 行毎にレイアウトを呼ぶ出す部分を関数化し
    # デコレーターによりリスト `rows` に入れます。
    # 後でまとめて、順番に行番号 `row` を与えて呼び出します。

    # これにより、行の入れ替えや追加が容易に管理できるようになります。

    from itertools import count
    from functools import partial

    rows = []
    addrow = rows.append
    maxcolumn = 6
    right = lambda column: maxcolumn-column-1
    nopad = {"padx":0, "pady": 0}

    def _finish_layout():
        for row, func in enumerate(rows):
            func(row, partial(next, count()), **nopad)

    parent = view.parent
    parent.pack(fill=tk.BOTH, expand=True, padx=10, pady=10)
    parent.grid_columnconfigure(2, weight=True)

    @addrow
    def row_header(row, col, **kw):
        view.labelA.grid(row=row, column=col(), **kw)
        view.labelB.grid(row=row, column=col(), **kw)

    @addrow
    def row_scrolledtext(row, col, **kw):
        view.text.grid(row=row, column=col(), columnspan=maxcolumn, sticky=tk.NSEW, **kw)
        parent.grid_rowconfigure(row, weight=True)

    @addrow
    def row_center_button(row, col, **kw):
        view.buttonA.grid(row=row, column=col(), columnspan=maxcolumn)

    @addrow
    def row_blank_separator(row, col, **kw):
        view.separator.grid(row=row, column=col(), sticky=tk.NSEW, **kw)

    @addrow
    def row_message(row, col, **kw):
        view.message.grid(row=row, column=col(), columnspan=maxcolumn, sticky=tk.NSEW, **kw)
        parent.grid_rowconfigure(row, weight=True)

    @addrow
    def row_bottom_label(row, col, **kw):
        view.buttonB.grid(row=row, column=col(), sticky=tk.NSEW, **kw)
        view.labelC.grid(row=row, column=col(), sticky=tk.NSEW, **kw)

    @addrow
    def row_footer(row, col, **kw):
        view.buttonD.grid(row=row, column=right(col()), sticky=tk.NSEW, **kw)
        view.buttonC.grid(row=row, column=right(col()), sticky=tk.NSEW, **kw)

    _finish_layout()


def main():
    root = tk.Tk()
    root.title("grid layout demo")
    view = create_view(root)
    init_view_style(view)
    init_view_layout(view)
    root.mainloop()


if __name__ == '__main__':
    main()

init_view_style(view) の行をコメントアウトすると、スタイル適応なしで実行されます。

---

追記: packでの実装例

最小限のコードになりますが、簡単な方法では、
「横に並べる」部分だけを別フレームに切り出し、
side="left" を指定して横並びにします。

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


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

    frameA = ttk.Frame(root)
    frameA.pack(fill=tk.BOTH)
    ttk.Label(frameA, text="Label", width=10).pack(side=tk.LEFT)
    ttk.Label(frameA, text="ListBox?", width=10).pack(side=tk.LEFT)

    text = ScrolledText(root, height=10)
    text.pack(fill=tk.BOTH, expand=1)
    text.insert(tk.END, "ScrolledText")

    ttk.Button(root, text="Button").pack()
    ttk.Label(root).pack()
    tk.Message(root, text="Message", width=200, bg="black", fg="white").pack(fill=tk.BOTH, expand=1)

    frameB = ttk.Frame(root)
    frameB.pack(fill=tk.BOTH)
    ttk.Button(frameB, text="Button", width=10).pack(side=tk.LEFT)
    ttk.Label(frameB, text="Label", width=10).pack(side=tk.LEFT)

    ttk.Button(root, text="Quit", command=root.destroy).pack(side=tk.RIGHT)
    ttk.Button(root, text="Button").pack(side=tk.RIGHT)

    root.mainloop()


if __name__ == '__main__':
    main()

Comments

[magichan]

全く同じタイミングで同じような投稿とは・・運命を感じますね！（嘘）

[teamikl]

投稿前にリロードしたのですが、誤って送信してしまったのかと焦りました（笑)

そして、magichanさんの画像を見て、自分のcolumn 2, 3 は冗長だったかなと気が付いたのですが、
将来あるかもしれない列の追加に備えて、余らせておくのもありかなとも考えたり。
gridは使いづらいと思ってたのですが、収穫がありました。

[saya24]

丁寧な説明誠にありがとうございます。
ちょっとじっくりみさせてください。ようやく理解出来そうです。
まずはお礼まで

Answer 2

①
YES:LayoutManagerは同じマスターウィンドウ上でミックスするべきではありません。
②
下記のようにExcel上でレイアウトを構築するイメージです。
・それぞれの行・列の幅をどうするか
・スペースをどうするか
は後から構いませんので、とりあえずはどの行・列にWidgetを配置するかだけを考えると良いかと思います。

上記のレイアウトが決まれば、
１．Widgetの widthパラメータを設定することで、それぞれ列の幅を設定する
２．スペースが必用な箇所のgrid()のパラメータに padx,padyを渡す
３．Windowサイズに変更が生じた際に変更される行・列をgrid_rowconfigure(),grid_columnconfigure() のweight パラメータで設定する
４．Windowサイズに変更が生じ、行・列の幅が変更された際に Widgetの挙動を grid()のstickyパラメータで設定する

あたりでそれっぽい挙動になるのではないでしょうか

import tkinter as tk

root = tk.Tk()
label1 = tk.Label(root, text='Label', width=10)
label1.grid(row=0, column=0)
listbox = tk.Listbox(root, height=1, width=10)
listbox.grid(row=0, column=1)
text1 = tk.Text(root)
text1.grid(row=1, column=0, columnspan=5, sticky=tk.W+tk.E)
button1  = tk.Button(root, text='Button', width=10)
button1.grid(row=2, column=2, padx=20, pady=(0, 20))
text2  = tk.Text(root)
text2.grid(row=3, column=0, columnspan=5, sticky=tk.W+tk.E)
button2 =  tk.Button(root, text='Button', width=10)
button2.grid(row=4, column=0)
label2 = tk.Label(root, text='Label', width=10)
label2.grid(row=4, column=1)
button3 =  tk.Button(root, text='Button', width=10)
button3.grid(row=5, column=3)
button4 =  tk.Button(root, text='Button', width=10)
button4.grid(row=5, column=4)

root.grid_rowconfigure(1, weight=1)
root.grid_rowconfigure(3, weight=1)
root.grid_columnconfigure(2, weight=1)

root.mainloop()

Comments

[saya24]

ありがとうございます。非常に分かりやすいです。
実装後に報告を改めさせてください。まずはお礼まで

[saya24]

改めてありがとうございました。今の私のレベルに本当にちょうど良いでレベルで　実際少々の変更を加えながら　今後に生かせるような回答となっておりました。

また何かの機会でご支援を頂けたら幸いです、重ねてお礼を申し上げます。