Читать книгу Desarrollo de interfaces gráficas en Python 3 con Tkinter - Tomás Domínguez Mínguez - Страница 11

Cuando el diseño de una interfaz es complejo, puede resultar difícil y engorroso trabajar con el gestor de geometría pack. Por este motivo, es preferible utilizar el gestor grid, y dejar el anterior para las más sencillas. Con grid, la distribución de los widgets se realiza de una manera más flexible, utilizando un diseño de cuadrícula (de ahí su nombre, ya que grid se puede traducir por “cuadrícula”). De esta manera, cada widget se sitúa en la celda determinada por la intersección de una fila y una columna.

Nunca use los gestores pack() y grid() dentro de la misma ventana, porque los algoritmos que utilizan para calcular las posiciones de los widgets no son compatibles.

La forma de utilizarlo es invocando el siguiente método, presente en todos los widgets:

grid(opciones)

Las opciones posibles son:

•column. Columna en la que se va a colocar el widget (por defecto, la 0).

•columnspan. Número de columnas que ocupa el widget (por defecto, una).

•row. Fila en la que se va a colocar el widget (por defecto, la 0).

•rowspan. Número de filas que ocupa el widget (por defecto, una).

•ipadx. Número de píxeles con los que se rellena el widget horizontalmente, dentro de sus bordes.

•ipady. Número de píxeles con los que se rellena el widget verticalmente, dentro de sus bordes.

•padx. Número de píxeles con los que se rellena el widget horizontalmente, fuera de sus límites.

•pady. Número de píxeles con los que se rellena el widget verticalmente, fuera de sus límites.

•sticky. Determina dónde se ubica el widget dentro de la celda (por defecto, estaría centrado). Como si de los puntos cardinales de una brújula se tratara, el valor de esta opción permite situarlo en una esquina (NE, SE, SW o NW) o centrado en cada uno de los lados de la celda (N, E, S y W). La siguiente imagen trata de mostrarlo gráficamente. El cuadrado exterior representa la celda, y los más pequeños representan widgets situados en su interior, según el valor de esta opción.

El efecto de dichos valores solo sería apreciable si el tamaño del widget fuera menor que el de la celda.

Si quisiera adaptar el ancho del widget para que coincida con el de la celda, el valor de esta última opción debería ser EW. Si lo que desea es que tenga el mismo alto, asígnele el valor NS. Para que el tamaño del widget corresponda con el de la celda en ambas dimensiones, el valor utilizado sería NSEW.

La siguiente imagen muestra gráficamente cómo cambia el tamaño del widget con el de la celda en función del valor de esta opción:

Cuando se utiliza este gestor de geometría, el ancho de una columna será el de su celda más ancha. De la misma manera, la altura de una fila será la correspondiente a la celda más alta. Si desea cambiar este comportamiento, use los siguientes métodos de la ventana principal (o widget contenedor):

Con ellos, podrá configurar aspectos del tamaño de una columna o de una fila concreta empleando diferentes opciones, entre la que se encuentran:

•minsize. Tamaño mínimo de la columna o de la fila indicada, en píxeles. Si no hubiera nada dentro, esta no aparecería.

•weight. Permite que el tamaño de una columna o de una fila se adapte al de la ventana principal (o widget contenedor). El valor proporcionado establece el peso relativo de esta columna o fila respecto de las demás a la hora de distribuir el espacio existente.

Para entender esta última opción, imagine que la ventana principal (representada por el objeto ventana_principal) se divide en una cuadrícula de dos filas y dos columnas, tal como se muestra en la siguiente imagen:

Observe el resultado obtenido al añadir estas sentencias:

Ahora, el espacio se distribuye en la proporción de tres cuartos para la primera columna y un cuarto para la segunda. Además, al haber utilizado esta opción, el ancho de las columnas se adaptará al de la ventana cuando esta se modifique (en la proporción indicada).

El mismo razonamiento serviría para las filas. En ese caso, las sentencias que tendrían que añadirse son:

Por último, para dejar de mostrar un widget situado previamente en la ventana principal (o widget contenedor), se debe ejecutar el método:

Si volviera a mostrar dicho widget, lo haría en la misma posición donde se encontraba antes de desaparecer.

Con el fin de practicar con este nuevo gestor de geometría, va a desarrollar un programa que muestre una etiqueta en cada una de las celdas de una cuadrícula, cuyo texto indique el número de la fila y la columna en la que está situada; por ejemplo, el texto de la etiqueta situada en la fila 1 y la columna 2 será Etiqueta12, tal como se muestra a continuación:

El código del programa es el siguiente:

En primer lugar, se importan las conocidas clases Tk y Label:

Luego, se declaran las constantes que definen el número de filas y columnas que va a tener la rejilla en la que se van a distribuir las etiquetas:

A continuación, se crea la ventana principal:

El código principal de este programa está en los bucles for, mediante los que se crean y se sitúan las etiquetas en las posiciones correspondientes. El bucle exterior recorre las filas, mientras que el interior recorre las columnas:

Las etiquetas se crean con un texto que contiene el número de la fila y de la columna donde se van a colocar. La opción bg determina que el color de fondo sea amarillo:

Más adelante, estudiará todas las opciones de configuración de las etiquetas.

La siguiente sentencia sitúa cada etiqueta en la ventana principal con el método grid(). En este método se utilizan cuatro opciones: las que identifican la fila y la columna en la que deben ubicarse (row y column) y las que establecen los márgenes alrededor de cada una de ellas para separarlas entre sí (padx y pady):

El resultado obtenido al ejecutar este programa lo puede ver a continuación:

Ahora, redimensione la pantalla. Como podrá observar, las etiquetas se mantienen con el mismo tamaño y en la misma posición:

Si quiere que las celdas se adapten al tamaño de la ventana, deberá utilizar los métodos columnconfigure() y rowconfigure(), tal como aparece en la nueva versión de este mismo programa:

Ejecútelo de nuevo. En este caso, al aumentar el tamaño de la ventana, las celdas crecen para ocupar todo el espacio libre, pero no las etiquetas:

Para que estas ocupen todo el espacio de las celdas, deberá utilizar la opción sticky del método grid(). En el programa anterior, sustituya la sentencia

por esta otra:

El resultado que obtendrá ahora demuestra que tanto las celdas como las etiquetas que hay en su interior se ajustan al tamaño de la ventana en todas las circunstancias: