在 LazyRow 中查找中间可见项

Question

我有一个包含数字的可滚动 LazyRow，我希望自动选择中间可见的数字，如下所示：

如何找到 LazyRow 中中间可见的项目？

代码：

@Composable
fun ScrollableAgeSelector(
    modifier: Modifier = Modifier
) {

    val numbers = (12..100).toList()

 
    LazyRow(
        modifier = modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.spacedBy(20.dp)
    ) {
        items(numbers.size) { index ->
            val num = numbers[index]
            NumberItem(
                num = num,
                selectedNum = 22
            )
        }
    }
}

Answer 1

您可以计算哪个项目位于中心。

就像是：

    val state = rememberLazyListState()
    LazyRow(state = state) {
        itemsIndexed(itemsList) { index, item ->
            MyItem(
                state,
                index,
                //content = 
            )
        }
    }

和：

@Composable
fun MyItem(state: LazyListState, index: Int, /* content */) {

    val borderColor by remember {
        derivedStateOf {

            val layoutInfo = state.layoutInfo
            val visibleItemsInfo = layoutInfo.visibleItemsInfo
            val itemInfo = visibleItemsInfo.firstOrNull { it.index == index}

            itemInfo?.let {

                val delta = it.size/2 //use your custom logic
                val center = state.layoutInfo.viewportEndOffset / 2
                val childCenter = it.offset + it.size / 2
                val target = childCenter - center
                if (target in -delta..delta) return@derivedStateOf Red
            }
            Transparent
        }
    }

    Box(
        Modifier
            .padding(4.dp)
            .width(65.dp)
            .height(120.dp)
            .background(Yellow)
            .border(1.dp, borderColor),
        contentAlignment = Alignment.Center
    ){
        //content
    }

}