Tkinterウィジェットの基本操作ガイド

Tkinterとは何か

TkinterはPythonでウィンドウインターフェースを設計するためのモジュールです。Tkinterモジュール("Tkインターフェース")はPythonの標準Tk GUIツールキットのインターフェースです。Python特有のGUIとして、画像ウィンドウを提供し、tkinterはPythonに標準で付属しており、編集可能なGUIインターフェースです。GUIを実装することで、計算機アプリケーションのような直感的な機能を実現できます。単なる入力・出力ウィンドウではユーザーエクスペリエンスがありません。

多少GUIプログラミング経験がある人にとって、PythonのTkinterインターフェースライブラリは非常にシンプルです。PythonのGUIライブラリは多数存在しますが、Tkinterを選ぶ理由は三つあります:最もシンプルであること、標準ライブラリであるためダウンロードインストール不要でいつでも使用可能であること、そして需要に基づくことです。Pythonはスクリプト言語であり、胶水言語として、複雑なデスクトップアプリケーション開発には向いていません。Pythonを柔軟なツールとして活用し、主な開発言語とはしない場合、仕事で小さなツールを作成する必要があるとします。自分だけでなく、他の人にも共有できるインターフェースが必要です。このようなニーズでは、Tkinterは十分に対応できます!

この記事では、簡単な概要と実践的なプログラミングを紹介します。GUIに触れたことのない初心者にとって、基本的なインターフェースプログラミングの概念を頭に刻み込み、簡単なグラフィカルウィンドウ機能を実装する方法を学べます。

Tkinterプログラミングを理解するための二つの比喩:

  • 第一に、絵を描くこと。美術学生がスケッチする情景を想像してください。まず画架を立て、画板を置き、キャンバスを被せ、内容を構想し、鉛筆で下書きをし、構造と比例を組織し、パレットで色を調合し、最後にブラシで描きます。これに対応するTkinterプログラミングでは、私たちのディスプレイが立てられた画架、ルートウィンドウが画板、TkinterではToplevel、キャンバスがTkinterのコンテナ(Frame)、画板には多くのキャンバスを置くことができます(Canvas)、Tkinterのコンテナにも多くのコンテナを置くことができます。絵画の構図レイアウトはTkinterのレイアウトマネージャ(ジオメトリマネージャ)、絵画の内容はTkinterの小さなコンポーネント、一枚の絵は多くの要素から構成されますが、私たちのGUIインターフェースもコンポーネントから組み立てられています。それらはウィジェットです。
  • 第二に、私たちが子供の頃に遊んだブロックを思い出してください。創造力を発揮すれば、同じブロックで様々な形を作ることができます。Tkinterのコンポーネントもブロックのように見なせます。形は異なるかもしれませんが、本質は同じで、一つのブロックです!したがって、これらの小さなコンポーネントには多くの共通点があります。また、インターフェースプログラミングを学ぶ上で最も重要なのは、最初に各ブロックの形を学ぶのではなく、各コンポーネントの使い方ではなく、これらのコンポーネントをどう配置するかです。初期の学習段階では、配置の仕方が使い方よりもはるかに重要です。インターネットには大量の記事資料がありますが、ほとんどすべてがコンポーネントの使い方を紹介しており、Tkinterのレイアウトマネージャ、つまりどう配置するかについては簡単に触れられています。これは初心者にとって本末転倒かもしれません。おそらくほとんどが転載のためで、自分で本当に書いたものはごくわずかでしょう。コンポーネントの使い方が最も緊急ではないので、必要になったときに学べば十分です。边用边学反而更好。したがって、私は専用の章を書き、レイアウトマネージャの使用方法を詳しく説明します。

Tkinterウィジェットの詳細紹介

Tkinterモジュール要素の簡単な説明

  • The Button Widget
  • The Canvas Widget
  • The Checkbutton Widget
  • The Entry Widget
  • The Frame Widget
  • The Label Widget
  • The LabelFrame Widget
  • The Listbox Widget
  • The Menu Widget
  • The Menubutton Widget
  • The Message Widget
  • The OptionMenu Widget
  • The PanedWindow Widget
  • The Radiobutton Widget
  • The Scale Widget
  • The Scrollbar Widget
  • The Spinbox Widget
  • The Text Widget
  • The Toplevel Widget
  • Basic Widget Methods
  • Toplevel Window Methods

一般的なウィンドウ部品と簡単な説明:

Tkinterは16個のコアウィンドウ部品をサポートしています。これら16個のコアウィンドウ部品クラスの簡単な説明は以下の通りです:

  • Button:単純なボタンで、コマンドや他の操作を実行するために使用されます。
  • Canvas:グラフィックを整理します。この部品はチャートや図を描画し、グラフィックエディタを作成し、カスタムウィンドウ部品を実装するために使用できます。
  • Checkbutton:二つの異なる値を表す変数です。このボタンをクリックすると、これら二つの値の間で切り替わります。
  • Entry:テキスト入力フィールド。
  • Frame:コンテナウィンドウ部品。フレームにはボーダーと背景があり、アプリケーションやダイアログレイアウトを作成する際に、他のウィンドウ部品を整理するために使用されます。
  • Label:テキストまたは画像を表示します。
  • Listbox:選択肢のリストを表示します。listboxはradiobuttonまたはchecklistの動作に設定できます。
  • Menu:メニューバー。ドロップダウンメニューとポップアップメニューを実装するために使用されます。
  • Menubutton:メニューボタン。ドロップダウンメニューを実装するために使用されます。
  • Message:テキストを表示します。labelウィンドウ部品に似ていますが、指定された幅または比率に自動的にテキストを調整できます。
  • Radiobutton:複数の値のうちの一つを表す変数です。クリックすると、この変数に値が設定され、同じ変数に関連する他のradiobuttonがクリアされます。
  • Scale:スライダーを使用して数値を設定できます。
  • Scrollbar:canvas、entry、listbox、およびtextウィンドウ部品と併用するための標準スクロールバー。
  • Text:フォーマットされたテキスト表示。異なるスタイルと属性を使用してテキストを表示および編集できます。同時に埋め込み画像とウィンドウをサポートします。
  • Toplevel:単独の、最上位のウィンドウとして表示されるコンテナウィンドウ部品。

messageBox:メッセージボックスは、アプリケーションのメッセージボックスを表示するために使用されます。(Python2ではtkMessagebox)

注:Tkinterではウィンドウ部品クラスに階層はありません。すべてのウィンドウ部品クラスはツリー内で兄弟関係にあります。

これらすべてのウィンドウ部品は、Miscおよびジオメトリマネージャメソッド、構成マネージャメソッド、および部品自体が定義した追加のメソッドを提供します。さらに、Toplevelクラスはウィンドウマネージャインターフェースも提供します。これは、典型的なウィンドウ部品クラスが約150種類のメソッドを提供することを意味します。

手を動かして学ぶ

1. メインウィンドウとLabel部品(ラベル)の作成と使用

上記で説明したこれらのコントロールを使用するには、まずメインウィンドウを作成する必要があります。絵を描くように、まず架と画板を準備し、その上に画紙や絵画要素を置くことができます。メインウィンドウを作成して初めて、様々なコントロール要素を配置できます。作成プロセスは非常に簡単です。

サンプルコード:

import tkinter as tk  # Tkinterを使用する前にインポートが必要

# 第1步:オブジェクトをインスタンス化し、ウィンドウwindowを作成
window = tk.Tk()

# 第2步:ウィンドウの可視化名を設定
window.title('私のウィンドウ')

# 第3步:ウィンドウのサイズを設定(長さ×幅)
window.geometry('500x300')  # ここでの乗算は小文字のx

# 第4步:グラフィカルインターフェースにラベルを設定
label = tk.Label(window, text='こんにちは!これはTkinterです', bg='green', font=('Arial', 12), width=30, height=2)
# 説明:bgは背景色、fontはフォント、widthは長さ、heightは高さ。ここでの長さと高さは文字単位です。例えばheight=2なら、ラベルは2文字分の高さ

# 第5步:ラベルを配置
label.pack()    # Labelのcontent領域の配置位置、自動サイズ調整
# ラベルを配置する方法:1)label.pack(); 2)label.place();

# 第6步:メインウィンドウをループ表示
window.mainloop()
# 注意:loopはループの意味です。window.mainloopはwindowを継続的に更新します。mainloopがないと、静的なwindowになり、渡された値はループしません。mainloopは大きなwhileループに相当します。whileがあると、クリックするたびに更新されます。したがって、ループは必須です。
# すべてのウィンドウファイルには同様のmainloop関数が必要です。mainloopはウィンドウファイルの鍵中の鍵です。

2. Buttonウィンドウ部品

簡単な説明:

Button(ボタン)部品は標準的なTkinterウィンドウ部品で、様々なボタンを実装するために使用されます。ボタンにはテキストまたは画像を含めることができ、ボタンをPython関数またはメソッドに関連付けることができます。このボタンが押されると、Tkinterは自動的に関連付けられた関数またはメソッドを呼び出します。

ボタンは一種類のフォントしか表示できませんが、テキストは複数行にまたがることができます。また、テキストの文字には下線を引くことができます(例えばショートカットキーを示す)。デフォルトでは、Tabキーはボタン部品にフォーカスを移動するために使用されます。

ボタン部品を使用するタイミング

簡単に言えば、ボタン部品はユーザーに「今すぐこのタスクを実行してください」と伝えるために使用されます。通常、ボタンに表示されるテキストまたは画像でヒントを表示します。ボタンはツールバーまたはアプリケーションウィンドウでよく使用され、ダイアログボックスに入力されたデータを受け取ったり無視したりするために使用されます。ボタンと入力データの連携については、CheckbuttonとRadiobutton部品を参照してください。

作成方法:

通常のボタンは簡単に作成できます。ボタンの内容(テキスト、ビットマップ、画像)とボタンが押されたときのコールバック関数を指定するだけです:

b = tk.Button(window, text="私を押してください", command=押してください)

コールバック関数がないボタンは役に立ちません。このボタンを押しても何もしません。ベータ版のテスト者を妨げたくない場合、このようなボタンを実装したいかもしれません:

b = tk.Button(window, text="ヘルプ", command=無効)

サンプルコード:

import tkinter as tk  # Tkinterを使用する前にインポートが必要

# 第1步:オブジェクトをインスタンス化し、ウィンドウwindowを作成
window = tk.Tk()

# 第2步:ウィンドウの可視化名を設定
window.title('私のウィンドウ')

# 第3步:ウィンドウのサイズを設定(長さ×幅)
window.geometry('500x300')  # ここでの乗算は小文字のx

# 第4步:グラフィカルインターフェースにラベルを設定
var = tk.StringVar()    # labelラベルの内容を文字列型に設定し、押してください関数の传出内容をvarで受け取り表示
label = tk.Label(window, textvariable=var, bg='green', fg='white', font=('Arial', 12), width=30, height=2)
# 説明:bgは背景色、fgはフォントカラー、fontはフォント、widthは長さ、heightは高さ。ここでの長さと高さは文字単位です。例えばheight=2なら、ラベルは2文字分の高さ
label.pack()

# 第5步:関数機能を定義(内容は自由に記述可能)、ボタンクリック時に呼び出す
押された = False
def 押してください():
    global 押された
    if 押された == False:
        押された = True
        var.set('あなたが私を押しました')
    else:
        押された = False
        var.set('')

# 第6步:ウィンドウインターフェースにButtonボタンを配置
button = tk.Button(window, text='私を押してください', font=('Arial', 12), width=10, height=1, command=押してください)
button.pack()

# 第7步:メインウィンドウをループ表示
window.mainloop()

3. Entryウィンドウ部品

簡単な説明:

Entryはtkinterクラスで提供される単行テキスト入力フィールドで、一行のテキストを入力表示し、キーボード入力を収集します(HTMLのtextに類似)。

使用タイミング:

ユーザー情報の入力が必要な場合、例えば私たちが通常使用するソフトウェアやログインページで、ユーザーインターフェースがアカウント情報のログインを求める場合などに使用できます。

サンプルコード:

import tkinter as tk  # Tkinterを使用する前にインポートが必要

# 第1步:オブジェクトをインスタンス化し、ウィンドウwindowを作成
window = tk.Tk()

# 第2步:ウィンドウの可視化名を設定
window.title('私のウィンドウ')

# 第3步:ウィンドウのサイズを設定(長さ×幅)
window.geometry('500x300')  # ここでの乗算は小文字のx

# 第4步:グラフィカルインターフェースにEntryコントロールを設定し、配置
entry1 = tk.Entry(window, show='*', font=('Arial', 14))   # 暗号形式で表示
entry2 = tk.Entry(window, show=None, font=('Arial', 14))  # 平文形式で表示
entry1.pack()
entry2.pack()

# 第5步:メインウィンドウをループ表示
window.mainloop()

4. Textウィンドウ部品

簡単な説明:

Textはtkinterクラスで提供される複数行テキスト領域で、複数行のテキストを表示し、ユーザー入力のテキストを収集(または表示)できます(HTMLのtextareaに類似)。フォーマットされたテキスト表示をサポートし、異なるスタイルと属性を使用してテキストを表示および編集できます。同時に埋め込み画像とウィンドウをサポートします。

使用タイミング:

ユーザーや製品の詳細な説明テキストを表示編集する必要がある場合、例えばユーザーの詳細な説明テキスト、製品の紹介など、いつでも編集可能です。

サンプルコード:

import tkinter as tk  # Tkinterを使用する前にインポートが必要

# 第1步:オブジェクトをインスタンス化し、ウィンドウwindowを作成
window = tk.Tk()

# 第2步:ウィンドウの可視化名を設定
window.title('私のウィンドウ')

# 第3步:ウィンドウのサイズを設定(長さ×幅)
window.geometry('500x300')  # ここでの乗算は小文字のx

# 第4步:グラフィカルインターフェースにEntryコントロールを設定し、配置
input_field = tk.Entry(window, show = None)#平文形式で表示
input_field.pack()

# 第5步:二つのトリガーイベント時の関数insert_pointとinsert_endを定義(注意:Pythonの実行順序は上から下のため、関数はボタンの上に配置する必要があります)
def カーソル位置に挿入(): # マウスフォーカス位置に输入内容を挿入
    content = input_field.get()
    text_area.insert('insert', content)
def 終了位置に挿入():   # テキストボックスの内容の最後に続けて入力内容を挿入
    content = input_field.get()
    text_area.insert('end', content)

# 第6步:二つのボタンを作成し、それぞれ二つの状況をトリガー
button1 = tk.Button(window, text='カーソル位置に挿入', width=10,
               height=2, command=カーソル位置に挿入)
button1.pack()
button2 = tk.Button(window, text='終了位置に挿入', width=10,
               height=2, command=終了位置に挿入)
button2.pack()

# 第7步:高さ3文字の複数行テキストボックスtextを作成し、配置
text_area = tk.Text(window, height=3)
text_area.pack()

# 第8步:メインウィンドウをループ表示
window.mainloop()

5. Listboxウィンドウ部品

簡単な説明:

Textはtkinterクラスで提供されるリストボックス部品で、選択肢のリストを表示します。listboxはradiobuttonまたはchecklistの動作に設定できます。

使用タイミング:

ユーザーに選択肢のリストを提供する必要がある場合に使用されます。

サンプルコード:

import tkinter as tk  # Tkinterを使用する前にインポートが必要

# 第1步:オブジェクトをインスタンス化し、ウィンドウwindowを作成
window = tk.Tk()

# 第2步:ウィンドウの可視化名を設定
window.title('私のウィンドウ')

# 第3步:ウィンドウのサイズを設定(長さ×幅)
window.geometry('500x300')  # ここでの乗算は小文字のx

# 第4步:グラフィカルインターフェースにラベルlabelを作成し、配置
var1 = tk.StringVar()  # 変数を作成し、var1でマウスクリックした具体的なオプションの内容を受け取る
label = tk.Label(window, bg='green', fg='yellow',font=('Arial', 12), width=10, textvariable=var1)
label.pack()

# 第6步:ボタンのクリックイベント用のメソッドを作成
def 選択内容を表示():
    value = list_box.get(list_box.curselection())   # 現在選択されているテキストを取得
    var1.set(value)  # labelに値を設定

# 第5步:ボタンを作成し、配置。クリック時にprint_selection関数を呼び出す
button1 = tk.Button(window, text='選択内容を表示', width=15, height=2, command=選択内容を表示)
button1.pack()

# 第7步:Listboxを作成し、内容を追加
var2 = tk.StringVar()
var2.set((1,2,3,4)) # var2に値を設定
# Listboxを作成
list_box = tk.Listbox(window, listvariable=var2)  # var2の値をListboxに割り当て
# リストを作成し、値をListboxコントロールにループで追加
list_items = [11,22,33,44]
for item in list_items:
    list_box.insert('end', item)  # 最後の位置から値を追加
list_box.insert(1, '最初')       # 最初の位置に'first'文字を追加
list_box.insert(2, '第二')      # 二番目の位置に'second'文字を追加
list_box.delete(2)                # 二番目の位置の文字を削除
list_box.pack()

# 第8步:メインウィンドウをループ表示
window.mainloop()

6. Radiobuttonウィンドウ部品

簡単な説明:

Radiobutton:複数の値のうちの一つを表す変数です。クリックすると、この変数に値が設定され、同じ変数に関連する他のradiobuttonがクリアされます。

使用タイミング:

ユーザーに選択肢のリストを提供する必要がある場合に使用されます。ユーザーは一度に一つしか選択できず、複数選択できません。

サンプルコード:

import tkinter as tk  # Tkinterを使用する前にインポートが必要

# 第1步:オブジェクトをインスタンス化し、ウィンドウwindowを作成
window = tk.Tk()

# 第2步:ウィンドウの可視化名を設定
window.title('私のウィンドウ')

# 第3步:ウィンドウのサイズを設定(長さ×幅)
window.geometry('500x300')  # ここでの乗算は小文字のx

# 第4步:グラフィカルインターフェースにラベルlabelを作成し、配置
var = tk.StringVar()    # varを定義し、radiobuttonの値とLabelの値を関連付ける
label = tk.Label(window, bg='yellow', width=20, text='空')
label.pack()

# 第6步:オプショントリガー関数機能を定義
def 選択内容を表示():
    label.config(text='あなたは選択しました ' + var.get())

# 第5步:三つのradiobuttonオプションを作成。variable=var, value='A'の意味は、マウスで一つのオプションを選択した場合、valueの値Aを変数varに設定し、variableに割り当てる
radio1 = tk.Radiobutton(window, text='オプションA', variable=var, value='A', command=選択内容を表示)
radio1.pack()
radio2 = tk.Radiobutton(window, text='オプションB', variable=var, value='B', command=選択内容を表示)
radio2.pack()
radio3 = tk.Radiobutton(window, text='オプションC', variable=var, value='C', command=選択内容を表示)
radio3.pack()

# 第7步:メインウィンドウをループ表示
window.mainloop()

7. Checkbuttonウィンドウ部品

簡単な説明:

Checkbutton:二つの異なる値を表す変数です。このボタンをクリックすると、これら二つの値の間で切り替わります。選択と選択解除。

使用タイミング:

ユーザーに選択肢のリストを提供する必要がある場合に使用されます。ユーザーは一度に複数選択できます。

サンプルコード:

import tkinter as tk  # Tkinterを使用する前にインポートが必要

# 第1步:オブジェクトをインスタンス化し、ウィンドウwindowを作成
window = tk.Tk()

# 第2步:ウィンドウの可視化名を設定
window.title('私のウィンドウ')

# 第3步:ウィンドウのサイズを設定(長さ×幅)
window.geometry('500x300')  # ここでの乗算は小文字のx

# 第4步:グラフィカルインターフェースにラベルlabelを作成し、配置
label = tk.Label(window, bg='yellow', width=20, text='空')
label.pack()

# 第6步:トリガー関数機能を定義
def 選択内容を表示():
    if (var1.get() == 1) & (var2.get() == 0):     # 最初のオプションが選択され、二番目のオプションが選択されていない場合
        label.config(text='私はPythonだけが好き')
    elif (var1.get() == 0) & (var2.get() == 1):   # 二番目のオプションが選択され、最初のオプションが選択されていない場合
        label.config(text='私はC++だけが好き')
    elif (var1.get() == 0) & (var2.get() == 0):   # 両方のオプションが選択されていない場合
        label.config(text='どちらも好きではありません')
    else:
        label.config(text='両方とも好き')             # 両方のオプションが選択されている場合

# 第5步:二つのCheckbuttonオプションを定義し、配置
var1 = tk.IntVar()  # var1とvar2の整数型変数を定義し、選択動作の戻り値を格納
var2 = tk.IntVar()
check1 = tk.Checkbutton(window, text='Python',variable=var1, onvalue=1, offvalue=0, command=選択内容を表示)    # 伝値原理はradiobutton部品に類似
check1.pack()
check2 = tk.Checkbutton(window, text='C++',variable=var2, onvalue=1, offvalue=0, command=選択内容を表示)
check2.pack()

# 第7步:メインウィンドウをループ表示
window.mainloop()

8. Scaleウィンドウ部品

簡単な説明:

Scale:スケール(スライダー)、スライダーを使用して数値を設定できます。

使用タイミング:

ユーザーに評価レベルや評価スコアを求める場合、またはスライダーを動かして具体的な数値を提供する場合などに使用できます。

サンプルコード:

import tkinter as tk  # Tkinterを使用する前にインポートが必要

# 第1步:オブジェクトをインスタンス化し、ウィンドウwindowを作成
window = tk.Tk()

# 第2步:ウィンドウの可視化名を設定
window.title('私のウィンドウ')

# 第3步:ウィンドウのサイズを設定(長さ×幅)
window.geometry('500x300')  # ここでの乗算は小文字のx

# 第4步:グラフィカルインターフェースにラベルlabelを作成し、配置
label = tk.Label(window, bg='green', fg='white', width=20, text='空')
label.pack()

# 第6步:トリガー関数機能を定義
def 選択内容を表示(v):
    label.config(text='あなたは選択しました ' + v)
# 第5步:スケールスライダーを作成。長さ200文字、0から10まで、2刻み、精度0.01、トリガー時にprint_selection関数を呼び出す
scale = tk.Scale(window, label='試してみて', from_=0, to=10, orient=tk.HORIZONTAL, length=200, showvalue=0,tickinterval=2, resolution=0.01, command=選択内容を表示)
scale.pack()

# 第7步:メインウィンドウをループ表示
window.mainloop()

9. Canvasウィンドウ部品

簡単な説明:

Canvas:キャンバス、描画機能(直線、楕円、多角形、矩形)を提供し、グラフィックやビットマップを含めることができ、チャートや図を描画し、グラフィックエディタを作成し、カスタムウィンドウ部品を実装するために使用されます。

使用タイミング:

ユーザーインターフェースなどで、デザインされたアイコン、グラフィック、ロゴ情報を提供する必要がある場合に使用できます。

サンプルコード:

import tkinter as tk  # Tkinterを使用する前にインポートが必要

# 第1步:オブジェクトをインスタンス化し、ウィンドウwindowを作成
window = tk.Tk()

# 第2步:ウィンドウの可視化名を設定
window.title('私のウィンドウ')

# 第3步:ウィンドウのサイズを設定(長さ×幅)
window.geometry('500x300')  # ここでの乗算は小文字のx

# 第4步:グラフィカルインターフェースに500×200サイズのキャンバスを作成し、各要素を配置
canvas = tk.Canvas(window, bg='green', height=200, width=500)
# 画像位置を説明し、画像をキャンバスにインポート
image_file = tk.PhotoImage(file='pic.gif')  # 画像位置(相対パス、.pyファイルと同じフォルダ、または絶対パスを使用、画像の具体的な絶対パスを指定する必要あり)
image = canvas.create_image(250, 0, anchor='n',image=image_file)        # 画像アンカーポイント(nは画像のトップ中央点)をキャンバス(250,0)座標に配置
# 多角形パラメータを定義し、キャンバス上に指定された図形を描画
x0, y0, x1, y1 = 100, 100, 150, 150
line = canvas.create_line(x0-50, y0-50, x1-50, y1-50)                   # 直線を描画
oval = canvas.create_oval(x0+120, y0+50, x1+120, y1+50, fill='yellow')  # 円を描画、黄色で塗りつぶし
arc = canvas.create_arc(x0, y0+50, x1, y1+50, start=0, extent=180)      # 扇形を描画、0度から180度まで
rect = canvas.create_rectangle(330, 30, 330+20, 30+20)                  # 矩形(正方形)を描画
canvas.pack()

# 第6步:指定された図形を移動する関数
def 移動():
    canvas.move(rect, 2, 2) # 正方形rectを移動(他の図形名に変更して一緒に移動可能)、毎回(x=2, y=2)のステップで移動

# 第5步:指定された図形をキャンバス上の位置を移動するボタンを定義
button = tk.Button(window, text='図形を移動',command=移動).pack()

# 第7步:メインウィンドウをループ表示
window.mainloop()

10. Menuウィンドウ部品

簡単な説明:

Menu:メニューバー、ドロップダウンメニューとポップアップメニューを実装し、メニューをクリックするとオプションリストが表示され、ユーザーはその中から選択できます。

使用タイミング:

ソフトウェアやウェブインターフェースなどで、メニュー選択機能をユーザーに提供する必要がある場合に使用されます。

サンプルコード:

import tkinter as tk  # Tkinterを使用する前にインポートが必要

# 第1步:オブジェクトをインスタンス化し、ウィンドウwindowを作成
window = tk.Tk()

# 第2步:ウィンドウの可視化名を設定
window.title('私のウィンドウ')

# 第3步:ウィンドウのサイズを設定(長さ×幅)
window.geometry('500x300')  # ここでの乗算は小文字のx

# 第4步:グラフィカルインターフェースにラベルを作成し、配置
label = tk.Label(window, text='      ', bg='green')
label.pack()

# 第10步:関数機能を定義し、メニュー選択の機能を代表する。ここでは操作を簡単にするため、簡単な機能を定義
counter = 0
def 関数を実行():
    global counter
    label.config(text='実行 ' + str(counter))
    counter += 1

# 第5步:メニューバーを作成。これをコンテナと理解でき、ウィンドウの上部に配置
menubar = tk.Menu(window)

# 第6步:Fileメニュー項目を作成(デフォルトではドロップダウンせず、ドロップダウン内容にはNew、Open、Save、Exit機能項目が含まれる)
filemenu = tk.Menu(menubar, tearoff=0)
# 上で定義した空のメニューをFileと名付け、メニューバーに配置、つまりコンテナに格納
menubar.add_cascade(label='ファイル', menu=filemenu)

# FileにNew、Open、Saveなどの小メニューを追加。通常見るドロップダウンメニューで、各小メニューはコマンド操作に対応。
filemenu.add_command(label='新規', command=関数を実行)
filemenu.add_command(label='開く', command=関数を実行)
filemenu.add_command(label='保存', command=関数を実行)
filemenu.add_separator()    # 分割線を追加
filemenu.add_command(label='終了', command=window.quit) # tkinterに内蔵されたquit()関数を使用

# 第7步:Editメニュー項目を作成(デフォルトではドロップダウンせず、ドロップダウン内容にはCut、Copy、Paste機能項目が含まれる)
editmenu = tk.Menu(menubar, tearoff=0)
# 上で定義した空のメニューをEditと名付け、メニューバーに配置、つまりコンテナに格納
menubar.add_cascade(label='編集', menu=editmenu)

# 同様にEditにCut、Copy、Pasteなどの小コマンド機能単位を追加。これらの単位をクリックすると、do_jobの機能がトリガーされます
editmenu.add_command(label='切り取り', command=関数を実行)
editmenu.add_command(label='コピー', command=関数を実行)
editmenu.add_command(label='貼り付け', command=関数を実行)

# 第8步:第二レベルのメニュー、つまりメニュー項目内のメニューを作成
submenu = tk.Menu(filemenu) # 上で定義したメニューと同じですが、ここではFile上に空のメニューを作成
filemenu.add_cascade(label='インポート', menu=submenu, underline=0) # 挿入するメニューsubmenuをImportと名付ける

# 第9步:第三レベルのメニュー命令、つまりメニュー項目内のメニュー内のメニュー命令
submenu.add_command(label='サブメニュー1', command=関数を実行)   # ここも上と同じ原理で、Importメニュー項目に小メニュー命令Submenu_1を追加

# 第11步:メニューバー作成完了後、メニューバーmenubarを表示させるように設定
window.config(menu=menubar)

# 第12步:メインウィンドウをループ表示
window.mainloop()

11. Frameウィンドウ部品

簡単な説明:

Frame:フレーム、他のGUI要素を配置するためのコンテナです。Windows上で小さな領域を分離する部品で、Windowsを異なる領域に分割し、異なる他の部品を格納します。同時に一つのFrame上にもう二つのFrameを分割できます。Frameはコンテナと見なすことができます。

使用タイミング:

ソフトウェアやウェブインターフェースなどで、異なるインターフェースロジックレベルと機能領域の分割が必要な場合に使用でき、インタラクティブインターフェースのロジックをより明確にします。

サンプルコード:

import tkinter as tk  # Tkinterを使用する前にインポートが必要

# 第1步:オブジェクトをインスタンス化し、ウィンドウwindowを作成
window = tk.Tk()

# 第2步:ウィンドウの可視化名を設定
window.title('私のウィンドウ')

# 第3步:ウィンドウのサイズを設定(長さ×幅)
window.geometry('500x300')  # ここでの乗算は小文字のx

# 第4步:グラフィカルインターフェースにラベルを作成し、配置
tk.Label(window, text='ウィンドウ上', bg='red', font=('Arial', 16)).pack()   # 前の部品と分けて作成配置するのではなく、実際には作成と配置を同時に行うことも可能

# 第5步:メインframeを作成し、メインwindowウィンドウ上に配置
main_frame = tk.Frame(window)
main_frame.pack()

# 第6步:第二レベルのフレームframeを作成し、メインフレームframe上に配置
frame_left = tk.Frame(main_frame)# 第二レベルframe、左frame、メインframe上に配置
frame_right = tk.Frame(main_frame)# 第二レベルframe、右frame、メインframe上に配置
frame_left.pack(side='left')
frame_right.pack(side='right')

# 第7步:三組のラベルを作成し、第二レベルframe上の内容を左領域と右領域に分け、異なる色で識別
tk.Label(frame_left, text='frame_l1上', bg='green').pack()
tk.Label(frame_left, text='frame_l2上', bg='green').pack()
tk.Label(frame_left, text='frame_l3上', bg='green').pack()
tk.Label(frame_right, text='frame_r1上', bg='yellow').pack()
tk.Label(frame_right, text='frame_r2上', bg='yellow').pack()
tk.Label(frame_right, text='frame_r3上', bg='yellow').pack()

# 第8步:メインウィンドウをループ表示
window.mainloop()

12. messageboxウィンドウ部品

簡単な説明:

messageBox:メッセージボックスは、アプリケーションのメッセージボックスを表示するために使用されます。(Python2ではtkMessagebox)。実際、このmessageBoxは私たちが通常見るポップアップウィンドウです。まずトリガー機能を定義し、このポップアップをトリガーする必要があります。ここでは以前学んだbuttonボタンを使用し、トリガー機能を通じてmessageboxを呼び出します。buttonボタンをクリックするとポップアップダイアログが表示されます。以下にmessageboxのヒント情報のいくつかの形式を示します:

tkinter.messagebox.showinfo(title='こんにちは', message='こんにちは!')            # 情報ダイアログ
tkinter.messagebox.showwarning(title='こんにちは', message='警告があります!')       # 警告ダイアログ
tkinter.messagebox.showerror(title='こんにちは', message='エラーが発生しました!')         # エラーダイアログ
print(tkinter.messagebox.askquestion(title='こんにちは', message='こんにちは!'))  # 質問選択ダイアログ、'yes', 'no'を返す
print(tkinter.messagebox.askyesno(title='こんにちは', message='こんにちは!'))     # 'True', 'False'を返す
print(tkinter.messagebox.askokcancel(title='こんにちは', message='こんにちは!'))  # 'True', 'False'を返す

使用タイミング:

ソフトウェアやウェブインターフェースなどで、異なるインターフェースロジックレベルと機能領域の分割が必要な場合に使用でき、インタラクティブインターフェースのロジックをより明確にします。

サンプルコード:

import tkinter as tk  # Tkinterを使用する前にインポートが必要
import tkinter.messagebox  # messageboxを使用するにはモジュールをインポートする必要あり

# 第1步:オブジェクトをインスタンス化し、ウィンドウwindowを作成
window = tk.Tk()

# 第2步:ウィンドウの可視化名を設定
window.title('私のウィンドウ')

# 第3步:ウィンドウのサイズを設定(長さ×幅)
window.geometry('500x300')  # ここでの乗算は小文字のx

# 第5步:トリガー関数機能を定義
def ボタンを押してください():
    tkinter.messagebox.showinfo(title='こんにちは', message='こんにちは!')              # 情報ダイアログ
    # tkinter.messagebox.showwarning(title='こんにちは', message='警告があります!')       # 警告ダイアログ
    # tkinter.messagebox.showerror(title='こんにちは', message='エラーが発生しました!')         # エラーダイアログ
    # print(tkinter.messagebox.askquestion(title='こんにちは', message='こんにちは!'))  # 質問選択ダイアログ、'yes', 'no'を返す
    # print(tkinter.messagebox.askyesno(title='こんにちは', message='こんにちは!'))     # 'True', 'False'を返す
    # print(tkinter.messagebox.askokcancel(title='こんにちは', message='こんにちは!'))  # 'True', 'False'を返す

# 第4步:グラフィカルインターフェースにラベルを作成し、配置
tk.Button(window, text='私を押してください', bg='green', font=('Arial', 14), command=ボタンを押してください).pack()

# 第6步:メインウィンドウをループ表示
window.mainloop()

13. ウィンドウ部品の三つの配置方法:pack/grid/place

1. Grid:The Grid Geometry Manager

gridはグリッドなので、すべての内容がこれらの規則的なグリッドに配置されます。例:

for i in range(3):
    for j in range(3):
        tk.Label(window, text=1).grid(row=i, column=j, padx=10, pady=10, ipadx=10, ipady=10)

上記のコードは3行3列のテーブルを作成します。gridはテーブル形式で位置を指定します。ここでのパラメータrowは行、columは列、padxはセルの左右の間隔、padyはセルの上下の間隔、ipadxはセル内要素とセルの左右の間隔、ipadyはセル内要素とセルの上下の間隔です。

サンプルコード:

import tkinter as tk  # Tkinterを使用する前にインポートが必要

# 第1步:オブジェクトをインスタンス化し、ウィンドウwindowを作成
window = tk.Tk()

# 第2步:ウィンドウの可視化名を設定
window.title('私のウィンドウ')

# 第3步:ウィンドウのサイズを設定(長さ×幅)
window.geometry('500x300')  # ここでの乗算は小文字のx

# 第4步:grid配置方法
for i in range(3):
    for j in range(3):
        tk.Label(window, text=1).grid(row=i, column=j, padx=10, pady=10, ipadx=10, ipady=10)

# 第5步:メインウィンドウをループ表示
window.mainloop()

2. Pack:The Pack Geometry Manager

私たちがよく使うpack()は、上下左右の形式で配置します。例:

tk.Label(window, text='P', fg='red').pack(side='top')    # 上
tk.Label(window, text='P', fg='red').pack(side='bottom') # 下
tk.Label(window, text='P', fg='red').pack(side='left')   # 左
tk.Label(window, text='P', fg='red').pack(side='right')  # 右

サンプルコード:

import tkinter as tk  # Tkinterを使用する前にインポートが必要

# 第1步:オブジェクトをインスタンス化し、ウィンドウwindowを作成
window = tk.Tk()

# 第2步:ウィンドウの可視化名を設定
window.title('私のウィンドウ')

# 第3步:ウィンドウのサイズを設定(長さ×幅)
window.geometry('500x300')  # ここでの乗算は小文字のx

# 第4步:pack配置方法
tk.Label(window, text='P', fg='red').pack(side='top')    # 上
tk.Label(window, text='P', fg='red').pack(side='bottom') # 下
tk.Label(window, text='P', fg='red').pack(side='left')   # 左
tk.Label(window, text='P', fg='red').pack(side='right')  # 右

# 第5步:メインウィンドウをループ表示
window.mainloop()

3. Place:The Place Geometry Manager

次にplace()を見てみましょう。これは理解しやすいです。指定された座標に正確に配置します。例えば(50, 100)は、この部品を(x=50, y=100)の座標に配置することを意味します。後のパラメータanchor='nw'は、前述のアンカーポイントが北西角であることを意味します。例:

tk.Label(window, text='Pl', font=('Arial', 20), ).place(x=50, y=100, anchor='nw')

サンプルコード:

import tkinter as tk  # Tkinterを使用する前にインポートが必要

# 第1步:オブジェクトをインスタンス化し、ウィンドウwindowを作成
window = tk.Tk()

# 第2步:ウィンドウの可視化名を設定
window.title('私のウィンドウ')

# 第3步:ウィンドウのサイズを設定(長さ×幅)
window.geometry('500x300')  # ここでの乗算は小文字のx

# 第4步:place配置方法(指定された座標点に正確に配置)
tk.Label(window, text='Pl', font=('Arial', 20), ).place(x=50, y=100, anchor='nw')

# 第5步:メインウィンドウをループ表示
window.mainloop()

14. 総合演習:ユーザーログインウィンドウの例

ユーザーログインインターフェースを作成し、ユーザーはアカウント情報でログインできます。アカウントが既に存在する場合は、直接ログインできます。ログイン名またはパスワードが間違っていると、エラーが表示されます。アカウントが存在しない場合は、ユーザーに登録を促し、登録をクリックすると登録ページに進み、登録情報を入力し、確定後にログインインターフェースに戻ってログインできます。

サンプルコード:

import tkinter as tk  # Tkinterを使用する前にインポートが必要
import tkinter.messagebox
import pickle

# 第1步:オブジェクトをインスタンス化し、ウィンドウwindowを作成
window = tk.Tk()

# 第2步:ウィンドウの可視化名を設定
window.title('Hongwei Websiteへようこそ')

# 第3步:ウィンドウのサイズを設定(長さ×幅)
window.geometry('400x300')  # ここでの乗算は小文字のx

# 第4步:welcome画像をロード
canvas = tk.Canvas(window, width=400, height=135, bg='green')
image_file = tk.PhotoImage(file='pic.gif')
image = canvas.create_image(200, 0, anchor='n', image=image_file)
canvas.pack(side='top')
tk.Label(window, text='ようこそ',font=('Arial', 16)).pack()

# 第5步:ユーザー情報
tk.Label(window, text='ユーザー名:', font=('Arial', 14)).place(x=10, y=170)
tk.Label(window, text='パスワード:', font=('Arial', 14)).place(x=10, y=210)

# 第6步:ユーザーログイン入力ボックスentry
# ユーザー名
var_usr_name = tk.StringVar()
var_usr_name.set('example@python.com')
entry_usr_name = tk.Entry(window, textvariable=var_usr_name, font=('Arial', 14))
entry_usr_name.place(x=120,y=175)
# ユーザーパスワード
var_usr_pwd = tk.StringVar()
entry_usr_pwd = tk.Entry(window, textvariable=var_usr_pwd, font=('Arial', 14), show='*')
entry_usr_pwd.place(x=120,y=215)

# 第8步:ユーザーログイン機能を定義
def ユーザーログイン():
    # これら二行のコードはユーザーが入力したusr_nameとusr_pwdを取得します
    usr_name = var_usr_name.get()
    usr_pwd = var_usr_pwd.get()

    # ここで例外キャッチを設定します。私たちがユーザー情報ファイルに初めてアクセスする際、存在しない可能性があるためです。
    # 中間の二行がマッチングで、プログラムは入力情報とファイル内の情報をマッチングします。
    try:
        with open('usrs_info.pickle', 'rb') as usr_file:
            usrs_info = pickle.load(usr_file)
    except FileNotFoundError:
        # ここでusr_fileが読み取れない場合、プログラムはusr_fileというファイルを作成し、管理者の
        # ユーザー名とパスワードを書き込みます。つまり、ユーザー名が'admin'、パスワードが'admin'です。
        with open('usrs_info.pickle', 'wb') as usr_file:
            usrs_info = {'admin': 'admin'}
            pickle.dump(usrs_info, usr_file)
            usr_file.close()    # まず閉じないと、pickle.load()でEOFError: Ran out of inputが発生します

    # ユーザー名とパスワードがファイル内の情報とマッチングに成功した場合、ログインに成功し、ポップアップウィンドウhow are you? とユーザー名が表示されます。
    if usr_name in usrs_info:
        if usr_pwd == usrs_info[usr_name]:
            tkinter.messagebox.showinfo(title='ようこそ', message='こんにちは? ' + usr_name)
        # ユーザー名がマッチングに成功し、パスワードが間違っている場合、'Error, your password is wrong, try again.'というポップアップが表示されます
        else:
            tkinter.messagebox.showerror(message='エラー、パスワードが間違っています。もう一度お試しください。')
    else:  # ユーザー名が存在しない場合
        is_sign_up = tkinter.messagebox.askyesno('ようこそ! ', 'まだ登録していません。今すぐ登録しますか?')
        # 登録が必要かどうかを尋ねる
        if is_sign_up:
            ユーザー登録()

# 第9步:ユーザー登録機能を定義
def ユーザー登録():
    def Hongwei_Websiteに登録():
        # 以下三行が登録時に入力した情報を取得します
        np = new_pwd.get()
        npf = new_pwd_confirm.get()
        nn = new_name.get()

        # ここでデータを記録するファイルを開き、登録情報を読み出します
        with open('usrs_info.pickle', 'rb') as usr_file:
            exist_usr_info = pickle.load(usr_file)
        # ここで判断します。二回のパスワード入力が一致しない場合、'Error, Password and confirm password must be the same!'と表示されます
        if np != npf:
            tkinter.messagebox.showerror('エラー', 'パスワードと確認パスワードは同じでなければなりません!')

        # ユーザー名がすでにデータファイルに存在する場合、'Error, The user has already signed up!'と表示されます
        elif nn in exist_usr_info:
            tkinter.messagebox.showerror('エラー', 'ユーザーはすでに登録されています!')

        # 最後に上記のエラーがない場合、登録入力情報をファイルに記録し、'Welcome!,You have successfully signed up!'と表示し、ウィンドウを破棄します。
        else:
            exist_usr_info[nn] = np
            with open('usrs_info.pickle', 'wb') as usr_file:
                pickle.dump(exist_usr_info, usr_file)
            tkinter.messagebox.showinfo('ようこそ', '登録が成功しました!')
            # そしてウィンドウを破棄します。
            window_sign_up.destroy()

    # ウィンドウ上にウィンドウを定義
    window_sign_up = tk.Toplevel(window)
    window_sign_up.geometry('300x200')
    window_sign_up.title('登録ウィンドウ')

    new_name = tk.StringVar()  # 入力された登録名を変数に割り当て
    new_name.set('example@python.com')  # 最初の表示を'example@python.com'に設定
    tk.Label(window_sign_up, text='ユーザー名: ').place(x=10, y=10)  # 'User name:'を座標(10,10)に配置
    entry_new_name = tk.Entry(window_sign_up, textvariable=new_name)  # 登録名の'entry'を作成し、変数を'new_name'とする
    entry_new_name.place(x=130, y=10)  # 'entry'を座標(150,10)に配置

    new_pwd = tk.StringVar()
    tk.Label(window_sign_up, text='パスワード: ').place(x=10, y=50)
    entry_usr_pwd = tk.Entry(window_sign_up, textvariable=new_pwd, show='*')
    entry_usr_pwd.place(x=130, y=50)

    new_pwd_confirm = tk.StringVar()
    tk.Label(window_sign_up, text='確認パスワード: ').place(x=10, y=90)
    entry_usr_pwd_confirm = tk.Entry(window_sign_up, textvariable=new_pwd_confirm, show='*')
    entry_usr_pwd_confirm.place(x=130, y=90)

    # 下のsign_to_Hongwei_Website
    btn_comfirm_sign_up = tk.Button(window_sign_up, text='登録', command=Hongwei_Websiteに登録)
    btn_comfirm_sign_up.place(x=180, y=120)

# 第7步:login and sign up ボタン
btn_login = tk.Button(window, text='ログイン', command=ユーザーログイン)
btn_login.place(x=120, y=240)
btn_sign_up = tk.Button(window, text='登録', command=ユーザー登録)
btn_sign_up.place(x=200, y=240)

# 第10步:メインウィンドウをループ表示
window.mainloop()

タグ: tkinter Python GUI ウィジェット レイアウトマネージャ ユーザーインターフェース

7月20日 02:35 投稿