Flex

En pocas palabras

Reparte las cosas a lo largo de una línea: juntas, con el mismo espacio o con una que crece.

Coloca los hijos en un eje como el flexbox de CSS: justify en el eje principal (start, center, end, between, around, evenly), align en el eje cruzado, gap y wrap. pz.flex_item(child, grow=, basis=) hace crecer a un hijo o le da un tamaño base.

pz.flex · 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.flex([box("A"), box("B"), box("C")], justify="between", width=440),
    pz.flex([box("fixed"), pz.flex_item(box("grows", w="fill"), grow=1), box("fixed")], gap=8, width=440),
    pz.flex([box("A"), box("B")], justify="center", gap=8, width=440),
], spacing=14)

Nuevo

Este componente se añadió hace poco. Cuéntanos qué tal te funciona en el gestor de incidencias.

Cuándo usarlo

• Cuando row/column no bastan: reparto uniforme, elementos que crecen, tarjetas que saltan de línea.

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.flex([box("A"), box("B"), box("C")], justify="between", width=440),
    pz.flex([box("fixed"), pz.flex_item(box("grows", w="fill"), grow=1), box("fixed")], gap=8, width=440),
    pz.flex([box("A"), box("B")], justify="center", gap=8, width=440),
], 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.

Justificar

justify="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.flex([box("A"), box("B")], justify="start", gap=8, width=360)

justify="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.flex([box("A"), box("B")], justify="center", gap=8, width=360)

justify="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.flex([box("A"), box("B")], justify="end", gap=8, width=360)

justify="between"

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.flex([box("A"), box("B"), box("C")], justify="between", width=360)

justify="around"

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.flex([box("A"), box("B"), box("C")], justify="around", width=360)

justify="evenly"

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.flex([box("A"), box("B"), box("C")], justify="evenly", width=360)

Crecer

flex_item(grow=1)

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.flex([box("fixed"), pz.flex_item(box("grows", w="fill"), grow=1), box("fixed")], gap=8, width=360)

wrap=True

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.flex([box(str(i)) for i in range(1, 7)], gap=8, wrap=True, width=300)

Eventos

Flex 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.flex

flex(
    children=(),
    *,
    direction='row',
    justify='start',
    align='start',
    gap=0,
    wrap=False,
    padding=None,
    width=None,
    height=None,
)

Coloca los hijos a lo largo de un eje, como flexbox de CSS, con justify en el eje principal y align en el transversal. Usa pz.flex_item para que un hijo crezca o tenga un tamaño fijo.

Propiedad	Por defecto	Descripción
children	()	Los widgets, o pz.flex_item(...) para hijos con su propio tamaño.
direction	"row"	"row" o "column".
justify	"start"	"start", "center", "end", "between", "around" o "evenly". No tiene efecto si algún hijo crece.
align	"start"	Alineación transversal: "start", "center" o "end".
gap	0	Espacio entre hijos.
wrap	False	Pasa a nuevas líneas (solo filas con justify="start").
padding	None	Espacio alrededor de los hijos.
width	None	Ancho.
height	None	Alto.

Referencia completa →

pz.flex_item

flex_item(content, *, grow=1, basis=None, align=None)

Da tamaño a un hijo de pz.flex.

Propiedad	Por defecto	Descripción
content	obligatorio	El widget.
grow	1	Parte del espacio libre en el eje principal (0 mantiene su tamaño natural).
basis	None	Un tamaño fijo en píxeles en el eje principal, en lugar de crecer.
align	None	Alineación transversal de este hijo.

Referencia completa →

Relacionados

CuadrículaColumnas iguales, o pistas como en CSS con expansión.

FilaColoca los hijos en horizontal.