Diálogos para selectores de hora

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() }
    )
}
TimePickers.kt

Ten en cuenta los puntos clave de este fragmento:

1. El elemento componible DialWithDialogExample une TimePicker en un diálogo.
2. TimePickerDialog es un elemento de componibilidad personalizado que crea un AlertDialog 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.
3. 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.
4. DialWithDialogExample inicializa TimePickerState con el elemento la hora actual y la pasa a TimePicker y a onConfirm .

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") }
                }
            }
        }
    }
}
TimePickers.kt

Ten en cuenta los puntos clave de este fragmento:

1. El elemento AdvancedTimePickerExample componible crea una hora personalizable. en el cuadro de diálogo del selector.
2. Usa un elemento Dialog componible para obtener más flexibilidad que AlertDialog.
3. El diálogo incluye un título personalizable y un botón para activar o desactivar entre los modos de marcado y de entrada.
4. Surface aplica la forma y la elevación al diálogo, con IntrinsicSize.Min para el ancho y la altura
5. El diseño Column y Row proporciona los componentes de estructura del diálogo.
6. 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 y TimeInput según el estado showDial.

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:

Recursos adicionales

• Guía para los selectores de horarios
• Material Design: selectores de tiempo