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

Les sélecteurs d'heure apparaissent souvent dans les boîtes de dialogue. Vous pouvez utiliser un langage relativement générique et l'implémentation minimale d'une boîte de dialogue, ou vous pouvez implémenter une boîte de dialogue personnalisée avec plus de flexibilité.

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 d'heure est de créez un composable qui implémente 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 de l'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 .

Exemple avancé

Cet extrait illustre une implémentation avancée d'une heure personnalisable Boîte de dialogue du sélecteur 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 heure personnalisable de l'outil de sélection.
2. Elle utilise un composable Dialog pour plus de flexibilité que AlertDialog.
3. La boîte de dialogue comprend un titre personnalisable et un bouton d'activation entre les modes de numérotation 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 passe de TimePicker à TimeInput en fonction 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 :

Ressources supplémentaires

• Guide du sélecteur d'heure
• Material Design – Sélecteurs de temps