Basic usage of common components of Python Tkinter Gui

Basic use of common components such as Python Tkinter Gui window icon, label, input, single check, file import, button, log and so on

---

foreword

what is tkinter?

The Python code we write will call the built-in Tkinter, which encapsulates the interface for accessing Tk;
Tk is a graphics library that supports multiple operating systems and is developed in Tcl language;
Tk will call the local GUI interface provided by the operating system to complete the final GUI;

Introduction to the tkinter library

Python's built-in GUI library, as long as the Python environment is installed, the tkinter library can be imported;
based on the Tk toolkit, the toolkit was originally designed for TCL, and was later applied to a variety of scripting languages, so that the scripting language can develop high-quality A better GUI application, tkinter is a calling interface made of python, and the bottom layer is written in C++. The operating efficiency is comparable to the GUI application written in C++, but the development efficiency is much higher than that of C++;

---

本文思路：先介绍窗体以及组件的方法和属性，最后附上示例代码供大家参考

First, the form setting method

1. Methods of tk class objects

Common methods of Tk class	describe
title()	Set the form title
iconbitmap()	Set the form logo, it is recommended to write an absolute path
geometry()	Set the size of the form in pixels
attributes(“-topmost”, 1)	The form is set to the top (displayed as the currently active window)
protocol(‘WM_DELETE_WINDOW’, lambda: clos_window()	Set the upper right corner (X) click event to exit/close the form
destroy()	Exit/close the form directly
winfo_screenwidth()	get screen width
winfo_screenheight()	get screen height
mainloop()	Interface cycle, that is, display window changes

2. Introduction to common components and public properties

1. Common components

component class	name	describe
Button	button	A simple button that performs a command or other action, similar to a label, but provides additional functionality, such as mouse over, press, release, and keyboard actions/events.
Canvas	canvas	Organize graphics, this component can be used to draw charts and diagrams, create graphics editors, implement custom widgets, provide drawing functions (line, ellipse, polygon, rectangle); can contain graphics or bitmaps
Checkbutton	checkbox	Represents a variable that has two distinct values. Clicking this button will toggle between these two values, a set of boxes, any of which can be selected
Radiobutton	Single box	A set of optional boxes, only one of which can be "checked", based on the currently checked value
Entry	text box	text input box, text input field
Frame	frame/container	Inductive component, for module layout, a container widget
Label	Label	Used to display text or pictures
Listbox	list box	A list of options from which the user can choose
Menu	menu	After clicking the menu button, a list of options pops up, from which the user can choose. The menu bar is used to implement drop-down and pop-up menus.
Menu button	menu button	Components used to contain menus (drop-down, cascade, etc.)
Scale	progress bar	Linear "slider" component, which can set start and end values, will display the exact value of the current position
Scrollbar	scroll bar	Provides scrolling for its supported components (textfield, canvas, listbox, textbox)
Text	text field	Multi-line text area, which can be used to collect (or display) text entered by the user (similar to textarea in HTML)
ScrolledText	scrollable text field	Commonly used for log output display
Toplevel	top	Similar to a framework, but provides a separate window container

2. Public properties

properties/parameters	describe
master	Parent window pointer/superior container (eg: TK class object)
text	Component title (some components are: Button, Label...)
bd	The size of the component border, defaults to 2 pixels
image	The image to display on the component
font=('Line Kai', 15, 'bold')	font, size, bold
fg	font color
bg	background color
height	height, unit pixel
width	width
command	(Button) Bind the event processing function, when the button is clicked, execute the function command=function, if you need to pass parameters ( command=lambda: function("parameter"))

3. Common layout placement methods

1.grid()–> Arrange the controls in the form of rows and columns (grid), this method is more flexible to use, this method is recommended

properties/parameters	describe
row	Set the number of lines
rowspan	Set the number of spanning lines, the number of lines spanned by the control instance, the default is 1 line, through this parameter, multiple adjacent cells in a column can be merged
column	Set the number of columns
columnsapn	Set the number of spanned columns, the number of columns spanned by the control instance, the default is 1 column, through this parameter, multiple adjacent cells in a row can be merged
ipadx	Sets the internal "left and right" spacing of the component, in pixels§, or cm©, inches (i)
ipads	Sets the internal "upper and lower" spacing of the component, in pixels§, or cm©, inches (i)
Padx	Sets the outer "left and right" spacing of the component, in pixels§, or cm©, inches (i)
Paddy	Sets the outer "upper and lower" spacing of the component, in pixels§, or cm©, inches (i)
sticky	This property is used to set the position of the control in the cell. The parameter value is the same as the anchor. If this parameter is not set, the control will be centered in the cell.

2.pack() –> Arrange them in the order in which the controls are added, unfortunately this method is less flexible

properties/parameters	describe
side	Set the placement position of the component relative to the parent component, where the component is placed in the window, parameter values ​​'top', 'bottom', 'left', 'right'. Note that you need to use the string format when the word is lowercase, and you don't have to use the string format if it is an uppercase word
ipadx	Sets the internal "left and right" spacing of the component, in pixels§, or cm©, inches (i)
ipads	Sets the internal "upper and lower" spacing of the component, in pixels§, or cm©, inches (i)
Padx	Sets the outer "left and right" spacing of the component, in pixels§, or cm©, inches (i)
Paddy	Sets the outer "upper and lower" spacing of the component, in pixels§, or cm©, inches (i)

3.place()–>(x,y) positioning and placement, you can specify the size and placement of components, the most flexible layout method among the three methods

properties/parameters	describe
anchor	Define the position of the control in the form, the parameter value is N/NE/E/SE/S/SW/W/NW or CENTER, the default value is NW
x、y	定义控件在根窗体中水平和垂直方向上的起始绝对位置，（单位为像素），绝对定位
height、width	控件自身的高度和宽度（单位为像素），绝对定位
relx	设置距离左上角的水平长度百分比（0-1），相对定位
rely	设置距离左上角的垂直高度百分比 ，相对定位
relwidth	设置组件所占据的宽度百分比 ，相对定位
relheight	设置组件所占据的高度百分比 ，相对定位

四、示例代码

1.打包(exe)后的环境资源访问

import os
import sys
""" 判断是否为打包(exe)后的环境 """
if getattr(sys, 'frozen', False):
    base_path = sys._MEIPASS
else:
    base_path = os.path.abspath(".")
file_path = os.path.join(base_path, "xxxxxxx")

2.完整代码

示例说明：引用了线程不卡顿,滚动文本域实时更新日志，建议复制代码运行仔细观察一下有助于理解
该示例使用了grid()网格布局，输入组件，标签组件，文件选择组件，单选框组件，复选框组件，按钮，滚动文本域，大部分都写了注释哈;

import sys
import time
import tkinter as tk
from tkinter import messagebox
from tkinter.messagebox import askyesno
from tkinter.filedialog import askopenfilename  # 文件选择
from tkinter.scrolledtext import ScrolledText
import threading


class TestGui(object):
    def __init__(self, init_window_name):
        self.file_input_dirs = None  # 存放文件地址变量
        self.init_window_name = init_window_name
        self.init_window_name.title("Python Tkinter 常用组件 - 基本使用")  # 设置窗口标题
        self.init_window_name.geometry('700x400')  # 设置窗口大小
        self.init_window_name.iconbitmap('resource/test.ico')  # 设置窗体左上角logo，建议写绝对路径
        self.init_window_name.attributes("-topmost", 1)  # tk界面置顶
        """ 点击右上角关闭窗体弹窗事件 """
        self.init_window_name.protocol('WM_DELETE_WINDOW', self.clos_window)
        """ 组件容器创建 """
        self.input_frame = tk.Frame(master=self.init_window_name)  # 创建存放文本输入,文件选择组件的容器
        self.input_frame.grid(padx=20, pady=5, row=1, column=0, sticky=tk.W)  # 外间距20px,上下间距0，1行，0(从0开始)列
        self.choose_day_frame = tk.Frame(master=self.init_window_name)  # 创建存放单选组件的容器
        self.choose_day_frame.grid(padx=20, pady=0, row=2, column=0, sticky=tk.W)
        self.choose_number_frame = tk.Frame(master=self.init_window_name)  # 创建存放复选组件的容器
        self.choose_number_frame.grid(padx=20, pady=0, row=3, column=0, sticky=tk.W)
        self.log_frame = tk.Frame(master=self.init_window_name)  # 创建存放日志组件的容器
        self.log_frame.grid(padx=20, pady=0, row=4, column=0, sticky=tk.W)
        self.runs_button_frame = tk.Frame(self.init_window_name)  # 创建存放日志组件的容器
        self.runs_button_frame.grid(padx=20, pady=0, row=5, column=0, sticky=tk.W)
        """ 文本输入,文件选择组件 """
        self.file_input_title = tk.Label(self.input_frame, text="输入文件地址", font=('行楷', 15))
        self.file_input_title.grid(padx=20, pady=0, row=0, column=0, sticky=tk.W)
        self.file_input_entry = tk.Entry(self.input_frame, font=('行楷', 20), width=24)
        self.file_input_entry.grid(padx=0, pady=0, row=0, column=1)
        self.file_input_button = tk.Button(self.input_frame, text="选择文件", font=('行楷', 15), width=12, fg="white", bg="#1E90FF", command=self.file_input_path)
        self.file_input_button.grid(padx=10, pady=0, row=0, column=2, sticky=tk.W)
        """ 单选框 - 选择日期 """
        self.radio_label = tk.Label(self.choose_day_frame, text="单选框：", font=('行楷', 15))
        self.radio_label.grid(padx=20, pady=0, row=0, column=1, sticky=tk.W)
        self.choose_day_value = tk.StringVar()
        self.date_list = ['2022-10-16', '2022-10-17', '2022-10-18', '2022-10-19']
        self.choose_day_value.set(0)  # 设置默认值 '0'
        # 单选组件参数介绍 text=勾选框文本, variable=赋值对象, value=勾选后的值
        self.choose_day_one = tk.Radiobutton(self.choose_day_frame, text=self.date_list[0], variable=self.choose_day_value, value=self.date_list[0], font=('行楷', 12))
        self.choose_day_one.grid(padx=12, pady=0, row=0, column=2)
        self.choose_day_two = tk.Radiobutton(self.choose_day_frame, text=self.date_list[1], variable=self.choose_day_value, value=self.date_list[1], font=('行楷', 12))
        self.choose_day_two.grid(padx=12, pady=0, row=0, column=3)
        self.choose_day_three = tk.Radiobutton(self.choose_day_frame, text=self.date_list[2], variable=self.choose_day_value, value=self.date_list[2], font=('行楷', 12))
        self.choose_day_three.grid(padx=12, pady=0, row=0, column=4)
        self.choose_day_four = tk.Radiobutton(self.choose_day_frame, text=self.date_list[3], variable=self.choose_day_value, value=self.date_list[3], font=('行楷', 12))
        self.choose_day_four.grid(padx=12, pady=0, row=0, column=5)
        """ 复选框 - 选择数字 """
        self.check_label = tk.Label(self.choose_number_frame, text="复选框：", font=('行楷', 15))
        self.check_label.grid(padx=20, pady=0, row=0, column=1, sticky=tk.W)
        self.choose_number_value_one = tk.IntVar()
        self.choose_number_value_one.set(0)  # 设置默认值 0
        self.choose_number_value_two = tk.IntVar()
        self.choose_number_value_two.set(0)  # 设置默认值 0
        self.choose_number_value_three = tk.IntVar()
        self.choose_number_value_three.set(0)  # 设置默认值 0
        # 复选组件参数介绍 text=勾选框文本, variable=赋值对象, onvalue=勾选后的值, offvalue未勾选的值
        self.choose_entry_time_one = tk.Checkbutton(self.choose_number_frame, text='1', variable=self.choose_number_value_one, onvalue=1, offvalue=0, font=('行楷', 12))
        self.choose_entry_time_one.grid(padx=12, pady=0, row=0, column=2)
        self.choose_entry_time_two = tk.Checkbutton(self.choose_number_frame, text="2", variable=self.choose_number_value_two, onvalue=2, offvalue=0, font=('行楷', 12))
        self.choose_entry_time_two.grid(padx=12, pady=0, row=0, column=3)
        self.choose_entry_time_three = tk.Checkbutton(self.choose_number_frame, text="3", variable=self.choose_number_value_three, onvalue=3, offvalue=0, font=('行楷', 12))
        self.choose_entry_time_three.grid(padx=12, pady=0, row=0, column=4)
        """ 日志框 """
        self.run_log = ScrolledText(self.log_frame, font=('楷体', 13), width=69, height=14)
        self.run_log.grid(padx=20, pady=5, row=0, column=0)
        """ 操作按钮 """
        self.start_run1 = tk.Button(self.runs_button_frame, text='参数打印', font=('行楷', 15, 'bold'), fg="white", bg="#1E90FF", width=16, command=lambda: self.thread_it(self.param_print))
        self.start_run1.grid(padx=20, pady=0, row=0, column=1)
        self.start_run2 = tk.Button(self.runs_button_frame, text='线程测试打印1', font=('行楷', 15, 'bold'), fg="white", bg="#1E90FF", width=16, command=lambda: self.thread_it(self.print1))
        self.start_run2.grid(padx=15, pady=0, row=0, column=2)
        self.start_run3 = tk.Button(self.runs_button_frame, text='线程测试打印2', font=('行楷', 15, 'bold'), fg="white", bg="#1E90FF", width=16, command=lambda: self.thread_it(self.print2))
        self.start_run3.grid(padx=20, pady=0, row=0, column=3)

    def thread_it(self, func, *args):
        """ 将函数打包进线程 """
        self.myThread = threading.Thread(target=func, args=args)
        self.myThread .setDaemon(True)  # 主线程退出就直接让子线程跟随退出,不论是否运行完成。
        self.myThread .start()

    def file_input_path(self):
        """ 上传文件路径选择 """
        path_ = askopenfilename()  # 文件选择方法，目录选择是 from tkinter.filedialog import askdirectory，用法一致
        self.file_input_dirs = path_  # 将字符串文件地址给变量
        self.file_input_entry.delete(0, tk.END)  # 将文本输入组件的信息删除
        self.file_input_entry.insert(tk.END, path_)  # 在文本输入组件，插入文件导入按钮的字符串地址

    def param_print(self):
        # 如果输入地址和文件选择按钮的值都为None,则提示
        if len(self.file_input_entry.get().strip()) < 1 and self.file_input_dirs is None:
            messagebox.showwarning(title='小洲助手v1.1警告', message='必须输入或选择文件地址!')
            return False
        # 如果输入地址为空则选用文件选择按钮的值
        if len(self.file_input_entry.get().strip()) > 1:
            file_path = self.file_input_entry.get().strip()
        else:
            file_path = self.file_input_dirs
        file_path_content = f"文件地址为：{file_path}"
        # 不勾选单选框则值为初始设置的'0', 赋值None
        radio_value = 'None' if self.choose_day_value.get() == '0' else self.choose_day_value.get()
        radio_value_content = f"单选值为：{radio_value}"
        # 不勾选复选框则值为初始设置的0, 赋值None
        check_value_one = 'None' if self.choose_number_value_one.get() == 0 else self.choose_number_value_one.get()
        check_value_two = 'None' if self.choose_number_value_two.get() == 0 else self.choose_number_value_two.get()
        check_value_three = 'None' if self.choose_number_value_three.get() == 0 else self.choose_number_value_three.get()
        check_value_content = f'复选值依次为：{
    
    check_value_one}, {
    
    check_value_two}, {
    
    check_value_three}'
        self.run_log_print(file_path_content)
        self.run_log_print(radio_value_content)
        self.run_log_print(check_value_content)  # 日志输出

    def print1(self):
        for i in range(100):
            tip_content = f'第{i}次打印 - 我是小洲1'
            self.run_log_print(message=tip_content)
            time.sleep(0.05)  # 睡眠，单位秒
        self.run_log_print(message='我是小洲1 - 打印完成')

    def print2(self):
        for i in range(100, 200):
            tip_content = f'第{i}次打印 - 我是小洲2'
            self.run_log_print(message=tip_content)
            time.sleep(0.05)  # 睡眠
        self.run_log_print(message='我是小洲2 - 打印完成')

    def run_log_print(self, message):
        """ 实时更新日志，固定用法 """
        self.run_log.config(state=tk.NORMAL)
        self.run_log.insert(tk.END, "\n" + message + "\n")
        self.run_log.see(tk.END)
        self.run_log.update()
        self.run_log.config(state=tk.DISABLED)

    def clos_window(self):
        """ 退出/关闭窗体 固定方法 """
        ans = askyesno(title='小洲助手v1.1警告', message='是否确定退出程序？\n是则退出，否则继续！')
        if ans:
            self.init_window_name.destroy()
            sys.exit()
        else:
            return None


if __name__ == '__main__':
    """ 实例化出一个父窗口 """
    init_window = tk.Tk()
    """ 创建Gui类对象 """
    test_gui = TestGui(init_window)
    """ 界面循环，实时显示窗体变化 """
    init_window.mainloop()

3.运行效果

---

总结

C语言中文网Tkinter教程（非常详细）：http://c.biancheng.net/tkinter/
以上就是今天要讲的内容，本文仅仅介绍了Tk制作Gui界面的简单使用，而Tk为我们提供了大量封装程序功能的函数和方法，丰富用户的体验感，后续有关于tk的常用代码会在这篇博客中持续更新。