Tkinter - Tutorial Completo de Aplicaciones Gráficas en Python

🖥️ Tkinter - Aplicaciones Gráficas en Python

Aprende a crear interfaces gráficas paso a paso con ejemplos prácticos

Paso 1: Crear una ventana básica 🪟

¿Qué aprenderás?

En este primer paso aprenderás a crear la ventana principal de tu aplicación. Esta es la base sobre la cual construirás toda tu interfaz gráfica.

Código base:

import tkinter as tk

# Crear la ventana principal
ventana = tk.Tk()
ventana.title("Mi Primera App")
ventana.geometry("400x300")

# Mantener la ventana abierta
ventana.mainloop()

📌 Explicación línea por línea:

import tkinter as tk: Importa la librería para crear interfaces gráficas
tk.Tk(): Crea la ventana principal de la aplicación
title(): Establece el título que aparece en la barra superior
geometry(): Define el tamaño inicial (ancho x alto) en píxeles
mainloop(): Mantiene la ventana abierta y responde a eventos del usuario

🎯 Resultado esperado: Deberías ver una ventana vacía de 400x300 píxeles con el título "Mi Primera App" que se puede redimensionar, minimizar y cerrar.

Paso 2: Agregar elementos básicos 🏗️

Elementos fundamentales: Label y Button

Ahora agregaremos los elementos más básicos: etiquetas (texto) y botones. También aprenderás sobre el sistema de posicionamiento pack().

Código completo:

import tkinter as tk

# Crear la ventana principal
ventana = tk.Tk()
ventana.title("Mi Primera App")
ventana.geometry("400x300")

# Crear una etiqueta (texto)
etiqueta = tk.Label(ventana, text="¡Hola! Esta es mi primera app", font=("Arial", 14))
etiqueta.pack(pady=20)

# Crear un botón
boton = tk.Button(ventana, text="Hacer clic aquí", font=("Arial", 12))
boton.pack(pady=10)

# Mantener la ventana abierta
ventana.mainloop()

🔧 Explicación de pack() y pady:

pack(): Administrador de geometría que organiza elementos automáticamente
Los elementos se apilan verticalmente (como cajas una encima de otra)
pady=20: Agrega 20 píxeles de espacio vertical arriba y abajo
Por defecto, los elementos se centran horizontalmente

⚠️ Nota importante: El botón aún no hace nada cuando lo presionas. Esto lo solucionaremos en el siguiente paso.

Paso 3: Controlar la alineación 📐

Personalizar posición con anchor

Los elementos salen centrados por defecto, pero puedes cambiar esto usando el parámetro anchor en pack().

Ejemplo de diferentes alineaciones:

import tkinter as tk

ventana = tk.Tk()
ventana.title("Probando alineación")
ventana.geometry("400x300")

# Centrado (por defecto)
etiqueta1 = tk.Label(ventana, text="Centrado (por defecto)", bg="lightblue")
etiqueta1.pack(pady=10)

# Alineado a la izquierda
etiqueta2 = tk.Label(ventana, text="Alineado a la izquierda", bg="lightgreen")
etiqueta2.pack(anchor="w", pady=10)

# Alineado a la derecha
etiqueta3 = tk.Label(ventana, text="Alineado a la derecha", bg="lightyellow")
etiqueta3.pack(anchor="e", pady=10)

# Botón a la izquierda
boton = tk.Button(ventana, text="Botón izquierda")
boton.pack(anchor="w", pady=10)

ventana.mainloop()

🧭 Valores de anchor (puntos cardinales):

"w" = West (izquierda)
"e" = East (derecha)
"n" = North (arriba)
"s" = South (abajo)
Sin anchor = centrado

Paso 4: Hacer que los botones respondan 🎯

Conectar funciones a botones

Ahora aprenderás a crear funciones que se ejecuten cuando el usuario presione los botones. Esto es lo que hace que tu aplicación sea interactiva.

Ejemplo completo con botones funcionales:

import tkinter as tk

# Crear la ventana principal
ventana = tk.Tk()
ventana.title("Botones que funcionan")
ventana.geometry("400x300")

# Función que se ejecuta cuando presionas el botón
def saludar():
    etiqueta_resultado.config(text="¡Hola! Presionaste el botón")

def despedirse():
    etiqueta_resultado.config(text="¡Adiós! Hasta luego")

# Etiqueta para mostrar mensajes
etiqueta_resultado = tk.Label(ventana, text="Presiona un botón", font=("Arial", 12), bg="lightgray")
etiqueta_resultado.pack(pady=20)

# Botones que llaman a las funciones
boton_saludo = tk.Button(ventana, text="Saludar", command=saludar, bg="lightgreen")
boton_saludo.pack(pady=10)

boton_despedida = tk.Button(ventana, text="Despedirse", command=despedirse, bg="lightcoral")
boton_despedida.pack(pady=10)

ventana.mainloop()

🔑 Conceptos clave:

command=saludar: Conecta el botón con la función (sin paréntesis)
config(text="..."): Cambia el texto de una etiqueta después de crearla
Las funciones deben definirse ANTES de crear los botones que las usan
bg="color": Cambia el color de fondo del elemento

Paso 5: Campos de entrada de texto 📝

Interacción con el usuario: Entry

Los campos Entry permiten que el usuario escriba texto. Aprenderás a obtener y manipular este texto con los métodos .get() y .delete().

Aplicación con entrada de texto:

import tkinter as tk

ventana = tk.Tk()
ventana.title("Entrada de texto")
ventana.geometry("400x300")

# Función que toma el texto que escribió el usuario
def procesar_texto():
    texto_usuario = campo_entrada.get()  # Obtiene lo que escribió
    etiqueta_resultado.config(text=f"Escribiste: {texto_usuario}")

def limpiar():
    campo_entrada.delete(0, tk.END)  # Borra todo el campo
    etiqueta_resultado.config(text="Campo limpiado")

# Instrucción para el usuario
instruccion = tk.Label(ventana, text="Escribe algo aquí:", font=("Arial", 12))
instruccion.pack(pady=10)

# Campo donde el usuario puede escribir
campo_entrada = tk.Entry(ventana, font=("Arial", 12), width=30)
campo_entrada.pack(pady=10)

# Botones para procesar y limpiar
boton_procesar = tk.Button(ventana, text="Mostrar texto", command=procesar_texto, bg="lightblue")
boton_procesar.pack(pady=5)

boton_limpiar = tk.Button(ventana, text="Limpiar", command=limpiar, bg="orange")
boton_limpiar.pack(pady=5)

# Etiqueta para mostrar el resultado
etiqueta_resultado = tk.Label(ventana, text="Resultado aparecerá aquí", font=("Arial", 11), bg="lightyellow")
etiqueta_resultado.pack(pady=20)

ventana.mainloop()

🛠️ Métodos importantes de Entry:

.get(): Obtiene todo el texto que escribió el usuario
.delete(0, tk.END): Borra todo el contenido del campo
.delete(0, 3): Borra los primeros 3 caracteres
.insert(0, "texto"): Inserta texto en la posición 0
width=30: Controla el ancho visual del campo

🎯 Manejo avanzado de delete(): Para borrar los últimos caracteres, usa len(campo.get()) para calcular posiciones: campo.delete(len(campo.get())-2, tk.END) borra los últimos 2 caracteres.

Paso 6: Checkboxes y Radio Buttons ☑️

Selecciones múltiples y únicas

Los Checkboxes permiten seleccionar múltiples opciones, mientras que los Radio Buttons permiten seleccionar solo una opción de un grupo.

Ejemplo completo con ambos tipos:

import tkinter as tk

ventana = tk.Tk()
ventana.title("Checkboxes y Radio Buttons")
ventana.geometry("450x400")

def mostrar_selecciones():
    # Leer los checkboxes
    hobbies = []
    if var_musica.get():
        hobbies.append("Música")
    if var_deportes.get():
        hobbies.append("Deportes")
    if var_lectura.get():
        hobbies.append("Lectura")
    
    # Leer el radio button
    color_favorito = var_color.get()
    
    # Mostrar resultados
    texto_hobbies = "Hobbies: " + ", ".join(hobbies) if hobbies else "Hobbies: Ninguno"
    texto_color = f"Color favorito: {color_favorito}"
    
    resultado.config(text=f"{texto_hobbies}\n{texto_color}")

# Título para checkboxes
tk.Label(ventana, text="Selecciona tus hobbies (puedes elegir varios):", 
         font=("Arial", 11, "bold")).pack(pady=(10,5))

# Variables para los checkboxes (pueden ser True o False)
var_musica = tk.BooleanVar()
var_deportes = tk.BooleanVar()
var_lectura = tk.BooleanVar()

# Checkboxes (casillas de verificación)
check_musica = tk.Checkbutton(ventana, text="Música", variable=var_musica)
check_musica.pack(anchor="w", padx=50)

check_deportes = tk.Checkbutton(ventana, text="Deportes", variable=var_deportes)
check_deportes.pack(anchor="w", padx=50)

check_lectura = tk.Checkbutton(ventana, text="Lectura", variable=var_lectura)
check_lectura.pack(anchor="w", padx=50)

# Título para radio buttons
tk.Label(ventana, text="Selecciona tu color favorito (solo uno):", 
         font=("Arial", 11, "bold")).pack(pady=(20,5))

# Variable para radio buttons (solo una opción)
var_color = tk.StringVar(value="Rojo")  # Valor por defecto

# Radio buttons (botones de opción)
radio_rojo = tk.Radiobutton(ventana, text="Rojo", variable=var_color, value="Rojo")
radio_rojo.pack(anchor="w", padx=50)

radio_azul = tk.Radiobutton(ventana, text="Azul", variable=var_color, value="Azul")
radio_azul.pack(anchor="w", padx=50)

radio_verde = tk.Radiobutton(ventana, text="Verde", variable=var_color, value="Verde")
radio_verde.pack(anchor="w", padx=50)

# Botón para mostrar selecciones
boton_mostrar = tk.Button(ventana, text="Mostrar selecciones", 
                         command=mostrar_selecciones, bg="lightblue")
boton_mostrar.pack(pady=20)

# Etiqueta para mostrar resultados
resultado = tk.Label(ventana, text="Haz tus selecciones y presiona el botón", 
                    bg="lightyellow", justify="left")
resultado.pack(pady=10)

ventana.mainloop()

🔧 Tipos de variables:

BooleanVar(): Para checkboxes (True/False)
StringVar(): Para radio buttons (guarda texto)
IntVar(): Para números enteros
padx=50: Espacio horizontal (margen izquierdo)
justify="left": Alineación del texto en etiquetas multilínea

📌 Diferencia clave: Los checkboxes permiten múltiples selecciones (0, 1, 2, o todas), mientras que los radio buttons solo permiten una selección del grupo.

🚀 Proyecto Final: Calculadora Completa

📋 Tu Reto Final:

Usando todo lo aprendido, crea una calculadora completa que tenga dos campos de entrada para números y botones para las operaciones básicas más potencia. Incluye manejo de errores y una interfaz atractiva.

✨ Código completo de la calculadora:

import tkinter as tk

ventana = tk.Tk()
ventana.title("Calculadora Básica")
ventana.geometry("400x350")

def sumar():
    try:
        num1 = float(campo_num1.get())
        num2 = float(campo_num2.get())
        resultado = num1 + num2
        etiqueta_resultado.config(text=f"Resultado: {resultado}")
    except ValueError:
        etiqueta_resultado.config(text="Error: Ingresa números válidos")

def restar():
    try:
        num1 = float(campo_num1.get())
        num2 = float(campo_num2.get())
        resultado = num1 - num2
        etiqueta_resultado.config(text=f"Resultado: {resultado}")
    except ValueError:
        etiqueta_resultado.config(text="Error: Ingresa números válidos")

def multiplicar():
    try:
        num1 = float(campo_num1.get())
        num2 = float(campo_num2.get())
        resultado = num1 * num2
        etiqueta_resultado.config(text=f"Resultado: {resultado}")
    except ValueError:
        etiqueta_resultado.config(text="Error: Ingresa números válidos")

def dividir():
    try:
        num1 = float(campo_num1.get())
        num2 = float(campo_num2.get())
        if num2 == 0:
            etiqueta_resultado.config(text="Error: No se puede dividir por cero")
        else:
            resultado = num1 / num2
            etiqueta_resultado.config(text=f"Resultado: {resultado}")
    except ValueError:
        etiqueta_resultado.config(text="Error: Ingresa números válidos")

def potencia():
    try:
        num1 = float(campo_num1.get())
        num2 = float(campo_num2.get())
        resultado = num1 ** num2
        etiqueta_resultado.config(text=f"Resultado: {resultado}")
    except ValueError:
        etiqueta_resultado.config(text="Error: Ingresa números válidos")

# Título
tk.Label(ventana, text="CALCULADORA BÁSICA", font=("Arial", 16, "bold")).pack(pady=10)

# Primer número
tk.Label(ventana, text="Primer número:", font=("Arial", 12)).pack(pady=5)
campo_num1 = tk.Entry(ventana, font=("Arial", 12), width=20, justify="center")
campo_num1.pack(pady=5)

# Segundo número
tk.Label(ventana, text="Segundo número:", font=("Arial", 12)).pack(pady=5)
campo_num2 = tk.Entry(ventana, font=("Arial", 12), width=20, justify="center")
campo_num2.pack(pady=5)

# Frame para organizar los botones en filas
frame_botones = tk.Frame(ventana)
frame_botones.pack(pady=20)

# Primera fila de botones
boton_suma = tk.Button(frame_botones, text="+ Sumar", command=sumar, bg="lightgreen", width=10)
boton_suma.grid(row=0, column=0, padx=5, pady=5)

boton_resta = tk.Button(frame_botones, text="- Restar", command=restar, bg="lightcoral", width=10)
boton_resta.grid(row=0, column=1, padx=5, pady=5)

boton_multiplicar = tk.Button(frame_botones, text="× Multiplicar", command=multiplicar, bg="lightblue", width=10)
boton_multiplicar.grid(row=0, column=2, padx=5, pady=5)

# Segunda fila de botones
boton_dividir = tk.Button(frame_botones, text="÷ Dividir", command=dividir, bg="lightyellow", width=10)
boton_dividir.grid(row=1, column=0, padx=5, pady=5)

boton_potencia = tk.Button(frame_botones, text="^ Potencia", command=potencia, bg="plum", width=10)
boton_potencia.grid(row=1, column=1, padx=5, pady=5)

# Resultado
etiqueta_resultado = tk.Label(ventana, text="Resultado aparecerá aquí", 
                             font=("Arial", 14, "bold"), bg="white", 
                             relief="sunken", width=30, height=2)
etiqueta_resultado.pack(pady=20)

ventana.mainloop()

🔧 Conceptos avanzados utilizados:

try/except: Manejo de errores cuando el usuario no ingresa números
float(): Convierte texto a número decimal
Frame: Contenedor para organizar grupos de elementos
grid(): Sistema de posicionamiento en filas y columnas
justify="center": Centra el texto dentro del campo Entry
relief="sunken": Efecto visual de borde hundido

🎯 Reto adicional: Agrega funciones como raíz cuadrada, porcentaje, o un botón para limpiar los campos. También puedes mejorar el diseño con más colores y efectos visuales.

📝 Comparación: pack() vs grid()

pack(): Apila elementos verticalmente, más simple
grid(): Organiza en filas y columnas, más control sobre posición
No mezcles pack() y grid() en el mismo contenedor padre
Usa Frame para crear secciones con diferentes sistemas de organización

📚 Ejercicio para Practicar

🎯 Tu Misión:

Crea una aplicación llamada "Registro de Estudiantes" que combine todos los elementos aprendidos.

📋 Requisitos del programa:

Campo para ingresar el nombre del estudiante
Campo para ingresar la edad
Checkboxes para seleccionar materias favoritas (al menos 4 opciones)
Radio buttons para seleccionar grado escolar (7°, 8°, 9°, 10°, 11°)
Botón para "Registrar Estudiante" que muestre toda la información
Botón para "Limpiar Formulario"
Área de texto que muestre el resumen del registro

📄 Formato de salida esperado:

REGISTRO COMPLETO: Nombre: Juan Pérez Edad: 16 años Grado: 10° Materias favoritas: Matemáticas, Ciencias, Educación Física Estado: REGISTRADO EXITOSAMENTE

💡 Consejos para el desarrollo:
• Usa colores diferentes para cada sección
• Agrega validación para campos vacíos
• Incluye manejo de errores con try/except
• Usa Frame para organizar mejor los elementos
• Prueba tanto pack() como grid() en diferentes secciones

📤 INSTRUCCIONES DE ENTREGA

Guarda tu proyecto como registro_estudiantes.py

El programa debe ejecutarse sin errores y cumplir todos los requisitos

Fecha límite: Próxima clase

Con estos conocimientos ya puedes crear aplicaciones gráficas básicas. ¡Sigue practicando para dominar completamente las interfaces gráficas!