KURORO BLOGのロゴ

このエントリーをはてなブックマークに追加
【完全版!?】Tkinterを用いてpackの使い方や実例をわかりやすく解説!?

【完全版!?】Tkinterを用いてpackの使い方や実例をわかりやすく解説!?

Tkinterを使い始めたけれども、packの使い方がわからない。。悩んでいる方も多いのではないでしょうか?今回はTkinterを用いて、packの使い方や実例をわかりやすく解説致します。是非ご一読いただけますと幸いです。

目次
  1. そもそもTkinterで使われるpackとは?
    1. Tkinterの構成要素
  2. 下準備
  3. tkinterで活用されるpack関数の定義
    1. side
    2. anchor
    3. ipadx, ipady
    4. padx, pady
    5. fill
    6. expand
    7. before, after
    8. in_
  4. packを使って配置したWidgetを非表示にしたい場合
  5. その他のWidgetの配置方法
  6. Tkinterで使われるpackのまとめ
  7. 参考文献
目次を開く⬇︎

そもそもTkinterで使われるpackとは?

Tkinterで使われるpackとは、Widgetを配置する際に利用する関数を意味します。

別名でpack関数と呼ばれます。

文章だけで理解するのは少し難しいですね。。以下の「Tkinterの構成要素」を確認しながら、理解していきましょう。

Tkinterの構成要素

Tkinterの構成要素として、Window, Frame, Widgetの概念が存在します。

名称説明文
Window  画像における水色枠の部分になります。Tkinter画面全体を表します。
Frame画像における紫枠の部分になります。Widgetが1つ以上ある場合に、取りまとめるものです。
Widget黄緑色枠の箇所をWidgetと呼びます。1つの機能を持つ最小単位 = Widgetと考えると良いでしょう。

前の章でTkinterで利用するpackとは、Widgetを配置する際に利用する関数とお伝えしました。

「Tkinterの構成要素」の画像内では、黄緑色枠に該当するWidgetに対して、配置を変更するためにpackを活用します。

Tkinterの構成要素を理解したところで、実際にpackの活用方法を理解していきましょう。

下準備

今回は先ほど紹介した「Tkinterの構成要素」の画像を元に、packの使い方をお伝えします。

下にコードを貼り付けておきますので、画像と見比べながら、コードを確認してみてください。できれば、一緒にpackを体験しましょう。

1import tkinter as tk
2
3class Application(tk.Frame):
4    def __init__(self, master=None):
5        # Windowの初期設定を行う。
6        super().__init__(master)
7
8        # Windowの画面サイズを設定する。
9        # geometryについて : https://kuroro.blog/python/rozH3S2CYE0a0nB3s2QL/
10        self.master.geometry("300x200")
11
12        # Windowを親要素をとして、frame Widget(Frame)を作成する。
13        # Frameについて : https://kuroro.blog/python/P20XOidA5nh583fYRvxf/
14        frame = tk.Frame(self.master)
15        # Windowを親要素とした場合に、frame Widget(Frame)をどのように配置するのか?
16        frame.pack()
17
18        # frame Widget(Frame)を親要素として、label Widgetを作成する。
19        # text : テキスト情報
20        # width : 幅設定
21        # height : 高さ設定
22        # bg : 背景色設定
23        # 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/
24        # Labelについて : https://kuroro.blog/python/Pj4Z7JBNRvcHZvtFqiKD/
25        label1 = tk.Label(frame, text="label1", width=10, height=10, bg="red")
26        # frame Widget(Frame)を親要素として、label Widgetを作成する。
27        # text : テキスト情報
28        # width : 幅設定
29        # height : 高さ設定
30        # bg : 背景色設定
31        # 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/
32        # Labelについて : https://kuroro.blog/python/Pj4Z7JBNRvcHZvtFqiKD/
33        label2 = tk.Label(frame, text="label2", width=10, height=10, bg="green")
34        # frame Widget(Frame)を親要素として、label Widgetを作成する。
35        # text : テキスト情報
36        # width : 幅設定
37        # height : 高さ設定
38        # bg : 背景色設定
39        # 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/
40        # Labelについて : https://kuroro.blog/python/Pj4Z7JBNRvcHZvtFqiKD/
41        label3 = tk.Label(frame, text="label3", width=10, height=10, bg="blue")
42
43        # frame Widget(Frame)を親要素とした場合に、label1 Widgetをどのように配置するのか?
44        label1.pack()
45        # frame Widget(Frame)を親要素とした場合に、label2 Widgetをどのように配置するのか?
46        label2.pack()
47        # frame Widget(Frame)を親要素とした場合に、label3 Widgetをどのように配置するのか?
48        label3.pack()
49
50# Tkinter初学者参考 : https://docs.python.org/ja/3/library/tkinter.html#a-simple-hello-world-program
51if __name__ == "__main__":
52    # Windowを生成する。
53    # Windowについて : https://kuroro.blog/python/116yLvTkzH2AUJj8FHLx/
54    root = tk.Tk()
55    app = Application(master=root)
56    # Windowをループさせて、継続的にWindow表示させる。
57    # mainloopについて : https://kuroro.blog/python/DmJdUb50oAhmBteRa4fi/
58    app.mainloop()

上記のコードをPython環境で実行すると、「Tkinterの構成要素」で紹介した画像の結果が表示されます。

tkinterで活用されるpack関数の定義

pack関数は、

1pack(option1, option2, ...)

で定義されます。戻り値はありません。

pack関数で使われるoptionの種類としては

  • side
  • anchor
  • ipadx, ipady
  • padx, pady
  • fill
  • expand
  • before, after
  • in_

があります。順番に見ていきましょう。

side

side optionを使用すると、親要素(今回はFrame)に対して、Widgetをどのように埋め込むのか指定します。指定方法として

  • tk.TOP : 上からWidgetを埋め込む
  • tk.LEFT : 左からWidgetを埋め込む
  • tk.RIGHT : 右からWidgetを埋め込む
  • tk.BOTTOM : 下からWidgetを埋め込む

の4種類が存在します。デフォルト(何も指定しない場合)では 、tk.TOP(上からWidgetを埋め込む)が設定されます。

例えば下準備コードのlabel1.pack(), label2.pack(), label3.pack()箇所を、以下のように変更すると、

1label1.pack(side=tk.RIGHT)
2label2.pack()
3label3.pack()

以下の画像のようにWidgetが配置されます。

anchor

anchor optionを使用すると、親要素(今回はFrame)に対して、Widgetをどこに配置するかを決めるために使います。

指定方法として

  • tk.W : Westの略。左寄せにWidgetを配置する。
  • tk.N : Northの略。上寄せにWidgetを配置する。
  • tk.S : Southの略。下寄せにWidgetを配置する。
  • tk.E : Eastの略。右寄せにWidgetを配置する。
  • tk.NE : North Eastの略。右上にWidgetを配置する。
  • tk.NW : North Westの略。左上にWidgetを配置する。
  • tk.SW : South Westの略。左下にWidgetを配置する。
  • tk.SE : South Eastの略。右下にWidgetを配置する。
  • tk.CENTER : 中央にWidgetを配置する。

の9種類が存在します。デフォルト(何も指定しない場合)では、tk.CENTERが設定されます。

例えば下準備コードのlabel1.pack(), label2.pack(), label3.pack()箇所を、以下のように変更すると、

1label1.pack(side=tk.LEFT, anchor=tk.S)
2label2.pack()
3label3.pack()

以下の画像のようにWidgetが配置します。

ipadx, ipady

ipadx, ipady optionを指定すると、それぞれWidgetを横、縦に引き伸ばす幅を設定できます。

何も指定しない場合(デフォルト)、ipadx, ipadyともに値は0です。

例えば下準備コードのlabel1.pack(), label2.pack(), label3.pack()箇所を、以下のように変更すると、

1label1.pack()
2label2.pack(ipadx=50, ipady=40)
3label3.pack()

以下の画像のようにWidgetが配置されます。

padx, pady

padx, pady optionを指定すると、それぞれWidget外側の横、縦に空白の幅を設定できます。

何も指定しない場合(デフォルト)、padx, padyともに値は0です。

例えば下準備コードのlabel1.pack(), label2.pack(), label3.pack()箇所を、以下のように変更すると、

1label1.pack(side=tk.LEFT)
2label2.pack(pady=20, padx=30)
3label3.pack()

以下の画像のようにWidgetが配置されます。

fill

fill optionを利用すると、指定されたWidgetの空白の領域をどのように扱うのかを設定できます。

指定方法として

  • tk.BOTH : x軸, y軸方向にWidgetを拡張する。
  • tk.X : x軸方向にWidgetを拡張する。
  • tk.Y : y軸方向にWidgetを拡張する。
  • tk.None : Widgetを拡張しない。

の4種類が存在します。デフォルト(何も指定しない場合)では、tk.Noneが設定されます。

例えば下準備コードのlabel1.pack(), label2.pack(), label3.pack()箇所を、以下のように変更すると、

1label1.pack(side=tk.LEFT, fill=tk.Y)
2label2.pack(pady=20, padx=30)
3label3.pack()

以下の画像のようにWidgetが配置されます。

expand

expand optionを指定すると、親要素(今回はFrame)の領域が拡大した場合に、Widgetの領域も合わせて拡大するのか設定できます。

指定できる値として、True(1) : 拡大, False(0) : 拡大しないがあり、False(0)がデフォルト(何も指定しない場合)で設定されます。

before, after

before, after optionを利用すると、それぞれ指定したWidgetの前、後ろにWidgetを埋め込みます。

例えば下準備コードのlabel1.pack(), label2.pack(), label3.pack()箇所を、以下のように変更すると、

1label1.pack()
2label2.pack()
3label3.pack(after=label1)

以下の画像のように、label3のWidgetがlabel1のWidgetの後に配置されます。

in_

in_ optionを利用すると、Widget作成時に親要素を設定していない場合に、pack関数利用時に親要素の指定が可能になります。

例えば下準備のコードを以下のように変更すると、

1- label1 = tk.Label(frame, text="label1", width=10, height=10, bg="red")
2+ # 親要素を設定しない
3+ label1 = tk.Label(text="label1", width=10, height=10, bg="red")
4
5...
6...
7
8- label1.pack()
9+ # pack関数利用時に親要素を指定する。
10+ label1.pack(in_=frame)

以下の画像のようにWidgetが配置されます。

packを使って配置したWidgetを非表示にしたい場合

packを使って配置したWidgetを非表示にしたい場合は、pack_forget()関数を利用すると便利です。

例えば以下のようなコードを作成して、

1import tkinter as tk
2
3class Application(tk.Frame):
4    def __init__(self, master=None):
5        # Windowの初期設定を行う。
6        super().__init__(master)
7
8        # Windowの画面サイズを設定する。
9        # geometryについて : https://kuroro.blog/python/rozH3S2CYE0a0nB3s2QL/
10        self.master.geometry("300x200")
11
12        # Windowを親要素をとして、frame Widget(Frame)を作成する。
13        # Frameについて : https://kuroro.blog/python/P20XOidA5nh583fYRvxf/
14        frame = tk.Frame(self.master)
15        # Windowを親要素とした場合に、frame Widget(Frame)をどのように配置するのか?
16        frame.pack()
17
18        # frame Widget(Frame)を親要素として、label Widgetを作成する。
19        # text : テキスト情報
20        # width : 幅設定
21        # height : 高さ設定
22        # bg : 背景色設定
23        # 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/
24        # Labelについて : https://kuroro.blog/python/Pj4Z7JBNRvcHZvtFqiKD/
25        label = tk.Label(frame, text="label", width=10, height=10, bg="red")
26
27        # frame Widget(Frame)を親要素とした場合に、label Widgetをどのように配置するのか?
28        label.pack()
29
30        # frame Widget(Frame)を親要素として、button Widgetを作成する。
31        # text : テキスト情報
32        # command : ボタンを選択した場合に、実行する関数を設定する。pack_forget()関数を実行してlabel Widgetを非表示にする。
33        # Buttonについて : https://kuroro.blog/python/oFju6EngDtcYtIiMIDf1/
34        deleteBtn = tk.Button(frame, text='DELETE LABEL', command=lambda: label.pack_forget())
35        # frame Widget(Frame)を親要素として、button Widgetをどのように配置するのか?
36        deleteBtn.pack()
37
38        # frame Widget(Frame)を親要素として、button Widgetを作成する。
39        # text : テキスト情報
40        # command : ボタンを選択した場合に、実行する関数を設定する。pack()関数を実行してlabel Widgetを表示する。
41        # Buttonについて : https://kuroro.blog/python/oFju6EngDtcYtIiMIDf1/
42        recoverBtn = tk.Button(frame, text='RECOVER LABEL', command=lambda: label.pack())
43        # frame Widget(Frame)を親要素として、button Widgetをどのように配置するのか?
44        recoverBtn.pack()
45
46# Tkinter初学者参考 : https://docs.python.org/ja/3/library/tkinter.html#a-simple-hello-world-program
47if __name__ == "__main__":
48    # Windowを生成する。
49    # Windowについて : https://kuroro.blog/python/116yLvTkzH2AUJj8FHLx/
50    root = tk.Tk()
51    app = Application(master=root)
52    # Windowをループさせて、継続的にWindow表示させる。
53    # mainloopについて : https://kuroro.blog/python/DmJdUb50oAhmBteRa4fi/
54    app.mainloop()

「DELETE LABEL」と書かれたボタンを選択すると、以下の画像のようにlabel Widgetを非表示にします。

反対に「RECOVER LABEL」と書かれたボタンを選択すると、以下の画像のようにlabel Widgetを表示します。

またlabel Widgetを完全に削除したい場合は、

1+ # destroy()関数を利用する。
2- deleteBtn = tk.Button(frame, text='DELETE LABEL', command=lambda: label.pack_forget())
3+ deleteBtn = tk.Button(frame, text='DELETE LABEL', command=lambda: label.destroy())

と変更ください。

その他のWidgetの配置方法

その他のWidgetの配置方法として、

  • grid
  • place

があります。

gridに関しては、【徹底解説!?】Tkinterで使われるgridの活用方法を完全マスター!?でまとめていますので、詳しく知りたい方は是非ご確認ください。

placeに関しては、Tkinterで使われるplaceとは?サンプルコードを通して完全攻略!?でまとめていますので、詳しく知りたい方は是非ご確認ください。

Tkinterで使われるpackのまとめ

  • Tkinterは、Window, Frame, Widgetで構成される。
  • Tkinterで使われるpackとは、Widgetを配置する際に利用する関数を意味します。
  • 別名でpack関数と呼ばれます。

参考文献