PythonでのTkinterグラフィカルインターフェイスデザイン（詳細なチュートリアル）

1.グラフィカルインターフェイスデザインの基本的な理解

現在人気のあるコンピューターデスクトップアプリケーションのほとんどは、グラフィックユーザーインターフェイス（GUI）です。つまり、コマンドはメニューやボタンなどのグラフィック要素上でマウスによってトリガーされ、ラベルやダイアログボックスなどのグラフィック表示コンテナーから取得されます。マンマシンダイアログ情報。
Pythonにはtkinterモジュールが付属しています。これは、基本的に、人気のあるオブジェクト指向GUIツールキットTKのPythonプログラミングインターフェイスであり、GUIアプリケーションを作成するための迅速で便利な方法を提供します。グラフィカルプログラミングの基本的な手順は通常次のとおりです。

• tkinterモジュールをインポートする
• GUIルートフォームを作成する
• 人間とコンピューターの相互作用制御を追加し、対応する関数を記述します。
• ユーザーがメインイベントループでイベント応答をトリガーするのを待ちます。

次に、フォームコントロールのレイアウト

2.1ルートフォームのレンダリング例

ルートフォームは、グラフィカルアプリケーションのルートコントローラーであり、tkinterの基盤となるコントロールのインスタンスです。tkinterモジュールをインポートした後、Tk（）メソッドを呼び出してルートウィンドウインスタンスのルートを初期化し、title（）メソッドを使用してタイトルテキストを設定し、geometry（）メソッドを使用してウィンドウのサイズ（ピクセル単位）を設定します。 。それをメインループに入れます。ユーザーが閉じない限り、プログラムは常に実行されています。プログラム実行後、フォームが表示されます。このメインループのルート形式では、他のビジュアルコントロールインスタンスを継続的に提示して、イベントの発生を監視し、対応する処理手順を実行できます。以下は、ルートフォームのレンダリングの例です。

#coding=utf-8
import tkinter

Win = tkinter.Tk()
Win.title("点击按钮打印输入框的内容")
Win.geometry("400x400+20+20") # 这里的400x400是指窗口大小，+20+20是指窗口运行后距离屏幕左上角的位置
Win.mainloop()

2.2Tkinterの共通コントロール

2.2.1共通のコントロール

コントロール	名前	効果
ボタン	ボタン	クリックしてイベントをトリガーします
キャンバス	キャンバス	グラフィックを描画するか、特別なコントロールを描画します
チェックボタン	チェックボックス	複数の選択肢
エントリ	入力ボックス	1行のテキスト入力を受け取る
フレーム	フレーム	コントロールをグループ化するために使用されます
ラベル	ラベル	1行のテキスト表示
リストボックス	リストボックス	テキストリストを表示
メニュー	メニュー	メニューコマンドの作成
メッセージ	ニュース	ラベルの使用法と同様の複数行のテキストラベル
ラジオボタン	シングルボタン	相互に排他的なオプションから単一の選択を行う
規模	スライダー	デフォルトの垂直方向、マウスをドラッグして値を変更し、視覚的な相互作用を形成します
スクロール・バー	スライダー	デフォルトの垂直方向であるマウスドラッグで値を変更し、テキスト、リストボックス、キャンバス、およびその他のコントロールと組み合わせて、視覚化スペースを移動できます。
テキスト	テキストボックス	複数行のテキストを受信または出力する
トップレベル	新しいフォームコンテナ	トップレベルで新しいフォームを作成する

2.2.2コントロールの一般的な属性

フォームに表示されるビジュアルコントロールには、通常、サイズ、色、フォント、相対位置、レリーフスタイル、アイコンスタイル、ホバーカーソルの形状などの一般的な属性が含まれています。さまざまなコントロールには、さまざまな形状と機能のために独自の特性属性があります。ルートフォームの初期化とルートフォームのメインループの間に、フォームコントロールをインスタンス化し、それらのプロパティを設定できます。親コンテナは、ルートフォームまたは他のコンテナコントロールインスタンスにすることができます。共通コントロールの共通属性は次のとおりです。

属性	説明	値
アンカー	テキストの開始位置	センター（デフォルト）、E、S、W、N、NE、SE、SW、NW
bg	背景色	番号
bd	太字（デフォルトは2ピクセル）	番号
ビットマップ	黒と白のバイナリアイコン	オンラインで探す
カーソル	カーソルの上にマウスを置く	オンラインで探す
フォント	フォント	番号
fg	フォントの色	番号
高さ	高（テキストコントロールの単位は行です）	番号
画像	画像を表示する	番号
正当化する	複数行のテキストの配置	CENTER（デフォルト）、LEFT、RIGHT、TOP、BOTTOM
padx	ピクセルを水平方向にスケーリング	番号
パッド	ピクセルを垂直方向に拡大	番号
浮き彫り	3Dレリーフスタイル	フラット、レイズド、サンケン、グローブ、リッジ
状態	コントロールインスタンスのステータスが利用可能かどうか	NORMAL（デフォルト）、DISABLED
幅	幅（テキストコントロールの単位は行です）	番号

#coding=utf-8
import tkinter
Win = tkinter.Tk()
Win.title("这是标题")
Win.geometry("400x400+200+200")
label = tkinter.Label(Win,text='这是文本标签',
        bg='#d3fbfb',
        fg='red',
        font=('宋体',32),
        width=20,
        height=2,
        relief="sunken")
label.pack()
Win.mainloop()

其中，标签实例label 在父容器Win中实例化，具有代码中所示的text（文本）、bg（背景色）、fg(前景色)、font（字体）、width（宽，默认以字符为单位）、height（高，默认以字符为单位）和 relief（浮雕样式）等一系列属性。
在实例化控件时，实例的属性可以“属性=属性值”的形式枚举列出，不区分先后次序。例如：“ text=‘这是文本标签’ ”显示标签的文本内容，“bg=’#d3fbfb’”设置背景色为十六进制数RGB色 #d3fbfb等等。属性值通常用文本形式表示。
当然如果这个控件实例只需要一次性呈现，也可以不必命名，直接实例化并布局呈现出来，例如：

tkinter.Label(Win,text='这是文本标签',bg='#d3fbfb',fg='red',font=('宋体',32),width=20,height=2,relief="sunken").pack()

属性 relief 为控件呈现出来的3D浮雕样式，有 FLAT(平的)、RAISED(凸起的)、SUNKEN(凹陷的)、GROOVE(沟槽状边缘)和 RIDGE(脊状边缘) 5种。

2.3 控件布局

2.3.1 place() 使用方法

• place()方法：根据控件实例在父容器中的绝对或相对位置参数进行布局。其常用布局参数如下：

1. x,y：控件实例在根窗体中水平和垂直方向上的其实位置（单位为像素）。注意，根窗体左上角为0,0,水平向右，垂直向下为正方向。
2. relx,rely：控件实例在根窗体中水平和垂直方向上起始布局的相对位置。即相对于根窗体宽和高的比例位置，取值在0.0~1.0之间。
3. height,width：控件实例本身的高度和宽度（单位为像素）。
4. relheight,relwidth：控件实例相对于根窗体的高度和宽度比例，取值在0.0~1.0之间。

利用place()方法配合relx,rely和relheight,relwidth参数所得的到的界面可自适应根窗体尺寸的大小。place()方法与grid()方法可以混合使用。如下例子：利用place()方法排列消息（多行标签）。

#coding=utf-8
import tkinter
Win = tkinter.Tk()
Win.title("这是标题")
Win.geometry('400x400+200+200')

Str = '''我的水平起始位置相对窗体 0.2，垂直起始位置为绝对位置 80 像素，我的高度是窗体高度的0.4，宽度是200像素'''
Msg = tkinter.Message(Win,text = Str,relief = 'groove')
Msg.place(relx = 0.2,y = 80,relheight = 0.4,width = 200)
Win.mainloop()

2.3.2 pack() 使用方法

• pack()方法：是一种简单的布局方法，如果不加-
  参数的默认方式，将按布局语句的先后，以最小占用空间的方式自上而下地排列控件实例，并且保持控件本身的最小尺寸。
• 用pack() 方法不加参数排列标签。为看清楚各控件所占用的空间大小，文本用了不同长度的中英文，并设置relief="groove"的凹陷边缘属性。如下所示：

#coding=utf-8
import tkinter
Win = tkinter.Tk()
Win.title("这是标题")
Win.geometry("400x400+200+200")
LabelRed = tkinter.Label(Win,text="abcdefghijklmnopqrstuvwxyz",fg="Red",relief = "groove")
LabelRed.pack()
LabelGreen = tkinter.Label(Win,text="一二三四五六七八九十",fg="green",relief = "groove")
LabelGreen.pack()
LabelBlue = tkinter.Label(Win,text="1234567890",fg="blue",relief = "groove")
LabelBlue.pack()
Win.mainloop()

• 使用pack()方法可设置 fill、side 等属性参数。其中，参数fill 可取值：fill=X,fill=Y或fill=BOTH，分别表示允许控件向水平方向、垂直方向或二维伸展填充未被占用控件。参数 side 可取值：side=TOP(默认)，side=LEFT,side=RIGHT,side=BOTTOM,分别表示本控件实例的布局相对于下一个控件实例的方位。如下例子：

#coding=utf-8
import tkinter
Win = tkinter.Tk()
Win.title("这是标题")
Win.geometry("400x400+200+200")
LabelRed = tkinter.Label(Win,text="abcdefghijklmnopqrstuvwxyz",fg="Red",relief = "groove")
LabelRed.pack()
LabelGreen = tkinter.Label(Win,text="一二三四五六七八九十",fg="green",relief = "groove")
LabelGreen.pack(fill = "y",side = "right")
LabelBlue = tkinter.Label(Win,text="1234567890",fg="blue",relief = "groove")
LabelBlue.pack(fill = "x",side = "bottom")
LabelBlack = tkinter.Label(Win,text = "This is BlackLabel",fg = "black",relief = "groove")
LabelBlack.pack(fill = "both",side = "left")
Win.mainloop()

2.3.3 grid() 使用方法

• grid()方法：是基于网格的布局。先虚拟一个二维表格，再在该表格中布局控件实例。由于在虚拟表格的单元中所布局的控件实例大小不一，单元格也没有固定或均一的大小，因此其仅用于布局的定位。pack()方法与grid()方法不能混合使用。
  grid()方法常用布局参数如下：

1. column: 控件实例的起始列，最左边为第0列。
2. columnspan: 控件实例所跨越的列数，默认为1列。
3. ipadx,ipady: 控件实例所呈现区域内部的像素数，用来设置控件实例的大小。
4. padx,pady: 控件实例所占据空间像素数，用来设置实例所在单元格的大小。
5. row: 控件实例的起始行，最上面为第0行。
6. rowspan: 控件实例的起始行数，默认为1行。

看下面的例子：用grid()方法排列标签，设想有一个3x4的表格，起始行、列序号均为0.将标签lbred 至于第2列第0行；将标签lbgreen置于第0列第1行；将标签lbblue置于第1列起跨2列第2行，占20像素宽。

#coding=utf-8
import tkinter
Win = tkinter.Tk()
Win.title("这是标题")
Win.geometry("400x400+200+200")
LabelRed = tkinter.Label(Win,text="Red",fg="Red",relief='groove')
LabelRed.grid(column=2,row=0)
LabelGreen = tkinter.Label(Win,text="绿色",fg="green",relief='groove')
LabelGreen.grid(column=0,row=1)
LabelBlue = tkinter.Label(Win,text="蓝",fg="blue",relief="groove")
LabelBlue.grid(column=1,columnspan=2,ipadx=20,row=2)
Win.mainloop()

3つ目は、tkinter共通コントロールの特徴的な属性です。

コンテンツの3番目の部分は、この投稿のtkinter共通コントロールの機能属性を参照してください

第四に、インシデント対応

5、背景画像

6.カメラとディスプレイの電源を入れます

1.グラフィカルインターフェイスデザインの基本的な理解