Function

snapFlingBehavior

A TargetedFlingBehavior that performs snapping to a given position in a layout.

SnapFlingBehaviorSimpleSample

@Sampled
@Composable
fun SnapFlingBehaviorSimpleSample() {
    val state = rememberLazyListState()

    LazyRow(
        modifier = Modifier.fillMaxSize(),
        verticalAlignment = Alignment.CenterVertically,
        state = state,
        flingBehavior = rememberSnapFlingBehavior(lazyListState = state),
    ) {
        items(200) {
            Box(
                modifier =
                    Modifier.height(400.dp).width(200.dp).padding(8.dp).background(Color.Gray),
                contentAlignment = Alignment.Center,
            ) {
                Text(it.toString(), fontSize = 32.sp)
            }
        }
    }
}

SnapFlingBehaviorCustomizedSample

@Sampled
@Composable
fun SnapFlingBehaviorCustomizedSample() {
    val state = rememberLazyListState()

    // If you'd like to customize either the snap behavior or the layout provider
    val snappingLayout = remember(state) { SnapLayoutInfoProvider(state) }
    val flingBehavior = rememberSnapFlingBehavior(snappingLayout)

    LazyRow(
        modifier = Modifier.fillMaxSize(),
        verticalAlignment = Alignment.CenterVertically,
        state = state,
        flingBehavior = flingBehavior,
    ) {
        items(200) {
            Box(
                modifier =
                    Modifier.height(400.dp).width(200.dp).padding(8.dp).background(Color.Gray),
                contentAlignment = Alignment.Center,
            ) {
                Text(it.toString(), fontSize = 32.sp)
            }
        }
    }
}
Jetpack Compose beyond MaterialFree components, screens and templates for apps that don’t look like Google’s. Copy them into your app, or let your coding agent add them.Browse for free

Content updated: