Columna

En pocas palabras

Pone las cosas una debajo de la otra, de arriba abajo.

Apila sus hijos en vertical, con spacing, padding, align en el eje cruzado y un max_width opcional. Como row, las listas anidadas se aplanan y se ignoran None/False.

pz.column · 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.row([
    pz.column([box("1"), box("2"), box("3")], spacing=8),
    pz.column([box("wide", w=160), box("center"), box("end")], spacing=8, align="center"),
    pz.column([box("top"), pz.vspace(), box("bottom")], spacing=8, height=170),
], spacing=32)

Cuándo usarlo

• Para formularios, listas, contenido de páginas y la raíz de casi cualquier view().

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.row([
    pz.column([box("1"), box("2"), box("3")], spacing=8),
    pz.column([box("wide", w=160), box("center"), box("end")], spacing=8, align="center"),
    pz.column([box("top"), pz.vspace(), box("bottom")], spacing=8, height=170),
], spacing=32)

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.

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.column([box("wide", w=160), 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.column([box("wide", w=160), 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.column([box("wide", w=160), box("B"), box("C")], spacing=8, align="end")

Opciones

spacing=16

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([box("1"), box("2")], spacing=16)

pz.vspace()

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([box("top"), pz.vspace(), box("bottom")], height=170)

padding=16

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.container(pz.column([box("1"), box("2")], spacing=8, padding=16),
             border_color=pz.theme.current().border, border_width=1, radius=8)

Eventos

Columna 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.column

column(
    children=None,
    *,
    spacing=0.0,
    padding=None,
    width=None,
    height=None,
    align=None,
    max_width=None,
    clip=False,
)

Apila los hijos en vertical.

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".
max_width	None	Ancho máximo en píxeles.
clip	False	Recorta el contenido que se sale de los límites.

Referencia completa →

Relacionados

FilaColoca los hijos en horizontal.

DesplazableDesplaza el contenido que no cabe.

EspacioHuecos fijos y separadores flexibles.