ListView, GridView & ScrollView

ListView

A scrollable list of widgets arranged linearly. Supports separators and pull-to-refresh.

Vertical ListView (with Refresh & Separator)

1

Item 1Subtitle here

2

Item 2Subtitle here

3

Item 3Subtitle here

4

Item 4Subtitle here

5

Item 5Subtitle here

6

Item 6Subtitle here

7

Item 7Subtitle here

8

Item 8Subtitle here

9

Item 9Subtitle here

10

Item 10Subtitle here

<script setup lang="ts">
import {
  Border,
  BoxDecoration,
  Colors,
  Container,
  Divider,
  EdgeInsets,
  ListTile,
  ListView,
  Text,
} from "fluekit";
import { ref } from "vue";

const items = ref(Array.from({ length: 10 }, (_, i) => `Item ${i + 1}`));

const handleRefresh = async () => {
  await new Promise((resolve) => setTimeout(resolve, 1500));
  const newItems = Array.from({ length: 3 }, (_, i) => `New Item ${Date.now()}-${i}`);
  items.value = [...newItems, ...items.value];
};
</script>

<template>
  <Container
    height="400"
    :decoration="BoxDecoration({ border: Border.all({ width: 1, color: '#eee' }) })"
  >
    <ListView
      :itemCount="items.length"
      :separator="true"
      :onRefresh="handleRefresh"
      :padding="EdgeInsets.all(10)"
    >
      <template #item="{ index }">
        <ListTile :title="items[index]" subtitle="Subtitle here">
          <template #leading>
            <Container width="40" height="40" alignment="center" :color="Colors.blue100">
              <Text>{{ index + 1 }}</Text>
            </Container>
          </template>
        </ListTile>
      </template>
      <template #separator>
        <Divider />
      </template>
    </ListView>
  </Container>
</template>

Horizontal ListView

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

<template>
  <SizedBox width="500" height="100">
    <ListView scrollDirection="horizontal" :padding="EdgeInsets.all(10)">
      <Container
        v-for="i in 10"
        :key="i"
        :width="80"
        :height="80"
        :color="i % 2 === 0 ? 'orange' : 'coral'"
        :margin="EdgeInsets.only({ right: 10 })"
        alignment="center"
      >
        <Text :data="`Item ${i}`" :style="TextStyle({ color: 'white' })" />
      </Container>
    </ListView>
  </SizedBox>
</template>

<script setup lang="ts">
import { Container, ListView, Text, SizedBox, TextStyle, EdgeInsets } from "fluekit";
</script>

GridView

A scrollable, 2D array of widgets.

Grid 1

Grid 2

Grid 3

Grid 4

Grid 5

Grid 6

Grid 7

Grid 8

Grid 9

<template>
  <SizedBox :height="200">
    <GridView
      :crossAxisCount="3"
      :mainAxisSpacing="10"
      :crossAxisSpacing="10"
      :padding="EdgeInsets.all(10)"
    >
      <Container v-for="i in 9" :key="i" :height="80" color="purple" alignment="center">
        <Text :data="`Grid ${i}`" :style="TextStyle({ color: 'white' })" />
      </Container>
    </GridView>
  </SizedBox>
</template>

<script setup lang="ts">
import { Container, GridView, Text, SizedBox, TextStyle, EdgeInsets } from "fluekit";
</script>

ScrollView

A box in which a single widget can be scrolled.

• ScrollView with Sticky Header

Header

Sticky Header

Scroll Item 1

Scroll Item 2

Scroll Item 3

Scroll Item 4

Scroll Item 5

Scroll Item 6

Scroll Item 7

Scroll Item 8

Scroll Item 9

Scroll Item 10

End of List

<template>
  <Container
    :height="300"
    :width="300"
    :decoration="BoxDecoration({ border: Border.all({ color: 'black', width: 1 }) })"
  >
    <ScrollView :padding="EdgeInsets.all(0)">
      <Column>
        <Container :height="50" color="lightgrey" alignment="center">
          <Text data="Header" />
        </Container>

        <Sticky :top="0" :zIndex="100">
          <Container :height="40" color="teal" alignment="center" :width="300">
            <Text
              data="Sticky Header"
              :style="TextStyle({ color: 'white', fontWeight: FontWeight.bold })"
            />
          </Container>
        </Sticky>

        <Container
          v-for="i in 10"
          :key="i"
          :height="60"
          color="lightblue"
          :margin="EdgeInsets.only({ top: 10, right: 10, bottom: 10, left: 10 })"
          alignment="center"
        >
          <Text :data="`Scroll Item ${i}`" />
        </Container>
        <Text data="End of List" :textAlign="TextAlign.center" />
      </Column>
    </ScrollView>
  </Container>
</template>

<script setup lang="ts">
import {
  Column,
  Container,
  ScrollView,
  Sticky,
  Text,
  TextAlign,
  BoxDecoration,
  Border,
  EdgeInsets,
  TextStyle,
  FontWeight,
} from "fluekit";
</script>

API

ListView

Props

Name	Type	Default	Description
scrollDirection	'vertical' | 'horizontal'	'vertical'	The direction to scroll.
padding	EdgeInsets	-	The amount of space by which to inset the child.
physics	'bouncing' | 'clamping' | 'never' | 'always'	'bouncing'	How the scroll view should respond to user input.
shrinkWrap	boolean	false	Whether the extent of the scroll view in the scrollDirection should be determined by the contents being viewed.
itemCount	number	-	The number of items in the list.
itemExtent	number | string	-	If non-null, forces the children to have the given extent in the scroll direction.
separator	boolean	false	Whether to show a separator between items.
clipBehavior	'none' | 'hardEdge' | 'antiAlias'	'hardEdge'	The content will be clipped (or not) according to this option.

Slots

Name	Description
default	The content when itemCount is not provided.
item	The builder for items when itemCount is provided. Props: { index: number }.
separator	The builder for separators. Props: { index: number }.

GridView

Props

Name	Type	Default	Description
scrollDirection	'vertical' | 'horizontal'	'vertical'	The direction to scroll.
padding	EdgeInsets	-	The amount of space by which to inset the child.
physics	'bouncing' | 'clamping' | 'never' | 'always'	'bouncing'	How the scroll view should respond to user input.
shrinkWrap	boolean	false	Whether the extent of the scroll view in the scrollDirection should be determined by the contents being viewed.
clipBehavior	'none' | 'hardEdge' | 'antiAlias'	'hardEdge'	The content will be clipped (or not) according to this option.
crossAxisCount	number	2	The number of children in the cross axis.
mainAxisSpacing	number | string	0	The number of logical pixels between each child along the main axis.
crossAxisSpacing	number | string	0	The number of logical pixels between each child along the cross axis.
childAspectRatio	number	1.0	The ratio of the cross-axis to the main-axis extent of each child.
itemCount	number	-	The number of items in the grid.

Slots

Name	Description
default	The content when itemCount is not provided.
item	The builder for items when itemCount is provided. Props: { index: number }.

ScrollView

Props

Name	Type	Default	Description
scrollDirection	'vertical' | 'horizontal'	'vertical'	The direction to scroll.
padding	EdgeInsets	-	The amount of space by which to inset the child.
physics	'bouncing' | 'clamping' | 'never' | 'always'	'bouncing'	How the scroll view should respond to user input.
clipBehavior	'none' | 'hardEdge' | 'antiAlias'	'hardEdge'	The content will be clipped (or not) according to this option.
reverse	boolean	false	Whether the scroll view scrolls in the reading direction.

Slots

Name	Description
default	The child widget.

Events

Name	Description
scroll	Emitted when scrolling. Payload: { scrollTop, scrollLeft, scrollHeight, scrollWidth }.
scrollStart	Emitted when scrolling starts.
scrollEnd	Emitted when scrolling ends.

Exposes

Name	Description
scrollTo	Function to scroll to a specific position.
scrollRef	The ref of the scroll container.