Finestre di dialogo per i selettori dell'ora

I selettori dell'ora vengono spesso visualizzati nelle finestre di dialogo. Puoi usare un modello di attribuzione minima implementazione di una finestra di dialogo oppure è possibile implementare una finestra di dialogo personalizzata con maggiore flessibilità.

Per ulteriori informazioni sulle finestre di dialogo in generale, incluso come utilizzare il selettore dell'ora consulta la guida ai selettori dell'ora.

Esempio di base

Il modo più semplice per creare una finestra di dialogo per il selettore dell'ora è creare un componibile che implementi AlertDialog. Il seguente snippet fornisce un esempio di finestra di dialogo relativamente minima che utilizza questo approccio:

@Composable
fun DialWithDialogExample(
    onConfirm: (TimePickerState) -> Unit,
    onDismiss: () -> Unit,
) {
    val currentTime = Calendar.getInstance()

    val timePickerState = rememberTimePickerState(
        initialHour = currentTime.get(Calendar.HOUR_OF_DAY),
        initialMinute = currentTime.get(Calendar.MINUTE),
        is24Hour = true,
    )

    TimePickerDialog(
        onDismiss = { onDismiss() },
        onConfirm = { onConfirm(timePickerState) }
    ) {
        TimePicker(
            state = timePickerState,
        )
    }
}

@Composable
fun TimePickerDialog(
    onDismiss: () -> Unit,
    onConfirm: () -> Unit,
    content: @Composable () -> Unit
) {
    AlertDialog(
        onDismissRequest = onDismiss,
        dismissButton = {
            TextButton(onClick = { onDismiss() }) {
                Text("Dismiss")
            }
        },
        confirmButton = {
            TextButton(onClick = { onConfirm() }) {
                Text("OK")
            }
        },
        text = { content() }
    )
}
TimePickers.kt

Osserva i punti chiave in questo snippet:

1. Il componibile DialWithDialogExample aggrega TimePicker in una finestra di dialogo.
2. TimePickerDialog è un componibile personalizzato che crea un AlertDialog con i seguenti parametri:
   • onDismiss: una funzione chiamata quando l'utente chiude la finestra di dialogo (tramite il pulsante per ignorare o la navigazione indietro).
   • onConfirm: una funzione richiamata quando l'utente fa clic su "OK" .
   • content: un componibile che mostra il selettore dell'ora all'interno della finestra di dialogo.
3. Il AlertDialog include:
   • Un pulsante Chiudi con l'etichetta "Ignora".
   • Un pulsante di conferma con l'etichetta "OK".
   • I contenuti del selettore dell'ora passati come parametro text.
4. DialWithDialogExample inizializza TimePickerState con il valore l'ora corrente e la passa sia a TimePicker che a onConfirm personalizzata.

di Gemini Advanced.

Figura 1. un selettore dell'ora in un oggetto AlertDialog.

Esempio avanzato

Questo snippet illustra un'implementazione avanzata di un orario personalizzabile del selettore in Jetpack Compose.

@Composable
fun AdvancedTimePickerExample(
    onConfirm: (TimePickerState) -> Unit,
    onDismiss: () -> Unit,
) {

    val currentTime = Calendar.getInstance()

    val timePickerState = rememberTimePickerState(
        initialHour = currentTime.get(Calendar.HOUR_OF_DAY),
        initialMinute = currentTime.get(Calendar.MINUTE),
        is24Hour = true,
    )

    /** Determines whether the time picker is dial or input */
    var showDial by remember { mutableStateOf(true) }

    /** The icon used for the icon button that switches from dial to input */
    val toggleIcon = if (showDial) {
        Icons.Filled.EditCalendar
    } else {
        Icons.Filled.AccessTime
    }

    AdvancedTimePickerDialog(
        onDismiss = { onDismiss() },
        onConfirm = { onConfirm(timePickerState) },
        toggle = {
            IconButton(onClick = { showDial = !showDial }) {
                Icon(
                    imageVector = toggleIcon,
                    contentDescription = "Time picker type toggle",
                )
            }
        },
    ) {
        if (showDial) {
            TimePicker(
                state = timePickerState,
            )
        } else {
            TimeInput(
                state = timePickerState,
            )
        }
    }
}

@Composable
fun AdvancedTimePickerDialog(
    title: String = "Select Time",
    onDismiss: () -> Unit,
    onConfirm: () -> Unit,
    toggle: @Composable () -> Unit = {},
    content: @Composable () -> Unit,
) {
    Dialog(
        onDismissRequest = onDismiss,
        properties = DialogProperties(usePlatformDefaultWidth = false),
    ) {
        Surface(
            shape = MaterialTheme.shapes.extraLarge,
            tonalElevation = 6.dp,
            modifier =
            Modifier
                .width(IntrinsicSize.Min)
                .height(IntrinsicSize.Min)
                .background(
                    shape = MaterialTheme.shapes.extraLarge,
                    color = MaterialTheme.colorScheme.surface
                ),
        ) {
            Column(
                modifier = Modifier.padding(24.dp),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(bottom = 20.dp),
                    text = title,
                    style = MaterialTheme.typography.labelMedium
                )
                content()
                Row(
                    modifier = Modifier
                        .height(40.dp)
                        .fillMaxWidth()
                ) {
                    toggle()
                    Spacer(modifier = Modifier.weight(1f))
                    TextButton(onClick = onDismiss) { Text("Cancel") }
                    TextButton(onClick = onConfirm) { Text("OK") }
                }
            }
        }
    }
}
TimePickers.kt

Osserva i punti chiave in questo snippet:

1. Il componibile AdvancedTimePickerExample crea un orario personalizzabile della finestra di dialogo del selettore.
2. Utilizza un componibile Dialog per una maggiore flessibilità rispetto a AlertDialog.
3. La finestra di dialogo include un titolo personalizzabile e un pulsante di attivazione/disattivazione per cambiare. tra le modalità di composizione e di immissione.
4. Surface applica la forma e l'elevazione alla finestra di dialogo, con IntrinsicSize.Min sia per la larghezza che per l'altezza.
5. I layout Column e Row forniscono i componenti della struttura della finestra di dialogo.
6. L'esempio monitora la modalità di selettore utilizzando showDial.
   • Un IconButton passa da una modalità all'altra e aggiorna l'icona di conseguenza.
   • I contenuti della finestra di dialogo cambiano da TimePicker a TimeInput in base a lo stato showDial.

Questa implementazione avanzata offre un tempo altamente personalizzabile e riutilizzabile finestra di dialogo del selettore, che può adattarsi a diversi casi d'uso nella tua app.

Questa implementazione si presenta nel seguente modo:

Figura 2. Un selettore dell'ora in una finestra di dialogo personalizzata.

Risorse aggiuntive

• Guida ai selettori dell'ora
• Material Design - Selettori dell'ora