ScrollView & ListView

Scrollable containers for content that exceeds the available space.

ScrollView

A scrollable container for a single child widget (like Flutter’s SingleChildScrollView).

Basic Usage

ScrollView(
    Column([]any{
        Text("Item 1"),
        Text("Item 2"),
        // ... many items
    }),
)

Options

Scroll Direction Values

Examples

// Vertical scrolling (default)
ScrollView(
    Column([]any{
        Text("Line 1"),
        Text("Line 2"),
        Text("Line 3"),
    }),
)

// Horizontal scrolling
ScrollView(
    Row([]any{
        Container(Text("Card 1"), Background(Blue)),
        Container(Text("Card 2"), Background(Green)),
        Container(Text("Card 3"), Background(Red)),
    }),
    Direction(ScrollHorizontal),
)

// With unique ID (for multiple scroll views)
ScrollView(content, ScrollID("scroll-1"))
ScrollView(otherContent, ScrollID("scroll-2"))

ListView

An optimized scrollable list for many items. Unlike ScrollView, ListView efficiently renders only visible items.

Basic Usage

ListView([]Widget{
    Text("Item 1"),
    Text("Item 2"),
    Text("Item 3"),
})

Options

Examples

// Basic list
ListView([]Widget{
    Text("Item 1"),
    Text("Item 2"),
    Text("Item 3"),
})

// List with styled items
var items []Widget
for i := 1; i <= 100; i++ {
    items = append(items, Container(
        Padding(InsetsAll(16), Text(fmt.Sprintf("Item %d", i))),
        Background(Gray100),
    ))
}
ListView(items, ScrollID("long-list"))

// Horizontal list
ListView(cards, Direction(ScrollHorizontal), ScrollID("card-list"))

When to Use Which