Connected
A headless grid of connected list items laid out in equal-width cells across a fixed number of columns (Structure layer).
Items are chunked into rows of columns items. Within each row every item receives equal weight and stretches to the tallest sibling. Outline edges are drawn on all four sides of every cell; corner radii are computed automatically from each item's absolute index so that only the four outer corners of the entire grid are rounded. When the final row has fewer items than columns, the remaining items stretch via equal weight to fill the full row width. The actual rendering is delegated to the listItem lambda, which receives the pre-computed connection geometry.
This component makes no visual or interactive decisions — no colors, elevation, or animation. It is the headless backbone that the Stylish Finish counterpart StylishConnectedListItemGrid consumes by supplying a styled listItem. Supply your own listItem to render a custom skin over the same connected geometry.
Parameters
The list of StylishConnectedListItem data objects describing each cell.
The number of equal-width columns in the grid. Must be greater than zero.
The gap between adjacent items both horizontally and vertically. Defaults to StylishTheme.dimensions.connectedSpacing (3 dp).
The radius applied to the outer corners. Defaults to StylishTheme.dimensions.connectedCornerRadius (12 dp).
A composable lambda that renders a single cell. Receives the item data, a modifier (including weight and fill-max-height), the connected Shape, the outline ConnectedEdges, and the outline ConnectedCorners.