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() } ) }
Notez les points clés de cet extrait:
- Le composable
DialWithDialogExample
encapsuleTimePicker
dans une boîte de dialogue. TimePickerDialog
est un composable personnalisé qui crée unAlertDialog
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.
- 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
.
DialWithDialogExample
initialiseTimePickerState
avec le l'heure actuelle et la transmet àTimePicker
et àonConfirm
.
![Outil de sélection de l'heure dans une AlertDialog qui implémente un titre, un bouton d'activation/de désactivation du mode, et des boutons "Ignorer" et "Confirmer".](https://developer.android.google.cn/static/develop/ui/compose/images/components/timepicker-basic.png?hl=fr)
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") } } } } } }
Notez les points clés de cet extrait:
- Le composable
AdvancedTimePickerExample
crée une heure personnalisable de l'outil de sélection. - Elle utilise un composable
Dialog
pour plus de flexibilité queAlertDialog
. - La boîte de dialogue comprend un titre personnalisable et un bouton d'activation entre les modes de numérotation et de saisie.
Surface
applique la forme et l'élévation à la boîte de dialogue, avecIntrinsicSize.Min
pour la largeur et la hauteur.- Les mises en page
Column
etRow
fournissent les composants de structure de la boîte de dialogue. - 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'étatshowDial
.
- Une
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 :
![Outil de sélection de l'heure dans une boîte de dialogue personnalisée qui implémente un titre, un bouton d'activation/désactivation de mode, et des boutons "Fermer" et "Confirmer".](https://developer.android.google.cn/static/develop/ui/compose/images/components/timepicker-advanced.png?hl=fr)