ScrollField

Functions summary

Unit

@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

Artifact: androidx.compose.material3:material3

View Source

@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.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
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).semantics {
                contentDescription = "Select value between 1000 and 2000"
            },
        field = { index, isSelected ->
            val valueToShow = minVal + index
            Box(modifier = Modifier.fillMaxHeight(), contentAlignment = Alignment.Center) {
                Text(
                    text = valueToShow.toString(),
                    style =
                        if (isSelected) {
                            MaterialTheme.typography.displayLargeEmphasized
                        } 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.offset
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.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
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 = 100.dp, height = 120.dp).semantics {
                contentDescription = "Select hour"
            },
    )

    Text(
        text = ":",
        style = MaterialTheme.typography.displayLarge,
        color = MaterialTheme.colorScheme.onSurfaceVariant,
        textAlign = TextAlign.Center,
        modifier = Modifier.offset(y = (-4).dp),
    )

    ScrollField(
        state = minuteState,
        modifier =
            Modifier.size(width = 100.dp, height = 120.dp).semantics {
                contentDescription = "Select minute"
            },
    )
}

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.