Posiciones relativas y el widget button() - Tkinter desde cero - Capítulo 4


Este cuarto capítulo lo voy a dedicar a las posiciones relativas de las columnas y filas en el grid() y un nuevo widget con el que crear botones.

Empecemos con esta pequeño programa. No te asustes, solo son una serie de Frame() colocados con el grid().

Código

from tkinter import *
root = Tk()

#Creamos el marco

#Marco 1
marco_principal1 = Frame()
marco_principal1.grid(row=0,column=0)
marco_principal1.config(width="100", height="100")
marco_principal1.config(bg="red")

#Marco 2
marco_principal2 = Frame()
marco_principal2.grid(row=1,column=0)
marco_principal2.config(width="100", height="100")
marco_principal2.config(bg="blue")

#Marco 3
marco_principal3 = Frame()
marco_principal3.grid(row=2,column=0)
marco_principal3.config(width="100", height="100")
marco_principal3.config(bg="yellow")

#Marco 4
marco_principal4 = Frame()
marco_principal4.grid(row=0,column=1)
marco_principal4.config(width="100", height="100")
marco_principal4.config(bg="green")

#Marco 5
marco_principal5 = Frame()
marco_principal5.grid(row=1,column=1)
marco_principal5.config(width="100", height="100")
marco_principal5.config(bg="black")

#Marco 6
marco_principal6 = Frame()
marco_principal6.grid(row=2,column=1)
marco_principal6.config(width="100", height="100")
marco_principal6.config(bg="orange")

root.mainloop()

Resultado

El resultado de este código es una ventana con 6 Frame() de distintos colores para que distingas sus posiciones.
Esto te va a ayudar a ver bien como se coloca cada elemento en el grid().

Frames colocados con el grid

Si ya has analizado el código, es el momento de que te fijes en el marco 4, el Frame() de color verde.
¿Qué pasa si en lugar de poner columna 1 pongo por ejemplo la 10?
¿Dejará espacios vacíos hasta llegar a la columna 10?
La respuesta es que solo va a desocupar la columna 1 para crear una columna 10 en la posición inmediata, que realmente será la columna 2 (realmente es la 3, ya que en el grid(), las posiciones se especifican contando a partir del 0).

Código

#Marco 4
marco_principal4 = Frame()
marco_principal4.grid(row=0,column=10)
marco_principal4.config(width="100", height="100")
marco_principal4.config(bg="green")

Resultado

Ventana con Label y Frame

¿Por qué este comportamiento?
Esto es por que si no hay nada en las columnas 2, 3, 4, 5... hasta la 10, no crea esos espacios, los ignora.
Este comportamiento ocurre tanto en las filas como en las columnas.
Te recomiendo que hagas un diseño con la colucación en el grid antes de ponerte a escribir código, de esta forma, sabrás dónde colocar las cosas y no te surgirán problemas durante el desarrollo de tus programas.

El widget Button()

Cambiamos de tema totalmente y pasamos a ver el widget Button(), el cuál te va a servir para crear botones.

Los botones son un elemento que casi siempre va a estar en toda interfaz gráfica, así que seguro que los utilizarás muy a menudo.

Para crear un botón, lo haremos con el widget Button() indicando en sus argumentos dónde se va a mostrar y el texto que quieres mostrar.

Aquí tienes un botón muy sencillo:

Código

boton1 = Button(root, text="No presiones el botón").grid(row=1, column=2)

Resultado

Si no has borrado los marcos de los ejemplos anteriores, debería quedarte de esta forma:

Botón Tkinter

Así es como queda un botón básico de Tkinter.
Podemos ir personalizándolo. Voy a añadirle un color de fondo.

Código

boton1 = Button(root, text="No presiones el botón rojo", bg="red").grid(row=1, column=2)

Resultado

Botón rojo Tkinter

Se puede modificar el tamaño de este botón muy fácil, para el tamaño en X es decir en horizontal, con padx y para el tamaño en Y, vertical con pady.

Código

boton1 = Button(root, text="No puedes presionar el botón rojo ;)", bg="red", padx=100, pady=25, state=DISABLED).grid(row=1, column=2)

Resultado

Nos aparece un botón de 100 píxeles de ancho por 25 píxeles de alto.
Por cierto, el nuevo atributo state permite con el valor DISABLED deshabilitar un botón, el cuál aparece como los botones deshabilitados del propio sistema operativo en el cuál ejecutas el programa.

Botón Tkinter deshabilitado

Hasta aquí el capítulo, en el siguiente veremos como hacer que el botón sea capaz de hacer algo, con lo que ya tendremos creado el primer programa funcional.


Suscríbete a mi canal de YouTube para apoyarme

Si te ha gustado este curso y crees que el trabajo merece la pena, te agradeceré eternamente que te suscribas a mi canal de YouTube para apoyarme y que pueda seguir haciendo cursos gratuitos.

Además, si te encanta la programación, tienes un montón más de cursos gratuitos para ver.

No solo eso, podrás participar enviándome comentarios con tus sugerencias para temas específicos o cursos completos o incluso las dudas que tengas y las intentaré ir resolviendo en los cursos que estén todavía abiertos.


Comentarios

Si te quedan dudas sobre el temario, sobre Python, o cualquier otra cosa relacionada o simplemente quieres agradecer, aquí tienes tu sitio para dejar tu granito de arena. Gracias por tus comentarios y por darle vida a este sitio web.