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 de l'état du sélecteur de date et d'heure, consultez le guide des sélecteurs de date et 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 qui implémente AlertDialog. L'extrait de code suivant fournit un exemple de boîte de dialogue relativement minimale utilisant 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 le bouton de fermeture ou la navigation "Retour").
   • onConfirm: 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. AlertDialog inclut les éléments suivants :
   • Un bouton de fermeture intitulé "Ignorer".
   • Un bouton de confirmation intitulé "OK".
   • Contenu du sélecteur de date et d'heure transmis en tant que paramètre text.
4. DialWithDialogExample initialise TimePickerState avec l'heure actuelle et le transmet à la fois à TimePicker et à la fonction onConfirm.

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 une forme et une élévation à la boîte de dialogue, avec IntrinsicSize.Min pour la largeur et la hauteur.
5. La mise en page Column et Row fournit les composants de structure de la boîte de dialogue.
6. L'exemple suit le mode du sélecteur à l'aide de showDial.
   • Un IconButton permet de basculer entre les modes, en mettant à 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 fournit une boîte de dialogue de sélecteur de date et d'heure hautement personnalisable et réutilisable qui peut s'adapter à différents cas d'utilisation dans votre application.

Cette implémentation est la suivante :

Ressources supplémentaires

• Guide des sélecteurs de date et d'heure
• Material Design : sélecteurs de date et d'heure