Python Tkinter.ttk ~Button~
Tkinterとはなにか
GUIを構築・操作するために用いるPythonに標準搭載されているライブラリである
TkinterはTcl/TkというOSSのクロスプラットフォームのツールキットをPythonから扱えるようにしたものであり、Pythonの標準ライブラリに含まれている
またTkinterには Tk8.5から導入された Tk のテーマ付きモジュールTkinter.ttkがあり、プラットフォームをまたいでより良い見た目のウィジェットを作成できる機能がある
しかし!!!
Tkinter.ttkのドキュメントがあまりにも見つかりにくい・わかりにくい!!!
ということで自分の備忘録のためにもメモを残すことにするの巻 その2
ベースプログラム
※Python3、Windows環境での動作を想定しています
# -*- coding: utf-8 -*-
import tkinter as tk
import tkinter.ttk as ttk
from tkinter import messagebox as msg
class SampleApp(ttk.Frame):
def __init__(self, master):
super().__init__(master)
self.master = master
# 環境設定をする関数
self.set_env()
# ウィジェットを作る関数
self.create_widgets()
def set_env(self):
"""
###############################
# 画面サイズやタイトルを設定している #
# __init__()内で直接設定しても可 #
###############################
"""
env = {
"geometry": {
"width": 400,
"height": 400
},
"title": "らべる君"
}
self.master.geometry("{width}x{height}".format(
width=env["geometry"]["width"], height=env["geometry"]["height"]))
self.master.title("{title}".format(title=env["title"]))
self.pack()
def clicked_button(self):
"""
###########################################
# commandに引数なしの関数を設定した場合に使う関数 #
###########################################
"""
msg.showinfo("メッセージ", "functionボタンを押しました")
def clicked_button_args(self, text):
"""
###########################################
# commandに引数ありの関数を設定した場合に使う関数 #
###########################################
"""
msg.showinfo("メッセージ", text + "ボタンを押しました")
def create_widgets(self):
"""
#################################
# ここにボタンウィジェットを作っていく #
#################################
"""
pass
def main():
root = tk.Tk()
app = SampleApp(master=root)
app.mainloop()
if __name__ == "__main__":
main()
ウィジェットオプション
・command
ボタンを押したときに実行する処理を設定するオプション
def create_widgets(self):
# 引数なし指定 -> 関数名のみを指定する
button_no_args = ttk.Button(
self, text="button : function", width=20, command=self.clicked_button)
button_no_args.pack(pady=5, ipadx=10, ipady=10)
# 引数あり指定1 lambda
button_args1 = ttk.Button(self, text="button : lambda", width=20,
command=lambda: self.clicked_button_args("lambda"))
button_args1.pack(pady=5, ipadx=10, ipady=10)
# 引数あり指定2 partial
from functools import partial
button_args2 = ttk.Button(self, text="button : partial", width=20, command=partial(
self.clicked_button_args, "partial"))
button_args2.pack(pady=5, ipadx=10, ipady=10)
・compound
画像とテキストの表示位置を設定するオプション
【"none","top","right","bottom","left","image","text"】の何れかを指定できる
def create_widgets(self):
# 関数が終了したときに画像インスタンスを保持しないと画像が表示されない
self.img = tk.PhotoImage(file="./cat.png")
# compound none -> imageが設定されていれば画像を、なければテキストを表示する
button_compound_none = ttk.Button(
self, text="compound : none", image=self.img, compound="none", width=20)
button_compound_none.grid(
row=0, column=0, sticky="nesw", padx=5, pady=5, ipady=10)
# compound top -> 画像を上に、テキストを下に表示する
button_compound_top = ttk.Button(
self, text="compound : top", image=self.img, compound="top", width=20)
button_compound_top.grid(
row=0, column=1, sticky="nesw", padx=5, pady=5, ipady=10)
# compound right -> 画像を右に、テキストを左に表示する
button_compound_right = ttk.Button(
self, text="compound : right", image=self.img, compound="right", width=20)
button_compound_right.grid(
row=0, column=2, sticky="nesw", padx=5, pady=5, ipady=10)
# compound bottom -> 画像を下に、テキストを上に表示する
button_compound_bottom = ttk.Button(
self, text="compound : bottom", image=self.img, compound="bottom", width=20)
button_compound_bottom.grid(
row=0, column=3, sticky="nesw", padx=5, pady=5, ipady=10)
# compound left -> 画像を左に、テキストを右に表示する
button_compound_left = ttk.Button(
self, text="compound : left", image=self.img, compound="left", width=20)
button_compound_left.grid(
row=1, column=0, sticky="nesw", padx=5, pady=5, ipady=10)
# compound image -> 画像のみを表示する
button_compound_image = ttk.Button(
self, text="compound : image", image=self.img, compound="image", width=20)
button_compound_image.grid(
row=1, column=1, sticky="nesw", padx=5, pady=5, ipady=10)
# compound text -> テキストのみを表示する
button_compound_text = ttk.Button(
self, text="compound : text", image=self.img, compound="text", width=20)
button_compound_text.grid(
row=1, column=2, sticky="nesw", padx=5, pady=5, ipady=10)
※引用画像
・cursor
ボタンホバー時のマウスカーソルを設定するオプション
※1. 設定可能なカーソル一覧
def create_widgets(self):
button_cursor_arrow = ttk.Button(
self, text="cursor : arrow", cursor="arrow", width=20)
button_cursor_arrow.pack(pady=5, ipadx=10, ipady=10)
button_cursor_boat = ttk.Button(
self, text="cursor : boat", cursor="boat", width=20)
button_cursor_boat.pack(pady=5, ipadx=10, ipady=10)
button_cursor_circle = ttk.Button(
self, text="cursor : circle", cursor="circle", width=20)
button_cursor_circle.pack(pady=5, ipadx=10, ipady=10)
button_cursor_exchange = ttk.Button(
self, text="cursor : exchange", cursor="exchange", width=20)
button_cursor_exchange.pack(pady=5, ipadx=10, ipady=10)
button_cursor_spider = ttk.Button(
self, text="cursor : spider", cursor="spider", width=20)
button_cursor_spider.pack(pady=5, ipadx=10, ipady=10)
※各ボタンの範囲内にカーソルを移動させると対応したマウスカーソルが表示される
・image
ボタンに設置する画像を設定するオプション
※1. 設定する変数はtkinter.PhotoImageクラスでないといけない
※2. 関数、クラスの処理終了時に画像インスタンスを保持していないと画像が表示されない
def create_widgets(self):
# 関数が終了したときに画像インスタンスを保持しないと画像が表示されない
img = tk.PhotoImage(file="./cat.png")
self.img = tk.PhotoImage(file="./cat.png")
# 画像インスタンス未保持 -> 画像が表示されない
button_image_no_instance = ttk.Button(
self, text="image : img", image=img, compound="bottom", width=20)
button_image_no_instance.pack(pady=5, ipadx=10, ipady=10)
# 画像インスタンス保持 -> 画像が表示される
button_image_instance = ttk.Button(
self, text="image : self.img", image=self.img, compound="bottom", width=20)
button_image_instance.pack(pady=5, ipadx=10, ipady=10)
※引用画像
・takefocus
ウィジェット範囲内でのフォーカス処理を設定するオプション
【"", True, False】の何れかを指定できる
def create_widgets(self):
# takefocus "" -> Trueの時と同じ、クリック時やtab押下時に選択しているウィジェットがわかる
button_takefocus_none = ttk.Button(
self, text="takefocus : \"\"", takefocus="", width=20)
button_takefocus_none.pack(pady=5, ipadx=10, ipady=10)
# takefocus True、 クリック時やtab押下時に選択しているウィジェットがわかる
button_takefocus_true = ttk.Button(
self, text="takefocus : True", takefocus=True, width=20)
button_takefocus_true.pack(pady=5, ipadx=10, ipady=10)
# takefocus False、 クリック時やtab押下時でも選択ウィジェットのマークが出ない
button_takefocus_false = ttk.Button(
self, text="takefocus : False", takefocus=False, width=20)
button_takefocus_false.pack(pady=5, ipadx=10, ipady=10)
・text
ボタンに表示するテキストを指定するオプション
def create_widgets(self):
button = ttk.Button(self, text="text : sample_button", width=20)
button.pack(pady=5, ipadx=10, ipady=10)
・textvariable
ボタンに設定できるウィジェット変数を設定するオプション
def create_widgets(self):
# 初めに表示するテキストをStringVarにセットする
s = tk.StringVar()
s.set("No clicked!!")
# textを設定していてもtextvariableを指定すると無視される
button_textvariable = ttk.Button(
self, text="stringvar", textvariable=s, width=20, command=lambda: s.set("Clicked!!"))
button_textvariable.pack(pady=5, ipady=10)
・underline
指定した位置にある文字の下に下線を設定するオプション
※1. 下線を引くことができる文字は1文字のみ
def create_widgets(self):
button_underline_0 = ttk.Button(
self, text="underline : 0", underline=0, width=20)
button_underline_0.pack(pady=5, ipadx=10, ipady=10)
button_underline_3 = ttk.Button(
self, text="underline : 3", underline=3, width=20)
button_underline_3.pack(pady=5, ipadx=10, ipady=10)
button_underline_7 = ttk.Button(
self, text="underline : 7", underline=7, width=20)
button_underline_7.pack(pady=5, ipadx=10, ipady=10)
# 文字列の長さ以上を設定すると無視される
button_underline_100 = ttk.Button(
self, text="underline : 100", underline=100, width=20)
button_underline_100.pack(pady=5, ipadx=10, ipady=10)
・width
表示するテキストの幅を設定するオプション
※表示する最小幅を設定する場合は-(マイナス)を付ける
def create_widgets(self):
# width指定なし -> ウィジェットサイズはテキストの長さに自動で調整される
button_width_none = ttk.Button(self, text="width : none")
button_width_none.pack(pady=5, ipadx=10, ipady=10)
# width 3 -> 指定したwidthを超えたテキストは非表示
button_width_3 = ttk.Button(self, text="width : 3", width=3)
button_width_3.pack(pady=5, ipadx=10, ipady=10)
# width 10 -> 指定したwidthを超えたテキストは非表示
button_width_10 = ttk.Button(self, text="width : 10", width=10)
button_width_10.pack(pady=5, ipadx=10, ipady=10)
# width -20 -> 指定したwidthの領域は確保される、widthを超えたテキストの場合はテキストの長さに自動で調整される
button_width_m20 = ttk.Button(self, text="width : -20", width=-20)
button_width_m20.pack(pady=5, ipadx=10, ipady=10)
この記事が気に入ったらサポートをしてみませんか?