Fila

En pocas palabras

Pone las cosas una al lado de la otra, de izquierda a derecha.

Coloca sus hijos en horizontal, con spacing entre ellos y align en el eje cruzado. wrap=True pasa a la línea siguiente los hijos que no caben. Las listas se aplanan y se ignoran None/False, así que cond and widget funciona.

pz.row · Categoría: Disposición · Referencia completa →

Vista previa

Código

box = lambda text, w=90, h=44: pz.container(ui.label(text), center=True, width=w, height=h, bg=pz.theme.current().element, radius=6)
pz.column([
    pz.row([box("A"), box("B"), box("C")], spacing=8),
    pz.row([box("Start"), pz.hspace(), box("End")], spacing=8, width=420),
    pz.row([box("tall", h=70), box("center"), box("end")], spacing=8, align="center"),
], spacing=14)

Cuándo usarlo

• Para barras, grupos de botones, filas de formulario: todo lo que va lado a lado.
• Separa elementos con pz.hspace() entre ellos.

Uso

import pyzed as pz
from pyzed import ui

box = lambda text, w=90, h=44: pz.container(ui.label(text), center=True, width=w, height=h, bg=pz.theme.current().element, radius=6)
pz.column([
    pz.row([box("A"), box("B"), box("C")], spacing=8),
    pz.row([box("Start"), pz.hspace(), box("End")], spacing=8, width=420),
    pz.row([box("tall", h=70), box("center"), box("end")], spacing=8, align="center"),
], spacing=14)

Variantes

Sobre estas capturas

Cada captura la graba pyzed mismo, fuera de pantalla a 2x, en One Dark o One Light según el tema de este sitio, y recortada al componente para que se vea a su tamaño real. El puntero pasa por encima, pulsa o escribe en él; un componente que no reacciona al puntero recorre algunos temas. Con movimiento reducido ves el primer fotograma. Abre Código bajo una captura para ver el fragmento que la dibuja; los nombres libres como on_save son tus propios callbacks.

Espaciado

spacing=0

Código

box = lambda text, w=90, h=44: pz.container(ui.label(text), center=True, width=w, height=h, bg=pz.theme.current().element, radius=6)
pz.row([box("A"), box("B"), box("C")])

spacing=8

Código

box = lambda text, w=90, h=44: pz.container(ui.label(text), center=True, width=w, height=h, bg=pz.theme.current().element, radius=6)
pz.row([box("A"), box("B"), box("C")], spacing=8)

spacing=24

Código

box = lambda text, w=90, h=44: pz.container(ui.label(text), center=True, width=w, height=h, bg=pz.theme.current().element, radius=6)
pz.row([box("A"), box("B"), box("C")], spacing=24)

Alineación cruzada

align="start"

Código

box = lambda text, w=90, h=44: pz.container(ui.label(text), center=True, width=w, height=h, bg=pz.theme.current().element, radius=6)
pz.row([box("tall", h=70), box("B"), box("C")], spacing=8, align="start")

align="center"

Código

box = lambda text, w=90, h=44: pz.container(ui.label(text), center=True, width=w, height=h, bg=pz.theme.current().element, radius=6)
pz.row([box("tall", h=70), box("B"), box("C")], spacing=8, align="center")

align="end"

Código

box = lambda text, w=90, h=44: pz.container(ui.label(text), center=True, width=w, height=h, bg=pz.theme.current().element, radius=6)
pz.row([box("tall", h=70), box("B"), box("C")], spacing=8, align="end")

Opciones

pz.hspace()

Código

box = lambda text, w=90, h=44: pz.container(ui.label(text), center=True, width=w, height=h, bg=pz.theme.current().element, radius=6)
pz.row([box("Start"), pz.hspace(), box("End")], width=320)

wrap=True

Código

pz.container(pz.row([ui.chip(t) for t in ["python", "rust", "iced", "desktop", "gui", "async", "themes"]],
                    spacing=6, wrap=True, line_spacing=6), width=260)

Ejemplos

Salto de línea

Con wrap=True los hijos pasan a nuevas líneas, como etiquetas.

Vista previa

Código

pz.container(pz.row([ui.chip(t) for t in ["python", "rust", "iced", "zed", "desktop", "gui",
                                             "async", "themes", "canvas", "markdown"]],
                     spacing=6, wrap=True, line_spacing=6), width=360)

Eventos

Fila no tiene eventos propios: muestra lo que le das. Como todo widget, también tiene los 18 eventos comunes (click, double_click, right_click, mouse_enter, drag, key_down, resize…), que se conectan con .on(...): mira Eventos y Eventos de cada componente.

Propiedades y API

pz.row

row(
    children=None,
    *,
    spacing=0.0,
    padding=None,
    width=None,
    height=None,
    align=None,
    clip=False,
    wrap=False,
    line_spacing=None,
)

Coloca los hijos en horizontal.

Propiedad	Por defecto	Descripción
children	None	Lista de hijos. Se aplanan listas anidadas y se ignoran None y False, así que puedes escribir cond and widget.
spacing	0.0	Separación entre hijos, en píxeles.
padding	None	Relleno interior: 8, (vertical, horizontal) o (arriba, derecha, abajo, izquierda).
width	None	Ancho: píxeles, "fill", "shrink" o "fill:N" (proporción).
height	None	Alto: píxeles, "fill", "shrink" o "fill:N" (proporción).
align	None	Alineación de los hijos en el eje cruzado: "start", "center" o "end".
clip	False	Recorta el contenido que se sale de los límites.
wrap	False	Ajuste de línea / pasa los hijos a una nueva fila cuando no caben.
line_spacing	None	Separación entre filas cuando wrap=True.

Referencia completa →

Relacionados

ColumnaApila los hijos en vertical.

FlexFlexbox de CSS: justify, align, gap, wrap y grow.

EspacioHuecos fijos y separadores flexibles.