Python: Tutorial de Tkinter

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.

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)

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.

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.

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.
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.