LazyListの要素の表示位置を調整する

LazyListがスナップされたときに要素を特定の位置に表示する方法の備忘録です。
Pagerをスワイプしたときみたいな動きをさせたい、ってかんじです。

デフォルトの挙動

普通のスクロールです。

中央に表示する

スクロールが止まったときに要素を中央に表示します。

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun AlignElementAtCenterInScreen() {
    val state = rememberLazyListState()
    val flingBehavior = rememberSnapFlingBehavior(state)
    LazyRow(
        contentPadding = PaddingValues(16.dp),
        state = state,
        flingBehavior = flingBehavior,
    ) {
        items(10) {
            Box(
                modifier = Modifier
                    .padding(8.dp)
                    .background(Color.LightGray)
                    .size(300.dp, 700.dp),
                contentAlignment = Alignment.Center,
            ) {
                Text(text = "$it")
            }
        }
    }
}

SnapFlingBehaviorを設定すると、中央表示してくれます。

左端に表示する

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun AlignElementAtStartInRow() {
    val state = rememberLazyListState()
    val positionInLayout: Density.(Int, Int, Int) -> Int = { _, _, _ ->
        // 左端に揃えるには0を返す
        0
    }
    val snapLayout = remember(state) { SnapLayoutInfoProvider(state, positionInLayout) }
    val flingBehavior = rememberSnapFlingBehavior(snapLayout)
    LazyRow(
        contentPadding = PaddingValues(16.dp),
        state = state,
        flingBehavior = flingBehavior,
    ) {
        items(10) {
            Box(
                modifier = Modifier
                    .padding(8.dp)
                    .background(Color.LightGray)
                    .size(300.dp, 700.dp),
                contentAlignment = Alignment.Center,
            ) {
                Text(text = "$it")
            }
        }
    }
}

SnapPositionInLayout をいじると、ポジションを調整できます。
0 で左揃えにしてくれます。

[中央に表示する]では、内部的にここが SnapPositionInLayout.CenterToCenter になっているようです。

SnapFlingBehavior