Lección 16 · 16 de 20

Colocar con place · tkinter

El gestor place de tkinter: posiciones absolutas en píxeles, relativas al tamaño de la ventana y con anchor. Es el que usa DMarlon Studio.

tkinter · Colocar con place en DMarlon Studio: el código del ejemplo y la ventana que abre al ejecutarlo

`place` pone cada componente en una posición exacta. Con `x` e `y` se mide en píxeles desde la esquina superior izquierda, y con `width` y `height` se fija también su tamaño, como en el botón y el campo de la izquierda.

Las opciones relativas van de 0.0 a 1.0: relx=0.45 es el 45 % del ancho de la ventana. El panel azul (tk.Frame) usa además relwidth=0.5 y relheight=0.55, así que crece si se agranda la ventana.

`anchor` dice qué punto del componente cae en esa posición. Con anchor="center", relx=0.5, rely=0.5 deja la etiqueta justo en medio del panel, y la amarilla queda centrada a lo ancho. Con "se" (sureste), lo que se coloca es la esquina inferior derecha.

Las dos formas se suman: el botón OK usa relx=1.0, rely=1.0 (la esquina inferior derecha de la ventana) y x=-16, y=-16 para separarse 16 píxeles hacia dentro. Seguirá en la esquina aunque cambie el tamaño.

Es el gestor que usa DMarlon Studio: cada componente que se suelta en el formulario se escribe con place(x=..., y=..., width=..., height=...), con la posición y el tamaño que tiene en el diseñador.

Código · main.py

import tkinter as tkfrom tkinter import ttkroot = tk.Tk()root.title("Layout with place")root.geometry("540x330")# Absolute: x and y in pixels from the top-left corner of the window.ttk.Label(root, text="x=20, y=20").place(x=20, y=20)ttk.Button(root, text="x=20, y=50, width=180").place(x=20, y=50, width=180)ttk.Entry(root).place(x=20, y=94, width=180, height=28)# Relative: fractions of the window, from 0.0 to 1.0.panel = tk.Frame(root, bg="#dbeafe")panel.place(relx=0.45, rely=0.06, relwidth=0.5, relheight=0.55)tk.Label(panel, text="relx=0.45, rely=0.06\nrelwidth=0.5, relheight=0.55",         bg="#dbeafe").place(relx=0.5, rely=0.5, anchor="center")# anchor="center": the point (relx, rely) is the middle of the widget.tk.Label(root, text="relx=0.5, rely=0.75, anchor=center", bg="#fef08a",         padx=6, pady=6).place(relx=0.5, rely=0.75, anchor="center")# Both together: the bottom-right corner, then 16 pixels inwards.ttk.Button(root, text="OK").place(relx=1.0, rely=1.0, x=-16, y=-16, anchor="se")root.mainloop()

Para recordar

x e y son píxeles desde la esquina superior izquierda.
relx, rely, relwidth y relheight van de 0.0 a 1.0.
anchor elige qué punto del componente se coloca.
Las posiciones absolutas y relativas se pueden sumar.

Ejercicio

Coloque un botón «Back» en la esquina inferior izquierda, a 16 píxeles de los bordes, con rely=1.0 y anchor="sw".