Lección 15 · 15 de 20
Colocar con grid · tkinter
El gestor grid de tkinter: filas, columnas, sticky, columnspan y pesos para un formulario que se adapta al tamaño de la ventana.
`grid` coloca los componentes en una cuadrícula: row es la fila y column la columna, empezando en 0. Es lo más cómodo para formularios: las etiquetas en una columna y los campos en otra.
`sticky` pega el componente a los bordes de su celda con puntos cardinales: "e" a la derecha (las etiquetas), "ew" de izquierda a derecha (los campos se estiran) y "nsew" a los cuatro lados (las notas llenan su celda). La etiqueta «Notes:» usa "ne" para quedarse arriba.
`columnspan=2` hace que un componente ocupe dos columnas. Así los campos llegan hasta el borde derecho de Save, que está en la columna 2, y los dos botones comparten la fila 4.
Por defecto, filas y columnas miden lo justo. `columnconfigure(1, weight=1)` da a la columna 1 el espacio sobrante, y `rowconfigure(3, weight=1)` hace lo mismo con la fila de las notas: si se agranda la ventana, crecen ellas.
En un mismo contenedor no se mezclan grid y pack; por eso el formulario es un ttk.Frame colocado con pack y con grid por dentro. El diseñador de DMarlon Studio coloca cada componente donde se suelta, pero grid se puede usar en la pestaña Código.
Código · main.py
import tkinter as tkfrom tkinter import ttkroot = tk.Tk()root.title("Layout with grid")root.geometry("480x300")form = ttk.Frame(root, padding=20)form.pack(fill="both", expand=True)form.columnconfigure(1, weight=1) # column 1 grows with the windowform.rowconfigure(3, weight=1) # and so does row 3 (the notes)fields = [("First name", "Alan"), ("Last name", "Turing"), ("Email", "alan@example.com")]for row, (label, value) in enumerate(fields): # sticky="e": the label sticks to the right edge of its cell. ttk.Label(form, text=label + ":").grid(row=row, column=0, sticky="e", padx=(0, 8), pady=4) entry = ttk.Entry(form) entry.insert(0, value) # columnspan=2: the entry takes two columns; sticky="ew" stretches it. entry.grid(row=row, column=1, columnspan=2, sticky="ew", pady=4)ttk.Label(form, text="Notes:").grid(row=3, column=0, sticky="ne", padx=(0, 8))notes = tk.Text(form, height=4, width=30, font=("Helvetica", 13), highlightthickness=1, highlightbackground="#cbd5e1")notes.insert("1.0", "sticky=\"nsew\": this box fills its whole cell.")notes.grid(row=3, column=1, columnspan=2, sticky="nsew", pady=4)# The buttons share row 4: Cancel in column 1, Save in column 2.ttk.Button(form, text="Cancel").grid(row=4, column=1, sticky="e", pady=(8, 0))ttk.Button(form, text="Save").grid(row=4, column=2, sticky="e", padx=(8, 0), pady=(8, 0))root.mainloop()Para recordar
rowycolumnempiezan en 0.stickypega el componente a los bordes de su celda.columnspanyrowspanocupan varias celdas.weightdecide qué filas y columnas crecen.- No mezcle
gridypacken el mismo contenedor.
Ejercicio
Añada una fila «Phone» entre «Email» y «Notes» y mueva las notas y los botones una fila más abajo (recuerde el rowconfigure).