Hello :slightly_smiling_face: I am working on a Wear Compose project. I am a beginner confused about...

# compose-wear

[PeterZ]

Hello 🙂
I am working on a Wear Compose project. I am a beginner confused about the ScalingLazyColumn mechanics.
More precisely ScalingLazyColumn parameters: anchorType, autoCentering and flingBehavior . I thought the snapping behavior (described in anchorType docs) would do the same as flingBehavior (ScalingLazyColumnDefaults.snapFlingBehavior).
What is the difference between those two and why don't they both work the same?
Also does autoCentering work only for centering of the first and the last element in a ScalingLazyColumn?
Thanks

[John Nichol]

anchorType determines whether the Top or the Center of an item is used for snapping if enabled and autoCentering.

autoCentering is used to auto calculate the padding (top and bottom) needed to make sure the list items can be correctly positioned. By default the SLC will add correct padding for the 2nd (index == 1) and last items to be able to be positioned in the center of the screen.

[John Nichol]

The default of the 2nd item is because our UX guidance is that you have a heading item as the first (index = 0) item of the list

[John Nichol]

and that you don't typically want to move that to the center of the screen

[PeterZ]

Thanks John for the answer. Is there a quick way to enable snapping? Or where to look at for enabling it?

[John Nichol]

yes - really easy 1 sec

[PeterZ]

Is it flingBehavior (ScalingLazyColumnDefaults.snapFlingBehavior)?

[John Nichol]

yes

@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()
            )
        }
    }
}

[PeterZ]

Ok great! Thank you 🙂

[John Nichol]

no problem