Tomás Domínguez Mínguez

Desarrollo de interfaces gráficas en Python 3 con Tkinter


Скачать книгу

es importar las clases que se van a utilizar del paquete Tkinter (Tk y Label):

illustration

      Luego, se crea la ventana principal:

illustration

      Acto seguido, se hace lo mismo con las cuatro etiquetas:

illustration

      Finalmente, se muestran en la ventana con el método pack(). Estas se rodean con un borde de un grosor de 10 píxeles de ancho y 5 de alto. Eso hace que la primera etiqueta se aleje del límite superior de la ventana 5 píxeles (tal como se indicó en la opción pady), al igual que la última etiqueta del borde superior. Sin embargo, la separación vertical entre etiquetas es de 10 píxeles (5 del superior y 5 del inferior). Con los límites derecho e izquierdo de la ventana también se mantiene un espacio de 10 píxeles, tal como se ha establecido en la opción padx:

illustration

      El resultado, como cabía esperar, son las cuatro etiquetas colocadas unas debajo de otras. La imagen de la izquierda muestra el resultado de la ejecución del programa, mientras que la imagen de la derecha muestra gráficamente el efecto de las opciones padx y pady, con las que se han separado las etiquetas de los límites de la ventana principal y entre sí:

illustration illustration

      Al utilizar las opciones padx y pady, ya no es necesario incluir los retornos de carro (carácter ‘\n’) ni los espacios en el texto de la etiqueta.

illustration

      Para que el espacio que se establezca a la derecha de un widget sea diferente que el de la izquierda, asigne una tupla con dos valores a la opción padx. Esto mismo es igualmente válido para la opción pady.

      En el siguiente programa, se utiliza la opción side para situar las etiquetas en cada uno de los lados de la ventana:

illustration

      De nuevo, se importan las clases Tk y Label de la librería Tkinter, pero, en este caso, también se hace lo mismo con las constantes TOP, BOTTOM, LEFT y RIGHT, que determinarán la posición de cada una de las etiquetas:

illustration

      Para que el efecto sea más visible, una vez creada la ventana principal, esta se configura con un tamaño de 200 × 200 píxeles:

illustration

      Las etiquetas se crean de la misma forma que en el programa anterior, por lo que no se van a dar explicaciones adicionales.

      El principal cambio se produce al mostrarlas en la ventana principal con el método pack(), ya que ahora se añade la opción side para fijar la posición en la que se va a situar cada una de ellas. Además, dependiendo del lado de la ventana en el que se coloquen, se utilizarán las opciones padx o pady para separarlas del borde:

illustration

      Ejecute el programa. Obtendrá el resultado mostrado en la siguiente imagen:

illustration

      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.

illustration

      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.

illustration illustration

      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:

illustration

      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):

illustration

      Con ellos, podrá configurar aspectos