こんにちは!ゆーや(@yuyamanm118712)です。
こちらのページでは完全独学でWebプログラマとなった私が
デスクトップアプリには必須!!TkinterでSpinboxを表示する方法をご紹介します!

Tkinterの基本的な使い方は以下の記事を見てね!
Spinboxウィジェットは、ユーザーが数値やオプションを簡単に選択できるようにするための便利なウィジェットです!

Spinboxウィジェットの使い方、オプション、そして実際に動作するサンプルコードを用いて、初心者でもわかりやすく解説します!
この記事を読むと
- TkinterでSpinboxが作成できる!
- TkinterでSpinboxの基本的な使い方について理解できる!
- TkinterでSpinboxのオプションについて理解できる!
Spinboxの基本
Spinbox作成までのサンプルコード
import tkinter as tk
from tkinter import ttk
# メインウィンドウの作成
root = tk.Tk()
root.title("Spinbox-完全独学Python")
root.geometry("500x300")
# Spinboxの作成
spinbox = tk.Spinbox(root, from_=0, to=10)
spinbox.pack(pady=20)
# メインループの開始
root.mainloop()


Spinboxは、ユーザーが数値やオプションを指定された範囲内で選択できる入力フィールド!
上下の矢印ボタンを使って値を増減させることができるよ!
Spinboxのオプション
最小値(from_)と最大値(to)
import tkinter as tk
from tkinter import ttk
# メインウィンドウの作成
root = tk.Tk()
root.title("Spinbox-完全独学Python")
root.geometry("500x300")
# Spinboxの作成
spinbox = tk.Spinbox(root, from_=0, to=100)
spinbox.pack(pady=20)
# メインループの開始
root.mainloop()


from_とtoで最小値と最大値を設定できる!
確かに100まで行くようになっているね!
値を増減させるステップを設定(increment)
import tkinter as tk
from tkinter import ttk
# メインウィンドウの作成
root = tk.Tk()
root.title("Spinbox-完全独学Python")
root.geometry("500x300")
# Spinboxの作成
spinbox = tk.Spinbox(root, from_=0, to=100, increment=5)
spinbox.pack(pady=20)
# メインループの開始
root.mainloop()


1回矢印を押した時の増減幅が変更できるね!
この場合は、5ずつ増減するようになっている!
特定の値のリストから選択(values)
import tkinter as tk
from tkinter import ttk
# メインウィンドウの作成
root = tk.Tk()
root.title("Spinbox-完全独学Python")
root.geometry("500x300")
# Spinboxの作成
spinbox = tk.Spinbox(root, values=(10, 20, 30, 40, 50))
spinbox.pack(pady=20)
# メインループの開始
root.mainloop()


タプルやリストによる指定もできるよ!
例はタプルによる指定の例!
最大値に達した後に最小値に戻るループが有効(wrap)
import tkinter as tk
from tkinter import ttk
# メインウィンドウの作成
root = tk.Tk()
root.title("Spinbox-完全独学Python")
root.geometry("500x300")
# Spinboxの作成
spinbox = tk.Spinbox(root, from_=0, to=10, wrap=True)
spinbox.pack(pady=20)
# メインループの開始
root.mainloop()
押下前

上矢印押下


最大値で上矢印を押すと最小値に戻ったね!
理想のユーザビリティに合わせて設定しよう!
値が変更されたときの特定の関数を呼び出し(command)
import tkinter as tk
from tkinter import ttk
# メインウィンドウの作成
root = tk.Tk()
root.title("Spinbox-完全独学Python")
root.geometry("500x300")
# Spinboxの作成
def on_spinbox_change():
result_label.config(text=f"Value changed to: {spinbox.get()}")
result_label = tk.Label(root, text="")
result_label.pack(pady=10)
spinbox = tk.Spinbox(root, from_=0, to=10, command=on_spinbox_change)
spinbox.pack(pady=20)
# メインループの開始
root.mainloop()


Spinboxの値を変更すると、関数(on_spinbox_change)が動いているね!
Spinboxの値の取得はspinbox.get()でできるよ!
値の表示形式を指定(format)
import tkinter as tk
from tkinter import ttk
# メインウィンドウの作成
root = tk.Tk()
root.title("Spinbox-完全独学Python")
root.geometry("500x300")
# Spinboxの作成
spinbox = tk.Spinbox(root, from_=0, to=10, format="%.2f")
spinbox.pack(pady=20)
# メインループの開始
root.mainloop()


formatを使えば、値の表示形式を変更できるよ!
これにincrementを組み合わせれば、小数を用いたSpinboxも作れるね!
まとめ
本記事では、Spinboxを使って、Tkinterで画面にスピンボックス(上下の矢印ボタンを使って値を増減させる)を表示する方法を紹介しました!
ポイントは以下の7つです!
① Tkinterで画面にスピンボックスを表示するには「Spinbox」を使う
② 「from_, to」オプションは、最小値と最大値を指定!
③ 「increment」オプションは、値を増減させるステップを設定!
④ 「values」オプションは、特定の値のリストから選択!
⑤ 「wrap」オプションは、最大値に達した後に最小値に戻るループが有効!
⑥ 「command」オプションは、値が変更されたときの特定の関数を呼び出しを設定!
⑦ 「format」オプションは、値の表示形式を指定!

まとめの内容を見て、もう頭に浮かべば完璧!
今日もお疲れ様です!
コメント