Lección 17 · 17 de 20
Barras de desplazamiento · tkinter
Una ttk.Scrollbar unida a una Listbox y a un Text de tkinter: yview, xview y yscrollcommand, en vertical y en horizontal.
Una barra de desplazamiento (ttk.Scrollbar) no se mueve sola: hay que unirla con su componente en los dos sentidos. `command=items.yview` hace que, al arrastrar la barra, la lista se desplace.
`items.config(yscrollcommand=bar.set)` es el otro sentido: cuando la lista se desplaza (con la rueda del ratón, por ejemplo), avisa a la barra para que mueva su cursor. Sin esta línea, la barra no sabría por dónde va la lista.
La barra se coloca antes que la lista, con side="right", para que tenga su sitio asegurado. La lista tiene 40 elementos y no caben: yview_moveto(0.3) la desplaza al 30 % al arrancar, y selection_set(15) deja elegido «Item 16».
El Text lleva wrap="none", así que las líneas largas no se parten y hace falta una barra horizontal (orient="horizontal", con xview y xscrollcommand). Las tres piezas se colocan con grid: el texto en la celda (0, 0), la barra vertical a su derecha y la horizontal debajo; los pesos hacen que el texto crezca.
La barra de desplazamiento no está en la paleta de DMarlon Studio; se puede añadir a mano en la pestaña Código, unida a una Lista o a un Texto largo del formulario.
Código · main.py
import tkinter as tkfrom tkinter import ttkroot = tk.Tk()root.title("Scrollbars")root.geometry("580x320")# Left: a Listbox with 40 items and a vertical scrollbar.left = ttk.Frame(root, padding=10)left.pack(side="left", fill="y")items = tk.Listbox(left, width=16, height=10)bar = ttk.Scrollbar(left, orient="vertical", command=items.yview)items.config(yscrollcommand=bar.set) # the two talk to each otherbar.pack(side="right", fill="y")items.pack(side="left", fill="y")items.insert("end", *[f"Item {n:02d}" for n in range(1, 41)])items.yview_moveto(0.3) # start scrolled down a littleitems.selection_set(15)# Right: a Text without wrapping, with vertical and horizontal bars.right = ttk.Frame(root, padding=10)right.pack(side="left", fill="both", expand=True)right.rowconfigure(0, weight=1)right.columnconfigure(0, weight=1)text = tk.Text(right, wrap="none", width=30, height=10)ys = ttk.Scrollbar(right, orient="vertical", command=text.yview)xs = ttk.Scrollbar(right, orient="horizontal", command=text.xview)text.config(yscrollcommand=ys.set, xscrollcommand=xs.set)text.grid(row=0, column=0, sticky="nsew")ys.grid(row=0, column=1, sticky="ns")xs.grid(row=1, column=0, sticky="ew")for n in range(1, 31): text.insert("end", f"Line {n}: " + "too long to fit, scroll sideways " * 2 + "\n")root.mainloop()Para recordar
command=widget.yviewmueve el componente al arrastrar la barra.yscrollcommand=barra.setmueve la barra cuando se desplaza el componente.- Para la horizontal:
orient="horizontal",xviewyxscrollcommand. yview_moveto(fracción)desplaza por código.
Ejercicio
Añada una barra horizontal a la lista y escriba elementos más largos que su ancho para comprobar que funciona.