List and Grid Overview
Many applications require scrollable views to display collections of similar items, such as images, videos, music, news, or products. Depending on the layout requirements, these scenarios can be implemented using List, Grid, or WaterFlow. For circular screens, ArcList is recommended.
List
The List component is ideal for single-column or multi-column layouts where columns have uniform widths. Common use cases include contact lists, music playlists, and shopping lists.
In scenarios like live comment feeds or instant messaging, where new data is appended to the bottom, the list should automatically scroll upward to reveal newly added items. This behavior can be enabled by configuring the List component to stack from the end.
Grid
A grid layout organizes items into rows and columns, allowing flexible positioning by specifying the target cell for each item. Typical use cases include image galleries, calendars, and calculators.
To support items that span multiple rows or columns, configure the grid using GridLayoutOptions.
Waterfall Flow
Waterfall flow is a multi-column layout where columns have equal width but items can vary in height. It is well-suited for staggered layouts such as image feeds, video previews, and product recommendations.
To support mixed layouts with varying column counts on the same page, use WaterFlowSections.
Arc List
An arc list is a specialized list designed for circular screens. It supports automatic scaling of items as they approach the top or bottom edges of the display.
Feature Comparison
| Feature | List | Grid | WaterFlow | ArcList |
|---|---|---|---|---|
| General scrolling capability | Supported | Supported | Supported | Supported |
| Item grouping | ListItemGroup | GridLayoutOptions | WaterFlowSections | Not supported |
| Sticky headers | Supported via the sticky attribute | Not supported | Not supported | Not supported |
| Drag-and-drop sorting | Supported with drag-and-drop sorting, including animations and automatic scrolling when dragged to the edge | Supported with built-in animations (only when all items occupy 1 row and 1 column), and no automatic scrolling when dragged to the edge | Not supported | Not supported |
| Swipe actions | Supported via the swipeAction attribute | Not supported | Not supported | Not supported |
| Item spacing | Supported | Supported | Supported | Supported |
| Item dividers | Supported | Not supported | Not supported | Not supported |