Boîtes de dialogue des sélecteurs d'heure

Les sélecteurs de date et d'heure apparaissent souvent dans les boîtes de dialogue. Vous pouvez utiliser une implémentation relativement générique et minimale d'une boîte de dialogue, ou une boîte de dialogue personnalisée plus flexible.

Pour en savoir plus sur les boîtes de dialogue en général, y compris sur l'utilisation du sélecteur de l'heure consultez le guide du sélecteur d'heure.

Exemple de base

Le moyen le plus simple de créer une boîte de dialogue pour votre sélecteur de date et d'heure consiste à créer un composable implémentant AlertDialog. L'extrait suivant fournit un exemple de dialogue relativement minimal avec cette approche:

@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

Notez les points clés de cet extrait :

  1. Le composable DialWithDialogExample encapsule TimePicker dans une boîte de dialogue.
  2. TimePickerDialog est un composable personnalisé qui crée un AlertDialog avec les paramètres suivants:
    • onDismiss: fonction appelée lorsque l'utilisateur ferme la boîte de dialogue (via bouton "Fermer" ou retour arrière).
    • onConfirm: une fonction appelée lorsque l'utilisateur clique sur le bouton "OK". .
    • content : composable qui affiche le sélecteur d'heure dans la boîte de dialogue.
  3. Le AlertDialog inclut les éléments suivants:
    • Un bouton "Ignorer" intitulé "Ignorer".
    • Un bouton de confirmation intitulé "OK".
    • Contenu du sélecteur de l'heure transmis en tant que paramètre text.
  4. DialWithDialogExample initialise TimePickerState avec le l'heure actuelle et la transmet à TimePicker et à onConfirm .
Sélecteur de date et d'heure dans un AlertDialog qui implémente un titre, un bouton d'activation/de désactivation du mode, ainsi que des boutons d'ignorer et de confirmer.
Figure 1. Sélecteur d'heure dans un AlertDialog.

Exemple avancé

Cet extrait illustre une implémentation avancée d'une boîte de dialogue de sélecteur de date et d'heure personnalisable dans 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

Notez les points clés de cet extrait:

  1. Le composable AdvancedTimePickerExample crée une boîte de dialogue de sélecteur de date et d'heure personnalisable.
  2. Il utilise un composable Dialog pour plus de flexibilité que AlertDialog.
  3. La boîte de dialogue inclut un titre personnalisable et un bouton d'activation/de désactivation pour basculer entre les modes de cadran et de saisie.
  4. Surface applique la forme et l'élévation à la boîte de dialogue, avec IntrinsicSize.Min pour la largeur et la hauteur.
  5. Les mises en page Column et Row fournissent les composants de structure de la boîte de dialogue.
  6. L'exemple suit le mode sélecteur à l'aide de showDial.
    • Une IconButton passe d'un mode à l'autre et met à jour l'icône en conséquence.
    • Le contenu de la boîte de dialogue bascule entre TimePicker et TimeInput en fonction de l'état showDial.

Cette implémentation avancée offre un temps de latence hautement personnalisable et réutilisable boîte de dialogue de sélection qui peut s'adapter à différents cas d'utilisation dans votre application.

Cette implémentation est la suivante :

Sélecteur de date et d'heure dans une boîte de dialogue personnalisée qui implémente un titre, un bouton d'activation/de désactivation du mode, ainsi que des boutons de fermeture et de confirmation.
Figure 2. Sélecteur d'heure dans une boîte de dialogue personnalisée

Ressources supplémentaires