Construyendo su primera GUI de Python con Tkinter

Introducción Quizás acaba de empezar a aprender Python y ha creado una o dos aplicaciones sencillas. ¡Felicidades! Pero, ¿ahora qué? Bueno, ¿qué tal construir una interfaz gráfica de usuario ("GUI") para interactuar con su nueva y brillante aplicación de Python? Hay varias opciones para crear aplicaciones GUI con Python, incluidas y . Esta guía, sin embargo, le presentará . PyQt wxPython Tkinter , que significa "interfaz Tk", es el estándar de Python para crear GUI y se incluye con la . Es un enlace al kit de , una biblioteca gratuita de código abierto de GUI que se puede usar para construir interfaces gráficas en una variedad de lenguajes de programación. Tkinter biblioteca estándar de Python herramientas Tk GUI widgets Este tutorial recorre el diseño de una aplicación GUI básica que muestra la hora local en una zona horaria seleccionada por el usuario. Los pasos crean la aplicación progresivamente y describen algunos de los conceptos clave cuando se trabaja con , incluido el diseño de los elementos de la GUI, la captura de la entrada del usuario y la vinculación de los elementos de la GUI a los métodos de devolución de llamada. Tkinter requisitos previos Para completar esta guía, necesitará tener: . Pitón instalado instalada. pip Se instaló la biblioteca de zona horaria . La biblioteca se puede instalar usando . pytz pip pip install pytz Esta guía utilizará la terminología indistintamente. ventana raíz y ventana principal Paso 1: cree una nueva aplicación de Python y configure las importaciones requeridas Cree una nueva aplicación de Python llamada y agregue las siguientes declaraciones de para importar los módulos , y . timezone.py import Tkinter datetime pytz import tkinter as tk import datetime import pytz Paso 2: agregar zonas horarias Esta guía incorpora el conjunto de zonas horarias de Estados Unidos que son una pequeña fracción de las zonas horarias admitidas por . La funcionalidad de la aplicación se puede ampliar agregando nombres de zona horaria adicionales. Se puede generar una lista completa de zonas horarias disponibles con ejecutando el siguiente comando: pytz pytz pytz print(pytz.all_timezones) El conjunto de zonas horarias de Estados Unidos disponibles a través se especifica como una lista. pytz import tkinter as tk import datetime import pytz timezones = ["US/Alaska", "US/Aleutian", "US/Arizona", "US/Central", "US/East-Indiana", "US/Eastern", "US/Hawaii", "US/Indiana-Starke", "US/Michigan", "US/Mountain", "US/Pacific", "US/Samoa"] Paso 3: crea una instancia de la clase Tk La instanciación de la clase crea una que servirá como la ventana principal de la GUI de la aplicación de zona horaria. Tk ventana raíz import tkinter as tk import datetime import pytz timezones = ["US/Alaska", "US/Aleutian", "US/Arizona", "US/Central", "US/East-Indiana", "US/Eastern", "US/Hawaii", "US/Indiana-Starke", "US/Michigan", "US/Mountain", "US/Pacific", "US/Samoa"] root = tk.Tk() Paso 4: configure la ventana principal Este paso configura la ventana raíz, particularmente su título, geometría y capacidad de cambio de tamaño. Paso 4a: configuración del título de la ventana principal El título de la ventana se establece mediante el método del . title import tkinter as tk import datetime import pytz timezones = ["US/Alaska", "US/Aleutian", "US/Arizona", "US/Central", "US/East-Indiana", "US/Eastern", "US/Hawaii", "US/Indiana-Starke", "US/Michigan", "US/Mountain", "US/Pacific", "US/Samoa"] root = tk.Tk() root.title("Simple Timezone Application") Paso 4b: configuración del ancho y la altura de la ventana principal Los valores de ancho y alto de la ventana, expresados en píxeles, se pueden asignar a variables para facilitar el seguimiento del código. import tkinter as tk import datetime import pytz timezones = ["US/Alaska", "US/Aleutian", "US/Arizona", "US/Central", "US/East-Indiana", "US/Eastern", "US/Hawaii", "US/Indiana-Starke", "US/Michigan", "US/Mountain", "US/Pacific", "US/Samoa"] root = tk.Tk() root.title("Simple Timezone Application") window_width = 450 window_height = 175 Paso 4c: Cálculo de la posición central de la ventana principal La ventana principal se puede colocar en cualquier parte de la pantalla, por ejemplo, en el centro, en la esquina superior izquierda, etc. Una ventana centrada proporciona un "aspecto" agradable y la posición central de la ventana principal se puede determinar utilizando el ancho de pantalla de la ventana y métodos junto con algunas matemáticas simples. Estos dos métodos devuelven el ancho y la altura de la pantalla que se utilizan para calcular las coordenadas (x,y) apropiadas para centrar la ventana principal. Al igual que con el ancho y el alto de la ventana, los valores de la posición central también se pueden asignar a las variables para que el código sea más legible. winfo_screenwidth() winfo_screenheight() import tkinter as tk import datetime import pytz timezones = ["US/Alaska", "US/Aleutian", "US/Arizona", "US/Central", "US/East-Indiana", "US/Eastern", "US/Hawaii", "US/Indiana-Starke", "US/Michigan", "US/Mountain", "US/Pacific", "US/Samoa"] root = tk.Tk() root.title("Simple Timezone Application") window_width = 450 window_height = 175 screen_width = root.winfo_screenwidth() screen_height = root.winfo_screenheight() center_x = int((screen_width - window_width)/2) center_y = int((screen_height - window_height)/2) Tenga en cuenta que los valores y también se expresan en píxeles y se usa para garantizar que ambos valores calculados sean números enteros. center_x center_y int Paso 4d - Configuración de la geometría de la ventana principal La geometría de la ventana , que especifica el tamaño y la posición de la ventana principal, se establece mediante el método de de la ventana raíz. Para simplificar las cosas, puede usar un literal de cadena con formato, o , que interpolará las expresiones de la variable de geometría en tiempo de ejecución. Según el siguiente bloque de código, el literal se pasa al método de como parámetro. root geometry f-string f-string geometry import tkinter as tk import datetime import pytz timezones = ["US/Alaska", "US/Aleutian", "US/Arizona", "US/Central", "US/East-Indiana", "US/Eastern", "US/Hawaii", "US/Indiana-Starke", "US/Michigan", "US/Mountain", "US/Pacific", "US/Samoa"] root = tk.Tk() root.title("Simple Timezone Application") window_width = 450 window_height = 175 screen_width = root.winfo_screenwidth() screen_height = root.winfo_screenheight() center_x = int((screen_width - window_width)/2) center_y = int((screen_height - window_height)/2) root.geometry(f"{window_width}x{window_height}+{center_x}+{center_y}") Paso 4e: configuración del cambio de tamaño de la ventana principal La capacidad de cambio de tamaño de la ventana raíz a lo largo de sus ejes x e y se puede configurar a través del método de cambio de de la ventana raíz. El método acepta parámetros de y , en ese orden. Un valor o distinto de cero para cualquiera de los parámetros especifica que la ventana principal se puede cambiar de tamaño a lo largo del eje asociado. Un valor o para cualquiera de los parámetros especifica que la ventana principal no se puede cambiar de tamaño a lo largo del eje dado. La aplicación del temporizador utilizará un valor de tanto para el alto como para el ancho para evitar que se cambie el tamaño de la ventana principal. resizable resizable height width True False 0 False import tkinter as tk import datetime import pytz timezones = ["US/Alaska", "US/Aleutian", "US/Arizona", "US/Central", "US/East-Indiana", "US/Eastern", "US/Hawaii", "US/Indiana-Starke", "US/Michigan", "US/Mountain", "US/Pacific", "US/Samoa"] root = tk.Tk() root.title("Simple Timezone Application") window_width = 450 window_height = 175 screen_width = root.winfo_screenwidth() screen_height = root.winfo_screenheight() center_x = int((screen_width - window_width)/2) center_y = int((screen_height - window_height)/2) root.geometry(f"{window_width}x{window_height}+{center_x}+{center_y}") root.resizable(False, False) Paso 5: especifique una cuadrícula para el diseño del widget Los se pueden organizar en la parte superior de la ventana principal de diferentes maneras mediante . En general, los widgets se pueden organizar de 3 maneras: widgets los administradores de geometría usando el método . El administrador de geometría organiza los widgets en bloques antes de agregarlos a una ventana raíz o widget principal. Una forma imperfecta pero quizás útil de pensar en es pensar en agregar artículos comestibles a una bolsa de compras. Los elementos no se agregan necesariamente a ubicaciones predefinidas en la bolsa. Más bien, se uno tras otro, utilizando el espacio disponible hasta que todos los artículos se han colocado en la bolsa. El administrador de geometría funciona de manera similar. Empaquetado pack() pack() empacar empaquetan pack() usando el método . El administrador de geometría los widgets en posiciones específicas predefinidas en la ventana raíz o el widget principal. Este administrador de geometría es obviamente útil cuando se crean diseños de GUI precisos. Colocado place() place() coloca Organizado como una usando el método . Las cuadrículas son tablas bidimensionales de filas y columnas. Los widgets se agregan a una cuadrícula especificando la fila y la columna en particular donde se debe colocar el widget. Las cuadrículas se configuran utilizando los métodos y de la ventana raíz. Cada uno de estos métodos tiene un y un atributo de . El atributo especifica la posición de la columna o fila utilizando una base inicial de . El atributo de especifica el tamaño de una columna o fila en particular en relación con otras columnas. Por ejemplo, si tiene peso y la tiene peso , entonces será 3 veces más grande que la . cuadrícula grid() columnconfigure rowconfigure index weight index 0 weight la columna 0 1 columna 1 3 la columna 1 columna 0 Las cuadrículas son útiles cuando se colocan elementos uno al lado del otro y son relativamente simples de implementar. La aplicación de zona horaria utilizará una cuadrícula de ventana principal dividida en 4 columnas iguales. import tkinter as tk import datetime import pytz timezones = ["US/Alaska", "US/Aleutian", "US/Arizona", "US/Central", "US/East-Indiana", "US/Eastern", "US/Hawaii", "US/Indiana-Starke", "US/Michigan", "US/Mountain", "US/Pacific", "US/Samoa"] root = tk.Tk() root.title("Simple Timezone Application") window_width = 450 window_height = 175 screen_width = root.winfo_screenwidth() screen_height = root.winfo_screenheight() center_x = int((screen_width - window_width)/2) center_y = int((screen_height - window_height)/2) root.geometry(f"{window_width}x{window_height}+{center_x}+{center_y}") root.resizable(False, False) root.columnconfigure(0, weight=1) root.columnconfigure(1, weight=1) root.columnconfigure(2, weight=1) root.columnconfigure(3, weight=1) Paso 6 - Agregar widgets En este paso, los widgets se agregan a la cuadrícula de la ventana principal definida en el Paso 4. La aplicación de zona horaria utilizará 3 widgets de : TKinter Label Listbox Button Los widgets de y de Tkinter son exactamente como se nombran. El widget de permite al programador mostrar texto (es decir, una etiqueta), y el widget de se usa para mostrar botones. El widget se utiliza para seleccionar un valor (o valores) de una lista de opciones. Label Button Label Button Listbox Por supuesto, hay otros widgets además de los 3 que se enumeran arriba, como los , y . La es un recurso útil para obtener más información sobre los widgets disponibles a través del kit de herramientas de Tk. SpinBox Entry Message documentación formal de los comandos de Tk Paso 6a - Crear widgets Se crea una instancia de cada clase de widget para un widget determinado utilizado con el diseño de GUI. La aplicación de zona horaria utiliza 4 instancias de widgets: 2 widgets de , 1 widget de de lista y 1 widget de . Label Listbox Button import tkinter as tk import datetime import pytz timezones = ["US/Alaska", "US/Aleutian", "US/Arizona", "US/Central", "US/East-Indiana", "US/Eastern", "US/Hawaii", "US/Indiana-Starke", "US/Michigan", "US/Mountain", "US/Pacific", "US/Samoa"] root = tk.Tk() root.title("Simple Timezone Application") window_width = 450 window_height = 175 screen_width = root.winfo_screenwidth() screen_height = root.winfo_screenheight() center_x = int((screen_width - window_width)/2) center_y = int((screen_height - window_height)/2) root.geometry(f"{window_width}x{window_height}+{center_x}+{center_y}") root.resizable(False, False) root.columnconfigure(0, weight=1) root.columnconfigure(1, weight=1) root.columnconfigure(2, weight=1) root.columnconfigure(3, weight=1) # Instance of Label widget class for selection prompt. select_timezone_label = tk.Label(root, text="Please select a timezone.") # Instance of Listbox class for selection of timezone from list. list_var = tk.Variable(value=timezones) select_timezone_listbox = tk.Listbox(root, listvariable=list_var, height=1) # Instance of Button class to get the local time in the selected timezone. select_timezone_button = tk.Button(root, text="Get Time") # Second instance of the Label class to display the local time in the selected timezone. time_label = tk.Label(root, text="") Como se ve en el bloque de código anterior, cada instancia de widget está "adjunta" a la ventana . El widget también requiere la instanciación de una clase especial Tkinter que se utiliza para proporcionar al widget la lista de opciones de zona horaria que el usuario puede seleccionar a través del atributo . El texto que muestra cada widget de se puede configurar mediante el atributo de . El valor de texto para se deja en blanco, ya que se establecerá dinámicamente cada vez que el usuario "obtenga" la hora de una zona horaria seleccionada. root Listbox Variable() Listbox listvariable Label text time_label Paso 6b - Coloque los widgets en la cuadrícula Las instancias del widget creadas en el Paso 5a se pueden colocar en la cuadrícula definida en el Paso 4 usando el método . La aplicación de zona horaria utilizará los siguientes atributos del método para definir el diseño: grid() grid() : especifica la columna particular donde se colocará el widget utilizando una base . column 0 : especifica la fila particular donde se colocará el widget utilizando una base . row 0 : especifica que el widget debe abarcar el número especificado de columnas. Por ejemplo, un widget con un valor abarcará 3 columnas incluso si el widget en sí es más pequeño que 3 columnas. columnspan columnspan=3 : el comportamiento predeterminado de Tkinter es colocar un widget en el centro horizontal y vertical de la celda (es decir, en una posición particular de fila/columna) donde se coloca. Este comportamiento predeterminado se puede anular utilizando el atributo que utiliza valores similares a los de una brújula, incluidos , , , , , , y , para alinear el widget en una ubicación particular de la celda del widget. Por ejemplo, especifica que el widget debe alinearse con la esquina oeste de su celda de cuadrícula. De manera análoga, especifica que el widget debe alinearse con la esquina este de su celda de cuadrícula. sticky sticky NW N NE W E SW S SE dentro sticky=tK.W sticky=tK.E , : los atributos y se usan para agregar relleno en el eje x y el eje y respectivamente con valores especificados en píxeles. Naturalmente, el relleno puede proporcionar una GUI de aspecto más profesional, lo que garantiza que los widgets no "golpeen" directamente contra los bordes de la ventana raíz u otros widgets. padx pady padx pady import tkinter as tk import datetime import pytz timezones = ["US/Alaska", "US/Aleutian", "US/Arizona", "US/Central", "US/East-Indiana", "US/Eastern", "US/Hawaii", "US/Indiana-Starke", "US/Michigan", "US/Mountain", "US/Pacific", "US/Samoa"] root = tk.Tk() root.title("Simple Timezone Application") window_width = 450 window_height = 175 screen_width = root.winfo_screenwidth() screen_height = root.winfo_screenheight() center_x = int((screen_width - window_width)/2) center_y = int((screen_height - window_height)/2) root.geometry(f"{window_width}x{window_height}+{center_x}+{center_y}") root.resizable(False, False) root.columnconfigure(0, weight=1) root.columnconfigure(1, weight=1) root.columnconfigure(2, weight=1) root.columnconfigure(3, weight=1) # Instance of Label widget class for selection prompt. select_timezone_label = tk.Label(root, text="Please select a timezone.") # Instance of Listbox class for selection of timezone from list. list_var = tk.Variable(value=timezones) select_timezone_listbox = tk.Listbox(root, listvariable=list_var, height=1) # Instance of Button class to get the local time in the selected timezone. select_timezone_button = tk.Button(root, text="Get Time") # Second instance of the Label class to display the local time in the selected timezone. time_label = tk.Label(root, text="") # Place widgets on grid. select_timezone_label.grid(column=0, row=0, columnspan=4, sticky=tk.W, padx=10, pady=10) select_timezone_listbox.grid(column=0, row=1, columnspan=3, sticky=tk.EW, padx=10, pady=10) select_timezone_button.grid(column=4, row=1, sticky=tk.E, padx=10, pady=10) time_label.grid(column=0, row=4, columnspan=4, sticky=tk.W, padx=10, pady=10) Paso 7: cree el método de devolución de llamada del botón Obtener tiempo Se debe definir un método de devolución de llamada para manejar eventos cuando el usuario hace clic en el botón creado en el Paso 5. select_timezone_button Paso 7a: enlace del botón Obtener tiempo Antes de definir la lógica de devolución de llamada, es útil enlazar primero el botón con el nombre del método que eventualmente abarcará el código de devolución de llamada. El método se puede usar junto con una función para vincular al método de devolución de llamada especificado. Además, tenga en cuenta que la función se usa para pasar referencias a los widgets y como parámetros de devolución de llamada. Estos parámetros de devolución de llamada en realidad son necesarios ya que y están dentro del alcance global. Sin embargo, podría decirse que es útil demostrar cómo se pueden pasar argumentos a la función de devolución de llamada. bind() lambda select_timezone_button lambda select_timezone_listbox time_label no select_timezone_listbox time_label import tkinter as tk import datetime import pytz timezones = ["US/Alaska", "US/Aleutian", "US/Arizona", "US/Central", "US/East-Indiana", "US/Eastern", "US/Hawaii", "US/Indiana-Starke", "US/Michigan", "US/Mountain", "US/Pacific", "US/Samoa"] root = tk.Tk() root.title("Simple Timezone Application") window_width = 450 window_height = 175 screen_width = root.winfo_screenwidth() screen_height = root.winfo_screenheight() center_x = int((screen_width - window_width)/2) center_y = int((screen_height - window_height)/2) root.geometry(f"{window_width}x{window_height}+{center_x}+{center_y}") root.resizable(False, False) root.columnconfigure(0, weight=1) root.columnconfigure(1, weight=1) root.columnconfigure(2, weight=1) root.columnconfigure(3, weight=1) # Instance of Label widget class for selection prompt. select_timezone_label = tk.Label(root, text="Please select a timezone.") # Instance of Listbox class for selection of timezone from list. list_var = tk.Variable(value=timezones) select_timezone_listbox = tk.Listbox(root, listvariable=list_var, height=1) # Instance of Button class to get the local time in the selected timezone. select_timezone_button = tk.Button(root, text="Get Time") # Second instance of the Label class to display the local time in the selected timezone. time_label = tk.Label(root, text="") # Place widgets on grid. select_timezone_label.grid(column=0, row=0, columnspan=4, sticky=tk.W, padx=10, pady=10) select_timezone_listbox.grid(column=0, row=1, columnspan=3, sticky=tk.EW, padx=10, pady=10) select_timezone_button.grid(column=4, row=1, sticky=tk.E, padx=10, pady=10) time_label.grid(column=0, row=4, columnspan=4, sticky=tk.W, padx=10, pady=10) select_timezone_button.bind(" ", lambda e, args=[select_timezone_listbox, time_label]: get_timezone_time(e, args)) Paso 7b: definición de la lógica de devolución de llamada La lógica de devolución de llamada para manejar eventos de clic de botón se define a continuación. def get_timezone_time(e, args): select_timezone_listbox = args[0] time_label = args[1] selection_index = select_timezone_listbox.curselection() selected_timezone = select_timezone_listbox.get(selection_index) now_time = datetime.datetime.now() tz_time = now_time.astimezone(pytz.timezone(selected_timezone)) tz_formatted = tz_time.strftime("%H:%M:%S") time_label.configure({"text": f"The time in {selected_timezone} is {tz_formatted}."}) time_label.update() Los y se utilizan para recuperar la zona horaria seleccionada por el usuario desde la referencia al widget . La hora actual del usuario se convierte luego en la hora de la zona horaria seleccionada. Finalmente, el método se usa para cambiar el atributo de de la referencia a con la hora local en la zona horaria seleccionada. Tenga en cuenta que el método se usa para "forzar" al widget a actualizarse con el nuevo valor de texto. curselection() get() select_timezone_listbox configure text time_label update() time_label Paso 8: complete y ejecute la aplicación El método de la ventana raíz se aplica como la última línea de código. El método ejecutará la GUI en un bucle infinito hasta que el usuario salga. mainloop() mainloop() El código completo es el siguiente: import tkinter as tk import datetime import pytz timezones = ["US/Alaska", "US/Aleutian", "US/Arizona", "US/Central", "US/East-Indiana", "US/Eastern", "US/Hawaii", "US/Indiana-Starke", "US/Michigan", "US/Mountain", "US/Pacific", "US/Samoa"] def get_timezone_time(e, args): select_timezone_listbox = args[0] time_label = args[1] selection_index = select_timezone_listbox.curselection() selected_timezone = select_timezone_listbox.get(selection_index) now_time = datetime.datetime.now() tz_time = now_time.astimezone(pytz.timezone(selected_timezone)) tz_formatted = tz_time.strftime("%H:%M:%S") time_label.configure({"text": f"The time in {selected_timezone} is {tz_formatted}."}) time_label.update() root = tk.Tk() root.title("Simple Timezone Application") window_width = 450 window_height = 175 screen_width = root.winfo_screenwidth() screen_height = root.winfo_screenheight() center_x = int((screen_width - window_width)/2) center_y = int((screen_height - window_height)/2) root.geometry(f"{window_width}x{window_height}+{center_x}+{center_y}") root.resizable(False, False) root.columnconfigure(0, weight=1) root.columnconfigure(1, weight=1) root.columnconfigure(2, weight=1) root.columnconfigure(3, weight=1) # Instance of Label widget class for selection prompt. select_timezone_label = tk.Label(root, text="Please select a timezone.") # Instance of Listbox class for selection of timezone from list. list_var = tk.Variable(value=timezones) select_timezone_listbox = tk.Listbox(root, listvariable=list_var, height=1) # Instance of Button class to get the local time in the selected timezone. select_timezone_button = tk.Button(root, text="Get Time") # Second instance of the Label class to display the local time in the selected timezone. time_label = tk.Label(root, text="") # Place widgets on grid. select_timezone_label.grid(column=0, row=0, columnspan=4, sticky=tk.W, padx=10, pady=10) select_timezone_listbox.grid(column=0, row=1, columnspan=3, sticky=tk.EW, padx=10, pady=10) select_timezone_button.grid(column=4, row=1, sticky=tk.E, padx=10, pady=10) time_label.grid(column=0, row=4, columnspan=4, sticky=tk.W, padx=10, pady=10) # Bind button to callback. select_timezone_button.bind(" ", lambda e, args=[select_timezone_listbox, time_label]: get_timezone_time(e, args)) root.mainloop() Cuando se inicia la aplicación, la GUI debería verse así: Para usar la aplicación, haga clic en el cuadro de lista y use las teclas de cursor arriba/abajo de su teclado para desplazarse por las opciones de zona horaria. Haga clic en el botón para mostrar la hora actual en su zona horaria seleccionada. Obtener hora Próximos pasos ¡Felicitaciones por crear su primera aplicación GUI de Python con ! Como se mencionó en la Introducción, esta guía fue diseñada para presentarle algunos conceptos básicos. La documentación de la y las referencias de la mencionadas anteriormente son dos recursos fantásticos para ayudarlo a conocer las funciones y funciones más avanzadas de Tkinter. Tkinter biblioteca estándar de Python documentación de los comandos Tk Las aplicaciones GUI de Tkinter a veces son criticadas por tener una apariencia no nativa. Eso puede ser cierto. Pero los widgets del kit de herramientas son altamente configurables y las aplicaciones GUI de Tkinter se pueden construir con relativa rapidez sin necesidad de instalar ningún paquete externo de Python. Más allá de la documentación formal, existen innumerables tutoriales disponibles a través de Internet para aprender a crear aplicaciones GUI más sofisticadas con Tkinter.