ScalingLazyColumn

SimpleScalingLazyColumn

@Sampled
@Composable
fun SimpleScalingLazyColumn() {
    ScalingLazyColumn(modifier = Modifier.fillMaxWidth()) {
        item { ListHeader { Text(text = "List Header") } }
        items(20) {
            Chip(
                onClick = {},
                label = { Text("List item $it") },
                colors = ChipDefaults.secondaryChipColors(),
            )
        }
    }
}

ScalingLazyColumnEdgeAnchoredAndAnimatedScrollTo

@Sampled
@Composable
fun ScalingLazyColumnEdgeAnchoredAndAnimatedScrollTo() {
    val coroutineScope = rememberCoroutineScope()
    val itemSpacing = 6.dp
    // Line up the gap between the items on the center-line
    val scrollOffset = with(LocalDensity.current) { -(itemSpacing / 2).roundToPx() }
    val state =
        rememberScalingLazyListState(
            initialCenterItemIndex = 1,
            initialCenterItemScrollOffset = scrollOffset,
        )

    ScalingLazyColumn(
        modifier = Modifier.fillMaxWidth(),
        anchorType = ScalingLazyListAnchorType.ItemStart,
        verticalArrangement = Arrangement.spacedBy(itemSpacing),
        state = state,
        autoCentering = AutoCenteringParams(itemOffset = scrollOffset),
    ) {
        item { ListHeader { Text(text = "List Header") } }
        items(20) {
            Chip(
                onClick = {
                    coroutineScope.launch {
                        // Add +1 to allow for the ListHeader
                        state.animateScrollToItem(it + 1, scrollOffset)
                    }
                },
                label = { Text("List item $it") },
                colors = ChipDefaults.secondaryChipColors(),
            )
        }
    }
}

SimpleScalingLazyColumnWithSnap

@Sampled
@Composable
fun SimpleScalingLazyColumnWithSnap() {
    val state = rememberScalingLazyListState()
    ScalingLazyColumn(
        modifier = Modifier.fillMaxWidth(),
        state = state,
        flingBehavior = ScalingLazyColumnDefaults.snapFlingBehavior(state = state),
    ) {
        item { ListHeader { Text(text = "List Header") } }
        items(20) {
            Chip(
                onClick = {},
                label = { Text("List item $it") },
                colors = ChipDefaults.secondaryChipColors(),
            )
        }
    }
}

SimpleScalingLazyColumnWithContentPadding

@Sampled
@Composable
fun SimpleScalingLazyColumnWithContentPadding() {
    ScalingLazyColumn(
        modifier = Modifier.fillMaxWidth(),
        contentPadding = PaddingValues(top = 20.dp, bottom = 20.dp),
        autoCentering = null,
    ) {
        item { ListHeader { Text(text = "List Header") } }
        items(20) {
            Chip(
                onClick = {},
                label = { Text("List item $it") },
                colors = ChipDefaults.secondaryChipColors(),
            )
        }
    }
}