¿Qué es el componente ScrollWidget?

ScrollWidget crea un área desplazable que envuelve a un widget hijo: con soporte para scroll vertical, horizontal, control programático y estilos personalizados.

¿Cómo se utiliza el ScrollWidget?

Envuelve cualquier widget para hacerlo desplazable:

import ScrollWidget, { ScrollStyle, ScrollController } from "@seigenta/TypesCraft/widgets/scrollWidget";
import { Color, Size } from "@seigenta/TypesCraft/widgets/utils";

// Uso básico con scroll vertical
new ScrollWidget({
    child: miWidgetLargo,
    style: new ScrollStyle({
        height: Size.px(300)
    })
})
          

Propiedades del componente

ScrollWidget acepta estas propiedades:

• child: Widget - Widget hijo que será desplazable (requerido)
• style?: ScrollStyle - Estilo base del área de scroll
• styleHover?: ScrollStyle - Estilo en estado hover
• controller?: ScrollController - Controlador para manejar scroll programáticamente

ScrollStyle - Propiedades de estilo

Configura el comportamiento y apariencia del scroll:

• scrollDirection?: ScrollDirection - Dirección del scroll (vertical/horizontal)
• padding?: EdgeSize - Relleno interno
• backgroundColor?: Color - Color de fondo
• width?: Size - Ancho del área
• height?: Size - Alto del área

Ejemplos de uso

Ejemplo básico con scroll vertical:

new ScrollWidget({
    child: new Column({
        children: [/* widgets largos */]
    }),
    style: new ScrollStyle({
        height: Size.px(400),
        padding: EdgeSize.all(Size.px(10)),
        backgroundColor: Color.hex("#f5f5f5")
    })
})
          

Ejemplo con scroll horizontal y controlador:

const scrollController = new ScrollController();

new ScrollWidget({
    child: new Row({
        children: [/* widgets anchos */]
    }),
    style: new ScrollStyle({
        scrollDirection: ScrollDirection.horizontal(),
        width: Size.px(500),
        height: Size.px(100)
    }),
    controller: scrollController
})

// Scroll programático
scrollController.scrollTo({ left: 200 });
          

Comportamiento

El ScrollWidget:

• Crea un área desplazable que envuelve cualquier widget hijo
• Soporta scroll vertical u horizontal
• Permite control programático mediante ScrollController
• Genera estilos CSS eficientes y reutilizables
• Mantiene el rendimiento con contenido largo