ScrollField

Functions summary

Unit
@ExperimentalMaterial3ExpressiveApi
@Composable
ScrollField(
    state: ScrollFieldState,
    modifier: Modifier,
    colors: ScrollFieldColors,
    field: @Composable (index: Int, selected: Boolean) -> Unit
)

ScrollField's can be used to provide a more interactive way to select a time or other numerical value.
Cmn

Functions

ScrollField

Cmn 
@ExperimentalMaterial3ExpressiveApi
@Composable
fun ScrollField(
    state: ScrollFieldState,
    modifier: Modifier = Modifier,
    colors: ScrollFieldColors = ScrollFieldDefaults.colors(),
    field: @Composable (index: Int, selected: Boolean) -> Unit = { index, selected ->
        ScrollFieldDefaults.Item(index = index, selected = selected, colors = colors)
    }
): Unit

ScrollField's can be used to provide a more interactive way to select a time or other numerical value.

Generic ScrollField for scrollable numerical selection:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.ScrollField
import androidx.compose.material3.Text
import androidx.compose.material3.rememberScrollFieldState
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

val minVal = 1000
val maxVal = 2000
val itemCount = (maxVal - minVal) + 1

val state = rememberScrollFieldState(itemCount = itemCount, index = 0)
var selectedValue by remember { mutableIntStateOf(minVal) }

Row(
    modifier =
        Modifier.background(
                MaterialTheme.colorScheme.surfaceContainerHighest,
                RoundedCornerShape(28.dp),
            )
            .padding(12.dp),
    verticalAlignment = Alignment.CenterVertically,
    horizontalArrangement = Arrangement.spacedBy(8.dp),
) {
    ScrollField(
        state = state,
        modifier = Modifier.size(width = 192.dp, height = 160.dp),
        field = { index, isSelected ->
            val valueToShow = minVal + index
            Box(modifier = Modifier.fillMaxHeight(), contentAlignment = Alignment.Center) {
                Text(
                    text = valueToShow.toString(),
                    style =
                        if (isSelected) {
                            MaterialTheme.typography.displayLarge
                        } else {
                            MaterialTheme.typography.displayMedium
                        },
                    color =
                        if (isSelected) {
                            MaterialTheme.colorScheme.onSurface
                        } else {
                            MaterialTheme.colorScheme.outline
                        },
                )
            }
        },
    )
}

ScrollField for time selection:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.ScrollField
import androidx.compose.material3.Text
import androidx.compose.material3.rememberScrollFieldState
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp

val hourCount = 24
val minuteCount = 60

val hourState = rememberScrollFieldState(itemCount = hourCount, index = 12)
val minuteState = rememberScrollFieldState(itemCount = minuteCount, index = 30)

var selectedHour by remember { mutableIntStateOf(12) }
var selectedMinute by remember { mutableIntStateOf(30) }

Row(
    modifier =
        Modifier.background(
                MaterialTheme.colorScheme.surfaceContainerHighest,
                RoundedCornerShape(28.dp),
            )
            .padding(12.dp),
    verticalAlignment = Alignment.CenterVertically,
    horizontalArrangement = Arrangement.spacedBy(8.dp),
) {
    ScrollField(state = hourState, modifier = Modifier.size(width = 80.dp, height = 160.dp))

    Text(
        text = ":",
        style = MaterialTheme.typography.displayLarge,
        color = MaterialTheme.colorScheme.onSurfaceVariant,
        textAlign = TextAlign.Center,
    )

    ScrollField(state = minuteState, modifier = Modifier.size(width = 80.dp, height = 160.dp))
}
Parameters
state: ScrollFieldState

the state object to be used to control or observe the pager's state.
modifier: Modifier = Modifier

the Modifier to be applied to the ScrollField container.
colors: ScrollFieldColors = ScrollFieldDefaults.colors()

ScrollFieldColors that will be used to resolve the colors used for this ScrollField in different states.
field: @Composable (index: Int, selected: Boolean) -> Unit = { index, selected -> ScrollFieldDefaults.Item(index = index, selected = selected, colors = colors) }

the composable used to render each item in the wheel.