Picker

DualPicker

@OptIn(ExperimentalComposeUiApi::class)
@Composable
fun DualPicker() {
    var selectedColumn by remember { mutableStateOf(0) }
    val textStyle = MaterialTheme.typography.display1
    @Composable
    fun Option(column: Int, text: String) =
        Box(modifier = Modifier.fillMaxSize()) {
            Text(
                text = text,
                style = textStyle,
                color =
                    if (selectedColumn == column) MaterialTheme.colors.secondary
                    else MaterialTheme.colors.onBackground,
                modifier =
                    Modifier.align(Alignment.Center).wrapContentSize().pointerInteropFilter {
                        if (it.action == MotionEvent.ACTION_DOWN) selectedColumn = column
                        true
                    },
            )
        }
    Row(
        modifier = Modifier.fillMaxSize(),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.Center,
    ) {
        val hourState =
            rememberPickerState(initialNumberOfOptions = 12, initiallySelectedOption = 5)
        val hourContentDescription by remember {
            derivedStateOf { "${hourState.selectedOption + 1 } hours" }
        }
        Picker(
            readOnly = selectedColumn != 0,
            state = hourState,
            modifier = Modifier.size(64.dp, 100.dp),
            contentDescription = hourContentDescription,
            option = { hour: Int -> Option(0, "%2d".format(hour + 1)) },
        )
        Spacer(Modifier.width(8.dp))
        Text(text = ":", style = textStyle, color = MaterialTheme.colors.onBackground)
        Spacer(Modifier.width(8.dp))
        val minuteState =
            rememberPickerState(initialNumberOfOptions = 60, initiallySelectedOption = 0)
        val minuteContentDescription by remember {
            derivedStateOf { "${minuteState.selectedOption} minutes" }
        }
        Picker(
            readOnly = selectedColumn != 1,
            state = minuteState,
            modifier = Modifier.size(64.dp, 100.dp),
            contentDescription = minuteContentDescription,
            option = { minute: Int -> Option(1, "%02d".format(minute)) },
        )
    }
}

SimplePicker

@Composable
fun SimplePicker() {
    val items = listOf("One", "Two", "Three", "Four", "Five")
    val state = rememberPickerState(items.size)
    val contentDescription by remember { derivedStateOf { "${state.selectedOption + 1}" } }
    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        Text(
            modifier = Modifier.align(Alignment.TopCenter).padding(top = 10.dp),
            text = "Selected: ${items[state.selectedOption]}",
        )
        Picker(
            modifier = Modifier.size(100.dp, 100.dp),
            state = state,
            contentDescription = contentDescription,
        ) {
            Text(items[it])
        }
    }
}