Ejemplos de la GUI de Python (Tutorial
de Tkinter)
Mokhtar EbrahimPublicada: enero 22, 2018Última actualización: enero 10, 2019
En este tutorial, aprenderemos a desarrollar interfaces gráficas de
usuario (GUI del inglés Graphics User Interfaces) escribiendo
algunos ejemplos de la GUI de Python usando el paquete Tkinter.
El paquete Tkinter está incluido en Python como un paquete
estándar, por lo que no es necesario instalar nada para usarlo.
Ad by Valueimpression
El paquete Tkinter es un paquete muy poderoso. Si ya ha
instalado Python, puede usar IDLE, que es el IDE integrado que
se envía con Python. Este IDE se ha escrito utilizando Tkinter.
¡Suena grandioso!
Usaremos Python 3.6, por lo que si está utilizando Python 2.x, se
recomienda encarecidamente que cambie a Python 3.x a menos
que sepa los cambios en el lenguaje para que pueda ajustar el
código y se ejecute sin errores.Aprende a desarrollar aplicaciones
de GUI utilizando el paquete Python Tkinter. En este tutorial,
aprenderás cómo crear interfaces gráficas escribiendo ejemplos
de GUI de Python
Asumo que tienes conocimientos de Python básico que te
ayudará a entender lo que estamos haciendo.
Comenzaremos por crear una ventana, luego aprenderemos
cómo agregar widgets como botones, cuadros combinados, etc.,
luego jugaremos con sus propiedades. Así que comencemos.
Tabla de contenidos
Crear tu primera aplicación GUI
Crear un widget label (etiqueta)
o Establecer tamaño de fuente de etiqueta
o Establecer el tamaño de una ventana
Agregar un widget button
o Cambiar los colores de fondo y primer plano de un botón
o Manejar el evento click de un botón
Entrada de datos usando la clase Entry (Tkinter textbox)
o Establecer el foco en el widget de entrada
o Deshabilitar el widget de entrada
Agregar un widget combobox
Agregar un widget Checkbutton (Tkinter checkbox)
o Establecer el estado de un Checkbutton
Agregar widgets radio button
o Obtener el valor del radio button (opción seleccionada)
Adicionar un widget ScrolledText (Tkinter textarea)
o Establecer el contenido del scrolledtext
o Borrar/limpiar el contenido de un scrolledtext
Crear un MessageBox
o Mostrar mensajes de error y de advertencia
o Mostrar diálogos de pregunta-respuesta
Agregar un SpinBox (widget de números)
o Establecer el valor por defecto del Spinbox
Adicionar el widget Progressbar
o Cambiar el color de un Progressbar
Adicionar un diálogo para archivos (elegir archivo y directorio)
o Especificar los tipos de archivo (filtro por la extensión del
archivo)
Adicionar una barra de menú
Adicionar un widget Notebook (control de pestañas)
o Agregar widgets a las pestañas
Adicionar espacio para los widgets (separación o padding)
Ad by Valueimpression
Crear tu primera aplicación GUI
Primero, importaremos el paquete Tkinter y crearemos una
ventana y estableceremos su título:
from tkinter import * window = Tk() window.title("Welcome to LikeGeeks app") window.mainloop()
El resultado debe verse como esto:
¡Increíble! Nuestra aplicación funciona.
La última línea llama a la función mainloop . Esta función llama al
ciclo sin fin de la ventana, por lo que la ventana esperará
cualquier interacción del usuario hasta que la cerremos.
Si olvidas llamar a la función mainloop , no aparecerá nada al
usuario.
Crear un widget label (etiqueta)
Para agregar una etiqueta a nuestro ejemplo anterior, crearemos
una etiqueta usando la clase label de la siguiente manera:
lbl = Label(window, text="Hello")
Luego estableceremos su posición en el formulario utilizando la
función grid con su ubicación, de esta manera:
lbl.grid(column=0, row=0)
Entonces el código completo se verá de esta manera:
Ad by Valueimpression
from tkinter import *
window = Tk()
window.title("Welcome to LikeGeeks app")
lbl = Label(window, text="Hello")
lbl.grid(column=0, row=0)
window.mainloop()
Y este es el resultado:
Sin llamar a la función grid para label, la etiqueta no aparecerá.
Establecer tamaño de fuente de etiqueta
Puedes establecer la fuente de la etiqueta para agrandarla o
quizá, colocarla en negrita. También puedes cambiar el estilo de
fuente.
Para hacerlo, puedes pasar el parámetro font de esta manera:
lbl = Label(window, text="Hello", font=("Arial Bold", 50))
Debes tener en cuenta que el parámetro font se puede pasar a
cualquier widget para cambiar su fuente, no solo a etiquetas.
Genial. Pero, la ventana es tan pequeña que incluso no podemos
ver el título. ¿Cómo se establece el tamaño de la ventana?
Establecer el tamaño de una ventana
Podemos establecer el tamaño predeterminado de ventana,
usando la función geometry , de esta manera:
window.geometry('350x200')
La línea anterior establece el ancho de la ventana en 350 píxeles
y la altura en 200 píxeles.
Intentemos agregar más widgets como botones y ver cómo
manejar el evento de click de un botón.
Agregar un widget button
Comencemos agregando un botón a la ventana. El botón se crea
y se agrega a la ventana de la misma manera que la etiqueta:
btn = Button(window, text="Click Me")
btn.grid(column=1, row=0)
Entonces, el código de la ventana se verá así:
from tkinter import *
window = Tk()
window.title("Welcome to LikeGeeks app")
window.geometry('350x200')
lbl = Label(window, text="Hello")
lbl.grid(column=0, row=0)
btn = Button(window, text="Click Me")
btn.grid(column=1, row=0)
window.mainloop()
Y el resultado se verá así:
Hay que tener en cuenta que colocamos el botón en la segunda
columna de la ventana, que es la 1. Si olvidas eso y colocas el
botón en la misma columna (en este caso la 0), se mostrará el
botón solamente, ya que el botón estará por encima de la
etiqueta.
Ad by Valueimpression
Cambiar los colores de fondo y primer plano de un botón
Puedes cambiar el color de frente del botón o de cualquier otro
widget usando la propiedad fg .
También, puedes cambiar el color de fondo de cualquier widget
usando la propiedad bg .
btn = Button(window, text="Click Me", bg="orange", fg="red")
Ahora, si trataste de hacer click en el botón, no pasó nada,
porque el evento click del botón aún no está programado.
Manejar el evento click de un botón
Primero, escribiremos la función que necesitamos ejecutar
cuando se haga click en el botón:
def clicked():
lbl.configure(text="Button was clicked !!")
Luego la cablearemos con el botón especificando la función de
esta manera:
btn = Button(window, text="Click Me", command=clicked)
Fíjate que, escribimos clicked simplement y no clicked() con
paréntesis.
Ahora el código completo se verá de esta manera:
from tkinter import *
window = Tk()
window.title("Welcome to LikeGeeks app")
window.geometry('350x200')
lbl = Label(window, text="Hello")
lbl.grid(column=0, row=0)
def clicked():
lbl.configure(text="Button was clicked !!")
btn = Button(window, text="Click Me", command=clicked)
btn.grid(column=1, row=0)
window.mainloop()
Y cuando hacemos click en el botón, el resultado es el esperado:
¡Buenísimo!
Entrada de datos usando la clase Entry (Tkinter
textbox)
En los ejemplos anteriores de Python GUI, vimos cómo agregar
widgets simples, ahora intentemos obtener una entrada del
usuario utilizando la clase Tkinter Entry (cuadro de texto de
Tkinter).
Puedes crear un cuadro de texto usando la clase Tkinter Entry de
esta manera:
txt = Entry(window,width=10)
Luego, puedes agregar el widget a la ventana usando la
función grid , como siempre.
Entonces nuestra ventana será así:
from tkinter import *
window = Tk()
window.title("Welcome to LikeGeeks app")
window.geometry('350x200')
lbl = Label(window, text="Hello")
lbl.grid(column=0, row=0)
txt = Entry(window,width=10)
txt.grid(column=1, row=0)
def clicked():
lbl.configure(text="Button was clicked !!")
btn = Button(window, text="Click Me", command=clicked)
btn.grid(column=2, row=0)
window.mainloop()
Y el resultado será el siguiente:
Ahora, si haces click en el botón, se mostrará el mismo mensaje
anterior. ¿Qué tal si se muestra el texto ingresado en el widget de
entrada?
Primero, podemos obtener texto de entrada usando la
función get . Entonces podemos escribir este código en nuestra
función clicked , de esta manera:
def clicked():
res = "Welcome to " + txt.get()
lbl.configure(text= res)
Si haces click en el botón y hay un texto en el widget de entrada,
se mostrará “Welcome to ” concatenado con el texto ingresado.
Y este es el código completo:
from tkinter import *
window = Tk()
window.title("Welcome to LikeGeeks app")
window.geometry('350x200')
lbl = Label(window, text="Hello")
lbl.grid(column=0, row=0)
txt = Entry(window,width=10)
txt.grid(column=1, row=0)
def clicked():
res = "Welcome to " + txt.get()
lbl.configure(text= res)
btn = Button(window, text="Click Me", command=clicked)
btn.grid(column=2, row=0)
window.mainloop()
Ejecuta el código anterior y verifica el resultado:
¡Increíble!
Cada vez que ejecutamos el código, tenemos que hacer click en
el widget de entrada para establecer el foco para escribir el texto,
¿qué pasa si configuramos el foco automáticamente?
Establecer el foco en el widget de entrada
Eso es súper fácil, todo lo que tenemos que hacer es llamar a la
función focus de esta manera:
txt.focus()
Y cuando ejecutes el código, notarás que el widget de entrada
tiene el foco para que puedas escribir el texto de inmediato.
Deshabilitar el widget de entrada
Para deshabilitar el widget de entrada, puedes configurar la
propiedad state como deshabilitada (disabled):
txt = Entry(window,width=10, state='disabled')
Ahora, ya no podrás ingresar ningún texto.
Agregar un widget combobox
Para agregar un widget combobox, puedes usar la
clase Combobox de la librería ttk , de esta manera:
from tkinter.ttk import *
combo = Combobox(window)
Luego puedes agregar los valores al combo.
Ad by Valueimpression
from tkinter import *
from tkinter.ttk import *
window = Tk()
window.title("Welcome to LikeGeeks app")
window.geometry('350x200')
combo = Combobox(window)
combo['values']= (1, 2, 3, 4, 5, "Text")
combo.current(1) #set the selected item
combo.grid(column=0, row=0)
window.mainloop()
Como puedes ver, agregamos los elementos del combobox
usando una tupla de valores.
Para configurar el elemento seleccionado, puedes pasar el índice
del elemento deseado a la función actual.
Para obtener el elemento seleccionado, puedes usar la
función get , como se muestra a continuación:
combo.get()
Agregar un widget Checkbutton (Tkinter
checkbox)
Para crear un widget Checkbutton, puedes usar la
clase Checkbutton de esta manera:
chk = Checkbutton(window, text='Choose')
Además, puedes configurar el estado checked pasando el valor de
activación al Checkbutton , de esta manera:
from tkinter import *
from tkinter.ttk import *
window = Tk()
window.title("Welcome to LikeGeeks app")
window.geometry('350x200')
chk_state = BooleanVar()
chk_state.set(True) #set check state
chk = Checkbutton(window, text='Choose', var=chk_state)
chk.grid(column=0, row=0)
window.mainloop()
Verifica el resultado:
Establecer el estado de un Checkbutton
Aquí creamos una variable de tipo BooleanVar que no es una
variable Python estándar, es una variable Tkinter. Luego la
pasamos a la clase Checkbutton para establecer el estado de
verificación como la línea resaltada en el ejemplo anterior.
Puedes establecer el valor booleano en falso para desactivarlo.
Además, puedes usar IntVar en lugar de BooleanVar y establecer el
valor en 0 o 1.
chk_state = IntVar()
chk_state.set(0) #uncheck
chk_state.set(1) #check
Estos ejemplos dan el mismo resultado que con BooleanVar .
Agregar widgets radio button
Para agregar radio buttons, simplemente puedes usar la
clase RadioButton , de esta manera:
rad1 = Radiobutton(window,text='First', value=1)
Ten en cuenta que, debes establecer el valor para cada botón de
opción con un valor diferente; de lo contrario, no funcionarán.
Ad by Valueimpression
from tkinter import *
from tkinter.ttk import *
window = Tk()
window.title("Welcome to LikeGeeks app")
window.geometry('350x200')
rad1 = Radiobutton(window,text='First', value=1)
rad2 = Radiobutton(window,text='Second', value=2)
rad3 = Radiobutton(window,text='Third', value=3)
rad1.grid(column=0, row=0)
rad2.grid(column=1, row=0)
rad3.grid(column=2, row=0)
window.mainloop()
El resultado del código anterior se ve así:
Además, puedes configurar el command de cualquiera de estos
botones de opción para una función específica, de modo que si el
usuario hace click en alguno de ellos, ejecuta el código de la
función asignada.
Aquí un ejemplo:
rad1 = Radiobutton(window,text='First', value=1, command=clicked)
def clicked():
# Do what you need
¡Bastante simple!
Obtener el valor del radio button (opción seleccionada)
Para obtener el botón de opción actualmente seleccionado o el
valor del botón de opción, puedes pasar un parámetro variable a
los botones de opción y más adelante puede obtener su valor.
from tkinter import *
from tkinter.ttk import *
window = Tk()
window.title("Welcome to LikeGeeks app")
selected = IntVar()
rad1 = Radiobutton(window,text='First', value=1, variable=selected)
rad2 = Radiobutton(window,text='Second', value=2, variable=selected)
rad3 = Radiobutton(window,text='Third', value=3, variable=selected)
def clicked():
print(selected.get())
btn = Button(window, text="Click Me", command=clicked)
rad1.grid(column=0, row=0)
rad2.grid(column=1, row=0)
rad3.grid(column=2, row=0)
btn.grid(column=3, row=0)
window.mainloop()
Cada vez que seleccione un botón de opción, el valor de la
variable cambiará al valor de la opción seleccionada.
Adicionar un widget ScrolledText (Tkinter
textarea)
Para adicionar un widget ScrolledText, puedes usar la
clase ScrolledText , de esta manera:
from tkinter import scrolledtext
txt = scrolledtext.ScrolledText(window,width=40,height=10)
Aquí especificamos el ancho y el alto del widget ScrolledText, de
lo contrario, rellenará toda la ventana.
from tkinter import *
from tkinter import scrolledtext
window = Tk()
window.title("Welcome to LikeGeeks app")
window.geometry('350x200')
txt = scrolledtext.ScrolledText(window,width=40,height=10)
txt.grid(column=0,row=0)
window.mainloop()
Puedes ver el resultado:
Establecer el contenido del scrolledtext
Para establecer el contenido del scrolledtext, puedes usar el
método insert , de esta manera:
txt.insert(INSERT,'You text goes here')
Borrar/limpiar el contenido de un scrolledtext
Para borrar el contenido de un widget scrolledtext, puedes usar el
método delete, de esta manera:
txt.delete(1.0,END)
¡Grandioso!
Crear un MessageBox
Para mostrar un cuadro de mensaje usando Tkinter, puedes usar
la librería messagebox , de esta manera:
from tkinter import messagebox
messagebox.showinfo('Message title','Message content')
¡Bastante simple!
Vamos a mostrar un cuadro de mensaje cuando el usuario haga
click en un botón.
from tkinter import *
from tkinter import messagebox
window = Tk()
window.title("Welcome to LikeGeeks app")
window.geometry('350x200')
def clicked():
messagebox.showinfo('Message title', 'Message content')
btn = Button(window,text='Click here', command=clicked)
btn.grid(column=0,row=0)
window.mainloop()
Cuando hagas click en el botón, un cuadro de mensajes
informativo aparecerá.
Mostrar mensajes de error y de advertencia
Puede mostrar un mensaje de advertencia o mensaje de error de
la misma manera. Lo único que debe cambiarse es la función
message.
messagebox.showwarning('Message title', 'Message content') #shows warning message
messagebox.showerror('Message title', 'Message content') #shows error message
Mostrar diálogos de pregunta-respuesta
Para mostrar una caja de mensaje del tipo si/no al usuario,
puedes usar uno de las siguientes funciones messagebox :
from tkinter import messagebox
res = messagebox.askquestion('Message title','Message content')
res = messagebox.askyesno('Message title','Message content')
res = messagebox.askyesnocancel('Message title','Message content')
res = messagebox.askokcancel('Message title','Message content')
res = messagebox.askretrycancel('Message title','Message content')
Puedes elegir el estilo de mensaje apropiado, de acuerdo a tus
necesidades. Simplmente reemplaza la función showinfo en el
código anterior y ejecútalo.
También puedes revisar qué botón hizo click el usuario, usando la
variable result .
Si haces click en OK o yes o retry, devolverá el valor True ; pero,
si eliges no o cancel, retornará False .
La única función que devuelve uno de tres valores es la
función askyesnocancel , que devuelve True o False o None .
Agregar un SpinBox (widget de números)
Para crear un widget Spinbox, puedes usar la clase Spinbox , de
esta manera:
spin = Spinbox(window, from_=0, to=100)
Aquí creamos un widget Spinbox y pasamos los
parámetros from_ y to para especificar el rango de números del
Spinbox.
Además, puedes especificar el ancho del widget usando el
parámetro width :
spin = Spinbox(window, from_=0, to=100, width=5)
Verifiquemos el ejemplo completo:
from tkinter import *
window = Tk()
window.title("Welcome to LikeGeeks app")
window.geometry('350x200')
spin = Spinbox(window, from_=0, to=100, width=5)
spin.grid(column=0,row=0)
window.mainloop()
Puedes especificar números para el Spinbox en lugar de usar
todo el rango, de esta manera:
spin = Spinbox(window, values=(3, 8, 11), width=5)
Aquí, el widget Spinbox solamente muestra 3 números: 3, 8 y 11.
Establecer el valor por defecto del Spinbox
Para colocar el valor por defecto del Spinbox, puedes pasar el
valor al parámetro textvariable , de esta manera:
var =IntVar()
var.set(36)
spin = Spinbox(window, from_=0, to=100, width=5, textvariable=var)
Ahora, si corres el programa, el Spinbox te mostrará el valor 36
por defecto.
Adicionar el widget Progressbar
Para crear una barra de progreso, puedes usar la
clase progressbar , de esta manera:
from tkinter.ttk import Progressbar
bar = Progressbar(window, length=200)
Puedes establecer el valor de la barra de progreso, de esta
manera:
bar['value'] = 70
Puedes establecer este valor según el proceso que desees, como
descargar un archivo o completar una tarea.
Cambiar el color de un Progressbar
Cambiar el color de un Progressbar es un poco complicado al
principio, pero muy fácil en realidad.
Primero, crearemos un estilo, luego en dicho estilo
estableceremos el color de fondo; y, finalmente, asignaremos el
estilo al Progressbar.
Revisa el siguiente ejemplo:
from tkinter import *
from tkinter.ttk import Progressbar
from tkinter import ttk
window = Tk()
window.title("Welcome to LikeGeeks app")
window.geometry('350x200')
style = ttk.Style()
style.theme_use('default')
style.configure("black.Horizontal.TProgressbar", background='black')
bar = Progressbar(window, length=200, style='black.Horizontal.TProgressbar')
bar['value'] = 70
bar.grid(column=0, row=0)
window.mainloop()
Y el resultado quedará así:
Adicionar un diálogo para archivos (elegir
archivo y directorio)
Para crear un diálogo de archivos (para elegir archivos) puedes
usar la clase filedialog , de esta manera:
from tkinter import filedialog
file = filedialog.askopenfilename()
Después de que escojas un archivoy hagas click en abrir, la
variable file tendrá la ruta del archivo.
También puedes elegir multiples archivos de la siguiente manera:
files = filedialog.askopenfilenames()
Especificar los tipos de archivo (filtro por la extensión del
archivo)
Puedes especificar los tipos de archivo usando el parámetro
filetypes, que, precisamente especifica la extensión en tuplas.
file = filedialog.askopenfilename(filetypes = (("Text files","*.txt"),("all files","*.*")))
Puedes solicitar el directorio a usar con el método askdirectory:
dir = filedialog.askdirectory()
Puedes especificar el directorio inicial del diálogo especificando el
initialdir, de esta manera:
from os import path
file = filedialog.askopenfilename(initialdir= path.dirname(__file__))
¡Fácil!
Adicionar una barra de menú
Para agregar una barra de menú, puedes usar la clase menu , de
esta manera:
from tkinter import Menu
menu = Menu(window)
menu.add_command(label='File')
window.config(menu=menu)
Primero, creamos el menú. Luego, añadimos nuestra primera
etiqueta. Finalmente, asignamos el menú a la ventana.
Puedes agregar los elementos del menú, en cualquir menú, con
la función add_cascade() , de esta manera:
menu.add_cascade(label='File', menu=new_item)
Entonces, nuestro código quedará así:
from tkinter import *
from tkinter import Menu
window = Tk()
window.title("Welcome to LikeGeeks app")
menu = Menu(window)
new_item = Menu(menu)
new_item.add_command(label='New')
menu.add_cascade(label='File', menu=new_item)
window.config(menu=menu)
window.mainloop()
De esta manera, puedes agregar tantos elementos como quieras.
from tkinter import *
from tkinter import Menu
window = Tk()
window.title("Welcome to LikeGeeks app")
menu = Menu(window)
new_item = Menu(menu)
new_item.add_command(label='New')
new_item.add_separator()
new_item.add_command(label='Edit')
menu.add_cascade(label='File', menu=new_item)
window.config(menu=menu)
window.mainloop()
Aquí agregamos otro elemento del menú llamado «Edit» con un
separador de menú.
Puedes notar una línea punteada al principio, bueno, si haces
click en esa línea, mostrará los elementos del menú en una
pequeña ventana separada.
Puedes deshabilitar esta característica, deshabilitando la
característica tearoff , de esta manera:
new_item = Menu(menu, tearoff=0)
Simplemente reemplaza el new_item en el ejemplo anterior con éste
y ya no mostrará la línea punteada.
No es necesario que recordarte que puedes escribir cualquier
código que funcione cuando el usuario haga click en cualquier
elemento del menú, especificando la propiedad command .
new_item.add_command(label='New', command=clicked)
Adicionar un widget Notebook (control de
pestañas)
Para crear un control de pestañas, se deben seguir tres pasos.
Primero, crear un control de pestaña usando la clase Notebook
Crear la pestaña usando la clase Frame .
Adicionar la pestaña al control de pestañas.
Empaquetar el control de pestañas para que sea visible en
la ventana.
from tkinter import *
from tkinter import ttk
window = Tk()
window.title("Welcome to LikeGeeks app")
tab_control = ttk.Notebook(window)
tab1 = ttk.Frame(tab_control)
tab_control.add(tab1, text='First')
tab_control.pack(expand=1, fill='both')
window.mainloop()
De igual manera, puedes añadir tantas pestañas como quieras.
Agregar widgets a las pestañas
Después de crear las pestañas, puedes colocar widgets dentro de
ellas, asignado la propieda parent con la pestaña deseada.
from tkinter import *
from tkinter import ttk
window = Tk()
window.title("Welcome to LikeGeeks app")
tab_control = ttk.Notebook(window)
tab1 = ttk.Frame(tab_control)
tab2 = ttk.Frame(tab_control)
tab_control.add(tab1, text='First')
tab_control.add(tab2, text='Second')
lbl1 = Label(tab1, text= 'label1')
lbl1.grid(column=0, row=0)
lbl2 = Label(tab2, text= 'label2')
lbl2.grid(column=0, row=0)
tab_control.pack(expand=1, fill='both')
window.mainloop()
Adicionar espacio para los widgets (separación o
padding)
Puedes añadir separación a tus controles para que se vean bien
organizados, usando las propiedades padx y pady .
Simplemente pasa padx y pady a cualquier widget y dáles un valor.
lbl1 = Label(tab1, text= 'label1', padx=5, pady=5)
¡Así de simple!
En este tutorial, vimos muchos ejemplos de Python GUI que
utilizan la biblioteca Tkinter y vimos lo fácil que es desarrollar
interfaces gráficas para usarlo.
Este tutorial cubre los aspectos principales del desarrollo de la
GUI de Python no todos. No hay tutorial o un libro pueda cubrir
todo.
Espero que encuentres estos ejemplos útiles. Mantente con
nosotros.
Gracias.
