Cuadrícula

En pocas palabras

Ordena las cosas en filas y columnas, como azulejos en una pared.

Coloca los hijos en una cuadrícula. Con columns=3 las columnas son iguales, y max_width mete tantas como quepan. Con listas de pistas (columns=[200, "1fr", "auto"]) funciona como un grid de CSS, y pz.cell(child, column=, row=, column_span=, row_span=) coloca un hijo a mano.

pz.grid · 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.container(pz.grid([box(str(i), w="fill") for i in range(1, 9)], columns=4, spacing=8), width=440)

Nuevo

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

Cuándo usarlo

• Para galerías, dashboards y maquetas de página con cabecera, barra lateral y contenido.

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.container(pz.grid([box(str(i), w="fill") for i in range(1, 9)], columns=4, spacing=8), width=440)

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.

Columnas

columns=2

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.grid([box(str(i), w="fill") for i in range(1, 5)], columns=2, spacing=8, height=44), width=220)

columns=3

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.grid([box(str(i), w="fill") for i in range(1, 7)], columns=3, spacing=8, height=44), width=300)

columns=4

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.grid([box(str(i), w="fill") for i in range(1, 9)], columns=4, spacing=8, height=44), width=380)

Pistas

columns=[100, "1fr"]

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.grid([box("100 px", w="fill"), box("1fr", w="fill")], columns=[100, "1fr"], spacing=8),
             width=340, height=44)

column_span=2

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.grid([pz.cell(box("header", w="fill"), column=0, row=0, column_span=2),
                      pz.cell(box("a", w="fill"), column=0, row=1),
                      pz.cell(box("b", w="fill"), column=1, row=1)], columns=["1fr", "1fr"], spacing=8),
             width=300, height=96)

Ejemplos

Pistas y expansión

Los números son píxeles, "1fr" reparte el espacio libre y "auto" se ajusta al contenido.

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.container(pz.grid([
    pz.cell(box("header", w="fill"), column=0, row=0, column_span=2),
    pz.cell(box("sidebar", w="fill", h="fill"), column=0, row=1),
    pz.cell(box("content", w="fill", h="fill"), column=1, row=1),
], columns=[120, "1fr"], rows=[44, 110], spacing=8), width=440)

Eventos

Cuadrícula 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.grid

grid(
    children=None,
    *,
    columns=None,
    rows=None,
    max_width=None,
    spacing=0.0,
    row_spacing=None,
    height=None,
    aspect_ratio=None,
    width=None,
    padding=None,
    align_x=None,
    align_y=None,
)

Coloca los hijos en una rejilla. Con columns=3 las columnas son iguales (o max_width mete tantas como quepan). Con listas de pistas (columns=[200, "1fr", "auto"], rows=...) funciona como un grid de CSS: los números son píxeles, "auto" se ajusta al contenido y "<n>fr" reparte el espacio que sobra. Envuelve los hijos en pz.cell para colocarlos y hacer que ocupen varias celdas; el resto llena las celdas libres fila a fila. Ver Layout.

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.
columns	None	Número de columnas iguales, o pistas: una lista ([200, "1fr", "auto"]) o un texto ("200 1fr auto").
rows	None	Pistas de las filas, como columns. Las filas que no están en la lista son "auto".
max_width	None	Mete tantas columnas de como mucho este ancho como quepan (solo con columns=<int>).
spacing	0.0	Espacio entre celdas.
row_spacing	None	Espacio entre filas, si es distinto.
height	None	Con columns=<int>: alto de cada fila. Con pistas: alto de la rejilla.
aspect_ratio	None	Mantiene las celdas en esta proporción ancho/alto (solo con columns=<int>).
width	None	Con columns=<int>: píxeles. Con pistas: ancho de la rejilla (por defecto "fill").
padding	None	Espacio alrededor de las celdas.
align_x	None	Alineación horizontal de cada elemento en su celda: "start", "center", "end".
align_y	None	Alineación vertical de cada elemento en su celda.

Referencia completa →

pz.cell

cell(
    content,
    *,
    column=None,
    row=None,
    column_span=1,
    row_span=1,
    align_x=None,
    align_y=None,
)

Coloca un hijo en una rejilla con pistas: su columna y fila (desde 0) y cuántas ocupa. Los hijos sin celda llenan las celdas libres fila a fila. Fuera de una rejilla es solo el hijo.

Propiedad	Por defecto	Descripción
content	obligatorio	El widget.
column	None	Índice de columna (desde 0).
row	None	Índice de fila (desde 0).
column_span	1	Columnas que ocupa.
row_span	1	Filas que ocupa.
align_x	None	Alineación horizontal en la celda.
align_y	None	Alineación vertical en la celda.

Referencia completa →

Relacionados

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

FilaColoca los hijos en horizontal.

ColumnaApila los hijos en vertical.