Paso 5: Interfaz Gráfica¶

En este paso, crearemos la función para generar botones personalizados y estableceremos la estructura básica de la interfaz gráfica de la calculadora.

📦 Código a añadir¶

Añade el siguiente código después del código del Paso 4 en tu archivo calculadora.py:

def crear_boton(parent, texto, fila, columna, comando, color_fondo="#f0f0f0", color_texto="black", ancho=1, alto=1):
    """Crear un botón personalizado con estilo"""
    boton = tk.Button(
        parent, 
        text=texto, 
        command=comando,
        bg=color_fondo,
        fg=color_texto,
        font=("Arial", 12, "bold"),
        width=6,
        height=2,
        relief="raised",
        bd=2,
        activebackground="#e0e0e0"
    )
    boton.grid(row=fila, column=columna, columnspan=ancho, rowspan=alto, padx=2, pady=2, sticky="nsew")
    return boton

if __name__ == "__main__":
    # Crear ventana principal
    ventana = tk.Tk()
    ventana.title("Calculadora Científica")
    ventana.geometry("500x600")
    ventana.resizable(False, False)
    ventana.configure(bg="#2c3e50")

    # Configurar el grid
    for i in range(10):
        ventana.grid_rowconfigure(i, weight=1)
    for i in range(6):
        ventana.grid_columnconfigure(i, weight=1)

    # Frame para la pantalla
    frame_pantalla = tk.Frame(ventana, bg="#2c3e50")
    frame_pantalla.grid(row=0, column=0, columnspan=6, padx=10, pady=10, sticky="ew")

    # Label de estado (memoria)
    status_label = tk.Label(frame_pantalla, text="", bg="#2c3e50", fg="white", font=("Arial", 10))
    status_label.pack(anchor="ne")

    # Campo de entrada
    entrada = tk.Entry(
        frame_pantalla, 
        width=30, 
        font=("Arial", 16, "bold"),
        justify="right",
        bg="white",
        fg="black",
        bd=3,
        relief="sunken"
    )
    entrada.pack(fill="x", pady=5)

🔍 Explicación detallada¶

Función `crear_boton()`¶

Esta función es el corazón del diseño visual de la calculadora. Permite crear botones consistentes con diferentes estilos según su función.

Parámetros:¶

parent: La ventana o frame donde se coloca el botón
texto: El texto que aparece en el botón
fila, columna: Posición en la grilla (grid)
comando: Función que se ejecuta al hacer clic
color_fondo, color_texto: Colores personalizables
ancho, alto: Cuántas celdas ocupa (para botones grandes)

Propiedades del botón:¶

font=("Arial", 12, "bold"): Tipografía consistente y legible
width=6, height=2: Tamaño estándar para facilidad de uso
relief="raised": Efecto 3D elevado
bd=2: Borde de 2 píxeles
activebackground: Color cuando se presiona

Configuración de la Ventana Principal¶

Ventana base:¶

ventana = tk.Tk()
ventana.title("Calculadora Científica")
ventana.geometry("500x600")
ventana.resizable(False, False)
ventana.configure(bg="#2c3e50")

Tamaño: 500x600 píxeles (proporción ideal para calculadora)
No redimensionable: Mantiene el diseño consistente
Color de fondo: Azul oscuro elegante (#2c3e50)

Sistema de Grid:¶

for i in range(10):
    ventana.grid_rowconfigure(i, weight=1)
for i in range(6):
    ventana.grid_columnconfigure(i, weight=1)

10 filas × 6 columnas: Espacio suficiente para todos los botones
weight=1: Distribución equitativa del espacio

Área de la Pantalla¶

Frame contenedor:¶

Propósito: Agrupa la pantalla y el indicador de memoria
Ocupa: 6 columnas de ancho (toda la fila superior)
Color: Coincide con el fondo de la ventana

Indicador de estado:¶

status_label = tk.Label(frame_pantalla, text="", bg="#2c3e50", fg="white", font=("Arial", 10))
status_label.pack(anchor="ne")

Posición: Esquina superior derecha (anchor="ne")
Función: Muestra operaciones de memoria (M+, M-, MC)
Inicialmente vacío: text=""

Campo de entrada:¶

entrada = tk.Entry(
    frame_pantalla, 
    width=30, 
    font=("Arial", 16, "bold"),
    justify="right",
    bg="white",
    fg="black",
    bd=3,
    relief="sunken"
)

justify="right": Alineación a la derecha (como calculadoras reales)
font=("Arial", 16, "bold"): Texto grande y claro
relief="sunken": Efecto hundido para parecer una pantalla
bd=3: Borde pronunciado para definición

🎨 Esquema de colores planificado¶

La función crear_boton() permite usar diferentes colores para categorizar las funciones:

Categoría	Color	Uso
Memoria	#e74c3c (rojo)	MC, MR, M+, M-
Limpieza	#f39c12 (naranja)	C, ←
Científicas	#3498db (azul)	sin, cos, tan, log, √
Constantes	#9b59b6 (púrpura)	π, e
Números	#ecf0f1 (gris claro)	0-9
Operadores	#34495e (gris oscuro)	+, -, ×, ÷
Igual	#27ae60 (verde)	=

🏗️ Estructura hasta ahora¶

Con este paso, tienes: 1. ✅ Sistema de funciones completo (Pasos 1-4) 2. ✅ Función de creación de botones personalizable 3. ✅ Ventana principal configurada 4. ✅ Área de pantalla con entrada y estado 5. ⏳ Botones (siguiente paso)

✅ Verificación¶

Después de añadir este código: 1. Guarda el archivo 2. Ejecuta python calculadora.py 3. Debería aparecer una ventana con: - Fondo azul oscuro - Campo de entrada blanco en la parte superior - Área vacía donde irán los botones

➡️ Siguiente paso¶

Continúa con Paso 6: Configuración de Botones para añadir todos los botones de la calculadora usando la función crear_boton().