Y.A.M の雑記帳: 11月 2024

2024年11月9日土曜日

LazyRow で snap させる

SnapLayoutInfoProvider での snap 位置の指定方法が変わっていた。

左端に snap する場合、以前は


SnapLayoutInfoProvider(
    lazyListState = state,
    positionInLayout = { layoutSize, itemSize, beforeContentPadding, afterContentPadding, _->
       0 // 左端
    },
)

だったが、SnapPosition という interface が用意され、左端の場合は用意されている SnapPosition.Start を指定すれば良くなった。 Start の他に End と Center も用意されている。
任意の位置に snap したい場合は SnapPosition の実装を用意すればよい。


SnapLayoutInfoProvider(
    lazyListState = state,
    snapPosition = SnapPosition.Start,
)

全体のコードはこんな感じ。


@Composable
fun LazyRowSnapSample() {
    val state = rememberLazyListState()
    val snappingLayout = remember(state) {
        SnapLayoutInfoProvider(
            lazyListState = state,
            snapPosition = SnapPosition.Start,
        )
    }
    val flingBehavior = rememberSnapFlingBehavior(snappingLayout)

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