Curso de TKINTER desde cero

Las posiciones relativas de Tkinter

Capítulo 4: Posiciones relativas y el widget button()

Este cuarto capítulo del curso Tkinter 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, el widget Button().

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

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

El resultado de este código es una ventana con seis 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 la columna 1, le pongo por ejemplo la columna 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).

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

¿Por qué ocurre 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 colocació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() de Tkinter

Cambiamos de tema totalmente y pasamos a ver el widget Button() de Tkinter, 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:

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

desktop_windows Resultado desktop_windows

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.

boton1 = Button(root, text="No presiones el botón rojo", bg="red").grid(row=1, column=2)
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.

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

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.

Comentarios

Si te quedan dudas sobre el temario, sobre Tkinter, 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.

Programación Fácil YouTube

Suscríbete

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.