tkinter Grid

El método grid nos permite posicionar los widgets en una celda en especifico, indicamos la celda usando el índice de fila y columna correspondiente, el ancho y la altura de cada celda son configurables, además un widget puede ocupar varias celdas si lo deseamos, usando grid podemos crear fácilmente interfaces gráficas de usuario tipo formulario.

Un ejemplo simple, para posicionar el widget w usando el método grid() deberemos indicar como mínimo la fila y la columna donde este se ubicará, de este modo: w.grid(row=1, column=2) en este ejemplo el widget w se ubicará en la celda correspondiente a la fila 1 y la columna 2, los índices de filas y columnas inician de cero.

En este otro ejemplo creamos una matriz de elementos Entry (cuadro que nos permite escribir texto), a cada uno le asignamos el valor de fila y columna que le corresponde.

tkinter grid

El código Python tkinter es el siguiente:

from tkinter import *

root = Tk()

for r in range(0, 5):
    for c in range(0, 5):
        cell = Entry(root, width=10)
        cell.grid(row=r, column=c)
        cell.insert(0, '({}, {})'.format(r, c))

root.mainloop()

Bastante simple, pero nos sirve para comprender como se organizan los widgets con grid().

Si deseamos crear un espacio entre las filas o columnas podemos usar pady y padx en cada uno de ellos indicamos la cantidad de espacio deseada, ejemplo.

from tkinter import *

root = Tk()

for r in range(0, 5):
    for c in range(0, 5):
        cell = Entry(root, width=10)
        cell.grid(padx=5, pady=5, row=r, column=c)
        cell.insert(0, '({}, {})'.format(r, c))

root.mainloop()

tkinter espacio entre celdas de grid

También disponemos de ipadx e ipady que funcionan de manera similar, salvo que el espacio es a lo interno de la celda, prueba y compara los resultados para entender mejor.

Para crear una GUI tipo formulario solo añadimos los widget en las celdas correspondientes, para el ejemplo que se muestra en la imagen, tenemos 3 filas y 2 columnas, si le prestamos atención al botón veremos que ocupa dos columnas.

tkinter formulario con grid

from tkinter import *

root = Tk()

Label(root, text="Nombre:").grid(pady=5, row=0, column=0)
Label(root, text="Apellido:").grid( pady=5, row=1, column=0)

Entry(root, width=40).grid(padx=5, row=0, column=1)
Entry(root, width=40).grid(padx=5, row=1, column=1)

Button(root, text="Aceptar", width=50).grid(padx=10, pady=10, row=2, column=0, columnspan=2)

root.mainloop()

Para que el botón se posicione en dos columnas usamos columnspan=2 podemos indicar la cantidad de columnas que sean necesarias, del mismo modo si deseamos que un widget se posicione en más de una fila usaremos rowspan= indicando la cantidad de filas.

En este código de ejemplo tenemos un problema, al cambiar el tamaño de la ventana los widget mantienen su tamaño, si deseamos que los mismo se expandan con la ventana, como se muestra en la imagen debemos hacer lo siguiente.

tkinter grid expandible

from tkinter import *

root = Tk()

root.columnconfigure(0, weight=0)
root.columnconfigure(1, weight=1)
root.rowconfigure(2, weight=1)

Label(root, text="Nombre:").grid(row=0, column=0)
Label(root, text="Apellido:").grid(row=1, column=0)

Entry(root).grid(row=0, column=1, sticky=E+W)
Entry(root).grid(row=1, column=1, sticky=E+W)

Button(root, text="Aceptar").grid(pady=10,
                                  padx=10,
                                  row=2,
                                  column=0,
                                  columnspan=2,
                                  sticky=S+N+E+W)

root.mainloop()

A los widget que deseamos hacer expandible le agregamos sticky= para indicar a que posición se ancla en mismo, para los Entry usamos sticky=E+W indicando que los mismos están anclados a la derecha y a la izquierda de la celda, puedes ver la imagen con las distintas posiciones de anclaje.

tkinter anchor

Con en widget Button usamos sticky=S+N+E+W de este modo decimos que está anclado a las 4 posiciones respectivas.

Para finalizar debemos configurar la fila o columna para que se expanda, lo hacemos con root.columnconfigure(1, weight=1), donde el primer parámetro se refiere a la columna deseada y el segundo lo establecemos a 1 a obtener el comportamiento deseado, podemos hacer lo mismo con una fila usando rowconfigure .

Comentarios

Entradas populares de este blog

Conectar SQL Server con Java

Detección de rostros

Instalar OpenCV para Python en Windows