【tkinter】Frameを使ってみる

tkinterのFrameの使い方について紹介します。

Frameはwidgetをまとめてくれる入れ物のようなものです。Frameを使うことでレイアウト構成を複雑にすることを防ぐことができます。

この記事でやること。

• 基本的な使い方
• オプションの設定方法

Widgetの作り方

widgetの作り方についておさらいします。

tkinterでアプリケーションの開発をするときwidget（部品）を組み合わせて構築していきます。

widgetの作り方は次のとおりです。

　widget = ヴィジット名（parent, **options）

基本的にヴィジット名には部品と同じ名前が付けられています。例えば、ボタンだとButton、ラベルだとLabelといった感じです。

 （例）button = Button(parent, **options)

引数のparentは親ヴィジットと呼ばれるものでその部品の配置先を指定し、optionsでその部品の設定を行います。

Frameを作る

Frame配置するためのメインウィンドウを用意します。

import tkinter as tk

root = tk.Tk()
root.mainloop()

上のコードを実行すると、下のウィンドウが起動します。このウィンドウにFrameを配置します。

root = tk.Tk()とroot.mainloop()の間に以下のコードを追加します。

frame = tk.Frame(root, width=300, height=300, bg="black")
frame.pack()

上記のコードを追加して実行すると、下のウィンドウが立ち上がります。

この記事のはじめにwidgetの作り方について簡単に紹介しましたが、parent（親ヴィジット）にはFrameの配置先であるrootを指定しています。あとは、オプションでFrameの高さと横の長さ背景の色を指定しています。

次にpack()を使ってFrameをメインウィンドウに配置しています。

Frameの基本的な使い方は以上です。

オプションについて

オプションについて紹介していきます。

背景色

Frameの色はbgで設定することができます。

frame = tk.Frame(root, width=300, height=300, bg="beige")

設定できる色についてはこちらのページを参考にしてみてください。（※少し試してみましたが、ここに記載されている色すべてが設定できるみたいではないみたいです。）

マウスポインタの見た目を変える。

cursorを設定することで、Frameの上にマウスポインタがあるときに、そのマウスポインタの見た目を変えることができます。

例えば、cursorをdotに設定するとFrameの上にマウスポインタがあるときにマウスポインタが黒い点で表示されます。

frame = tk.Frame(root, width=300, height=300, bg="white", cursor="dot")

cursorは他にも多くの種類を設定することができます。詳細は以下のリンクを見てください。

Python - Tkinter Cursors - Tutorialspoint

水平、垂直のpadding

Frameはwidgetをまとめて入れるために使われますが、下のプログラムを実行すると、

import tkinter as tk

root = tk.Tk()
frame = tk.Frame(root, width=100, height=100, bg="navy")
label = tk.Label(frame, text="white")
frame.pack()
label.pack()
root.mainloop()

このような小さなウィンドウが起動します。

Frameの生成時に高さと横をサイズを100に設定していますが、無視されていますね。

こんなときはpadxとpadyの設定をすることで、以下のような見た目に変えることができます。

frame = tk.Frame(root, bg="navy", padx=10, pady=10)

境目の見た目を変える。

reliefを設定することでFrameの境目の見た目を変更することができます。さらにbdで境目のサイズを設定することができます。

reliefはデフォルトでflatに設定されています。reliefはオプションとして、sunken, raised, groove, ridgeがあります。

frame = tk.Frame(
    root, width=100, height=100, bg="chocolate",
    relief="groove", bd=10
)

試しにreliefをgrooveにしてプログラムを実行すると下のウィンドウが起動します。

おわり

Frameの使い方について簡単にまとめてみました。

他のwidgetの使い方について知りたい方はこちらへどうぞ。

参考記事 - The Tkinter Frame Widget