Los selectores de horarios suelen aparecer en los diálogos. Puedes usar un modelo relativamente genérico implementación mínima de un diálogo, o puedes implementar un diálogo personalizado con más flexibilidad.
Para obtener más información sobre los diálogos en general, incluido cómo usar el selector de hora consulta la guía de selectores de tiempo.
Ejemplo básico
La forma más directa de crear un diálogo para tu selector de hora es
Crear un elemento componible que implemente AlertDialog
El siguiente fragmento
proporciona un ejemplo de un diálogo relativamente mínimo con este enfoque:
@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() } ) }
Ten en cuenta los puntos clave de este fragmento:
- El elemento componible
DialWithDialogExample
uneTimePicker
en un diálogo. TimePickerDialog
es un elemento de componibilidad personalizado que crea unAlertDialog
con los siguientes parámetros:onDismiss
: Es una función a la que se llama cuando el usuario descarta el diálogo (mediante el botón para descartar o la navegación hacia atrás).onConfirm
: Es una función a la que se llama cuando el usuario hace clic en "OK". .content
: Es un elemento componible que muestra el selector de hora en el diálogo.
AlertDialog
incluye lo siguiente:- Un botón para descartar con la etiqueta “Descartar”.
- Un botón de confirmación con la etiqueta “OK”.
- El contenido del selector de hora que se pasa como parámetro
text
.
DialWithDialogExample
inicializaTimePickerState
con el elemento la hora actual y la pasa aTimePicker
y aonConfirm
.
![Un selector de hora en un AlertDialog que implementa un título, un botón de activación de modo y los botones para descartar y confirmar.](https://developer.android.google.cn/static/develop/ui/compose/images/components/timepicker-basic.png?hl=es-419)
Ejemplo avanzado
Este fragmento demuestra una implementación avanzada de un horario personalizable. diálogo del selector en 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") } } } } } }
Ten en cuenta los puntos clave de este fragmento:
- El elemento
AdvancedTimePickerExample
componible crea una hora personalizable. en el cuadro de diálogo del selector. - Usa un elemento
Dialog
componible para obtener más flexibilidad queAlertDialog
. - El diálogo incluye un título personalizable y un botón para activar o desactivar entre los modos de marcado y de entrada.
Surface
aplica la forma y la elevación al diálogo, conIntrinsicSize.Min
para el ancho y la altura- El diseño
Column
yRow
proporciona los componentes de estructura del diálogo. - En el ejemplo, se realiza un seguimiento del modo de selección usando
showDial
.- Una
IconButton
cambia de modo y actualiza el ícono según corresponda. - El contenido del diálogo alterna entre
TimePicker
yTimeInput
según el estadoshowDial
.
- Una
Esta implementación avanzada proporciona un tiempo altamente personalizable y reutilizable. que se puede adaptar a diferentes casos de uso en tu app.
Esta implementación aparece de la siguiente manera:
![Un selector de hora en un diálogo personalizado que implementa un título, un botón de activación de modo y los botones para descartar y confirmar.](https://developer.android.google.cn/static/develop/ui/compose/images/components/timepicker-advanced.png?hl=es-419)