Android: how to show only some elements in a lazyList?

user_16562950 0
Viewed 48

I want to create a timepicker in jetpack Compose like this:

enter image description here

To show the values ​​I am using a lazyList, but I cannot find an elegant method to show only 3 elements at a time better than: LazyColumn (modifier = Modifier.height(x.dp))

android-timepicker lazycolumn android-jetpack-compose android
1 Answers

You can show the element you want with color alpha with list index;

@Composable
fun ShowOnlySomeElementsInLazyColumn(
    items: List<String>
) {
    val lazyListState = rememberLazyListState()
    val firstVisibleIndex = lazyListState.firstVisibleItemIndex
    val centerIndex = firstVisibleIndex + 2
    LazyColumn(
        state = lazyListState,
        modifier = Modifier
            .fillMaxWidth()
            .height(100.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        items(items.size){index ->
            when(centerIndex){
                index -> {
                    Text(text = items[index])
                }
                index + 1 -> {
                    Text(text = items[index])
                }
                index - 1-> {
                    Text(text = items[index])
                }
                else -> {
                    Text(
                        text = items[index],
                        color = LocalContentColor.current.copy(alpha = 0f)
                    )
                }
            }
        }
    }
}
user_124415040
Related