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

Tkinterの基本的な使い方は以下の記事を見てね!
Tkinterで「画面に入力欄を表示する」ためにはEntry(エントリー)というウィジェット(部品)を使います!
Entryを用いて、入力欄のデザインや入力した値の取得などを説明していきます!
この記事を通して、Entry(エントリー)は使いこなせるようにしておきましょう!

本記事ではLabelについても扱うよ!
Labelについては下記の記事を見てね!
この記事を読むと
- Tkinterで作成した画面に入力欄を表示できる!
- Tkinterで表示した入力欄に入力されたテキストを取得できる!
- Tkinterで表示した入力欄のデザインを変えることができる!
Entry(入力欄)の基本
Entry(入力欄)作成までのサンプルコード
import tkinter as tk
# ウィンドウの作成
root = tk.Tk()
root.title("Entry-完全独学Python")
root.geometry("500x300")
# ラベル
label = tk.Label(root, text="入力欄")
label.pack()
# 入力欄(Entry)の作成
entry = tk.Entry(root)
entry.pack()
# ウィンドウの表示
root.mainloop()


画面に入力欄が表示出来たね!
ただ、これでは値が入力できただけで意味がないね!
その値を取得する方法を教えるよ!
Entry(入力欄)に入力された値を取得
{Entryオブジェクト}.get()
import tkinter as tk
# ボタンを押下 → 入力されたテキストでラベルを作成・表示
def display_text():
label_entry_text = tk.Label(root, text=entry.get())
label_entry_text.pack()
# ウィンドウの作成
root = tk.Tk()
root.title("Entry-完全独学Python")
root.geometry("500x300")
# ラベル
label = tk.Label(root, text="入力欄")
label.pack()
# 入力欄(Entry)の作成
entry = tk.Entry(root)
entry.pack()
# ボタン
button = tk.Button(root, text="PUSH", command=display_text)
button.pack()
# ウィンドウの表示
root.mainloop()
ボタン押下前

ボタン押下後


入力した値は{Entryオブジェクト}.get()で取得できるよ!
ソースで言う「entry.get()」の部分だね!
Entry(入力欄)のオプション
入力欄の背景色(bg)
import tkinter as tk
# ウィンドウの作成
root = tk.Tk()
root.title("Entry-完全独学Python")
root.geometry("500x300")
# ラベル
label = tk.Label(root, text="入力欄")
label.pack()
# 入力欄(Entry)の作成
entry = tk.Entry(root, bg="red")
entry.pack()
# ウィンドウの表示
root.mainloop()


bgオプションで背景色を決められる!
もちろん、カラーコード(#fff000のようなもの)でも指定可能!
ボーダーの太さ(bd)
import tkinter as tk
# ウィンドウの作成
root = tk.Tk()
root.title("Entry-完全独学Python")
root.geometry("500x300")
# ラベル
label = tk.Label(root, text="入力欄")
label.pack()
# 入力欄(Entry)の作成
entry = tk.Entry(root, bd=10)
entry.pack()
# ウィンドウの表示
root.mainloop()


bd=数値でボーダーの太さが指定できる!
入力欄の幅(width)
import tkinter as tk
# ウィンドウの作成
root = tk.Tk()
root.title("Entry-完全独学Python")
root.geometry("500x300")
# ラベル
label = tk.Label(root, text="入力欄")
label.pack()
# 入力欄(Entry)の作成
entry = tk.Entry(root, width=50)
entry.pack()
# ウィンドウの表示
root.mainloop()


widthで幅が調整できる!
入力される文字のテキストのフォントなど(font)

こちらはLabel(ラベル)の時と同じでfont属性にタプルを持たせてあげればOK!
詳しくは下記の記事を見てね!
カーソルの設定(cursor)
import tkinter as tk
# ウィンドウの作成
root = tk.Tk()
root.title("Entry-完全独学Python")
root.geometry("500x300")
# ラベル
label = tk.Label(root, text="入力欄")
label.pack()
# 入力欄(Entry)の作成
entry = tk.Entry(root, cursor="circle")
entry.pack()
# ウィンドウの表示
root.mainloop()

こちらは入力欄にカーソル合わせた時のカーソルの見た目が変更できる!
cursorの値には沢山種類があるので、調べて見てね!
(カーソルの変化はキャプチャが取れないので是非試してね!)
入力欄の状態の変更(state)
import tkinter as tk
# ウィンドウの作成
root = tk.Tk()
root.title("Entry-完全独学Python")
root.geometry("500x300")
# ラベル
label = tk.Label(root, text="入力欄")
label.pack()
# 入力欄(Entry)の作成
entry = tk.Entry(root, state=tk.DISABLED)
entry.pack()
# ウィンドウの表示
root.mainloop()


stateの値を「tk.DISABLED」にすると入力欄が使用不可になる!
もとに戻したいときは「tk.NORMAL」にすると使用可能になる!
入力欄の枠線のスタイル(relief)

こちらはButton(ボタン)の時と同じでrelief属性に値を設定してあげればOK!
詳しくは下記の記事を見てね!
パスワード入力用(show)
import tkinter as tk
# ウィンドウの作成
root = tk.Tk()
root.title("Entry-完全独学Python")
root.geometry("500x300")
# ラベル
label = tk.Label(root, text="入力欄")
label.pack()
# 入力欄(Entry)の作成
entry = tk.Entry(root, show="*")
entry.pack()
# ウィンドウの表示
root.mainloop()


showの値を「*」に設定すると、
パスワードなどを入力する時に使うものになるね!
まとめ
本記事では、Entry(入力欄)を使って、Tkinterで画面に入力欄を表示する方法を紹介しました!
ポイントは以下の7つです!
① Tkinterで画面に入力欄を表示するには「Entry(入力欄)」を使う
② 入力欄に入力された値の取得は「{Entryオブジェクト}.get()」を使う
③ 入力欄の背景色を変えるには「bg」オプションを使う
④ 入力欄のボーダーの太さを変えるには「bd」オプションを使う
⑤ 入力欄の幅には「width」オプションを使う
⑥ 入力される文字のテキストのフォントなどを変えるには「font」オプションを使う
⑦ カーソルのデザインを変えるには「cursor」オプションを使う
⑧ 入力欄の状態を変えるには「state」オプションを使う
⑨ 入力欄の枠線のスタイルを変えるには「relief」オプションを使う
⑩ パスワード入力用に文字を隠すには「show」オプションを使う

まとめの内容を見て、もう頭に浮かべば完璧!
コメント