DMarlon Studio

Lección 14 · 14 de 20

Colocar con pack · tkinter

El gestor pack de tkinter: side, fill y expand para montar una cabecera, una barra de herramientas, los laterales y una zona central que crece.

tkinter · Colocar con pack en DMarlon Studio: el código del ejemplo y la ventana que abre al ejecutarlo

`pack` coloca cada componente pegado a un lado del espacio que queda libre. `side` dice cuál: "top" (el valor por defecto), "bottom", "left" o "right". El orden importa: cada uno se queda con su franja y deja el resto al siguiente.

`fill` estira el componente dentro de su franja: "x" a lo ancho, "y" a lo alto y "both" en las dos direcciones. La cabecera azul y el pie gris llevan fill="x"; los laterales, fill="y".

`expand=True` le da al componente el espacio que sobra. El cuadro morado se coloca el último, con expand=True y fill="both": ocupa todo lo que queda y crece si se agranda la ventana. padx y pady dejan un margen alrededor.

La barra de herramientas es un ttk.Frame con tres botones en fila (side="left") y Help en el otro extremo (side="right"). Dentro de cada marco, pack empieza de cero.

box crea las etiquetas de colores con tk.Label, porque el tema de macOS no pinta el fondo de las ttk. El diseñador de DMarlon Studio coloca cada componente justo donde se suelta (con place); pack se puede usar a mano en la pestaña Código.

Código · main.py

import tkinter as tkfrom tkinter import ttkroot = tk.Tk()root.title("Layout with pack")root.geometry("560x340")def box(text, colour):    # tk.Label, not ttk: the macOS theme ignores ttk background colours.    return tk.Label(root, text=text, bg=colour, fg="white", padx=12, pady=8,                    font=("Helvetica", 13, "bold"))# side says which edge each widget sticks to; the order matters.box("side=top, fill=x", "#2563eb").pack(side="top", fill="x")# A toolbar: buttons in a row with side="left", one with side="right".bar = ttk.Frame(root, padding=6)bar.pack(side="top", fill="x")for name in ("New", "Open", "Save"):    ttk.Button(bar, text=name).pack(side="left", padx=2)ttk.Button(bar, text="Help").pack(side="right", padx=2)box("side=bottom, fill=x", "#475569").pack(side="bottom", fill="x")box("side=left\nfill=y", "#16a34a").pack(side="left", fill="y")box("side=right\nfill=y", "#ea580c").pack(side="right", fill="y")# expand=True takes the space left over; fill="both" uses all of it.box("expand=True\nfill=both", "#9333ea").pack(fill="both", expand=True,                                              padx=10, pady=10)root.mainloop()

Para recordar

  • side elige el borde; el orden de pack decide quién se queda cada franja.
  • fill estira el componente: "x", "y" o "both".
  • expand=True reparte el espacio sobrante.
  • Cada marco tiene su propio pack por dentro.

Ejercicio

Mueva la línea del lateral verde para que se ejecute antes que la del pie gris y observe cómo cambia el reparto de la ventana.