Compose Layout, Lists & Modifiers Flashcards
UI › Compose UI
- What are Column, Row, and Box used for, and which arrangement/alignment params configure them?
- Column stacks children vertically (verticalArrangement, horizontalAlignment); Row lays them horizontally (horizontalArrangement, verticalAlignment); Box stacks children on the z-axis with contentAlignment plus per-child Modifier.align.
- Why does Modifier.padding(16.dp).background(Color.Red) look different from Modifier.background(Color.Red).padding(16.dp)?
- Modifiers apply outside-in. padding-then-background pads first, so the red fills only the inner area (padding stays transparent). background-then-padding paints the full element red, then the padding is inset inside the red region.
- Why prefer LazyColumn over a Column with Modifier.verticalScroll for long lists?
- LazyColumn only composes, measures, and lays out items in (and near) the viewport, recycling compositions as you scroll. A scrollable Column composes every child eagerly, which is slow and memory-heavy for large datasets.
- Why supply a stable key in items(list, key = { it.id }) of a lazy list?
- Keys let Compose track item identity across data changes, preserving remembered/rememberSaveable state and scroll position on reorder, and they are required for animateItem(). Keys must be Bundle-compatible so state survives Activity recreation.
- What does the contentType parameter on lazy list items do?
- It tags each item with a type so Compose only reuses a scrolled-off item's composition for a new item of the same type. In heterogeneous lists this improves recycling efficiency by avoiding incompatible reuse.
- Difference between LazyColumn's contentPadding and a Modifier.padding on the LazyColumn?
- contentPadding pads inside the scroll container: the first item gets top padding and the last gets bottom padding, but content scrolls through the padded edges. Modifier.padding shrinks the whole viewport, clipping content at the padded border.
- What is a CompositionLocal, and when do you use compositionLocalOf vs staticCompositionLocalOf?
- It's an implicit, tree-scoped way to pass data (themes, density, etc.) to descendants without threading parameters. Use compositionLocalOf when the value changes and only readers should recompose; use staticCompositionLocalOf for rarely-changing values, which recomposes the whole provided subtree but is cheaper to read.
- What is Modifier.weight in a Row/Column, and why can't you use it inside a Box?
- weight distributes remaining space among children proportionally and is defined on RowScope/ColumnScope, so it only compiles as a direct child of a Row or Column. Box has no weight concept, so the modifier isn't in its scope.
- Why does nesting a LazyColumn inside a verticalScroll Column crash, and how do you fix it?
- Both scroll the same axis, so the parent offers infinite height constraints and the lazy list cannot measure, throwing IllegalStateException. Fix it by flattening into one LazyColumn (using item/items for the extra content) or giving the inner list a bounded height.