Dialogfelder für die Zeitauswahl

Die Zeitauswahl wird oft in Dialogfeldern angezeigt. Sie können eine relativ allgemeine und minimale Implementierung eines Dialogfelds. Alternativ können Sie ein benutzerdefiniertes Dialogfeld mit und mehr Flexibilität.

Weitere Informationen zu Dialogfeldern im Allgemeinen, einschließlich der Verwendung der Zeitauswahl finden Sie im Leitfaden für die Zeitauswahl.

Einfaches Beispiel

Am einfachsten erstellen Sie ein Dialogfeld für die Zeitauswahl, indem Sie eine zusammensetzbare Funktion erstellen, die AlertDialog implementiert. Das folgende Snippet ist ein Beispiel für einen relativ minimalen Dialog mit diesem Ansatz:

@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

Beachten Sie die wichtigsten Punkte in diesem Snippet:

1. Die zusammensetzbare Funktion DialWithDialogExample umschließt TimePicker in einem Dialogfeld.
2. TimePickerDialog ist eine benutzerdefinierte zusammensetzbare Funktion, die ein AlertDialog mit folgende Parameter:
   • onDismiss: Eine Funktion, die aufgerufen wird, wenn der Nutzer das Dialogfeld schließt (über Schaltfläche „Schließen“ oder „Zurück“.
   • onConfirm: Eine Funktion, die aufgerufen wird, wenn der Nutzer auf „OK“ klickt. Schaltfläche.
   • content: Eine zusammensetzbare Funktion, in der die Zeitauswahl im Dialogfeld angezeigt wird.
3. AlertDialog umfasst:
   • Eine Schaltfläche zum Schließen.
   • Eine Bestätigungsschaltfläche mit der Beschriftung „OK“.
   • Der Inhalt der Zeitauswahl, der als text-Parameter übergeben wird.
4. DialWithDialogExample initialisiert TimePickerState mit dem aktuelle Uhrzeit und übergibt sie sowohl an TimePicker als auch an die onConfirm .

Abbildung 1. Eine Zeitauswahl in „AlertDialog“.

Erweitertes Beispiel

Dieses Snippet zeigt eine erweiterte Implementierung einer anpassbaren Zeitangabe, Auswahldialogfeld in 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

Beachten Sie die wichtigsten Punkte in diesem Snippet:

1. Die zusammensetzbare Funktion AdvancedTimePickerExample erstellt eine anpassbare Zeit Auswahldialogfeld.
2. Die zusammensetzbare Funktion Dialog bietet mehr Flexibilität als AlertDialog.
3. Das Dialogfeld enthält einen anpassbaren Titel und eine Ein/Aus-Schaltfläche zum Wechseln zwischen Wähl- und Eingabemodus wechseln.
4. Surface wendet Form und Höhe auf das Dialogfeld an, wobei IntrinsicSize.Min für Breite und Höhe.
5. Die Layouts Column und Row stellen die Strukturkomponenten des Dialogfelds bereit.
6. In diesem Beispiel wird der Auswahlmodus mit showDial erfasst.
   • Ein IconButton schaltet zwischen den Modi um und aktualisiert das Symbol entsprechend.
   • Der Inhalt des Dialogfelds wechselt basierend auf denTimePickerTimeInput showDial.

Diese erweiterte Implementierung bietet einen stark anpassbaren und wiederverwendbaren Zeitraum Auswahldialogfeld, das sich an verschiedene Anwendungsfälle in Ihrer App anpassen lässt.

Diese Implementierung sieht so aus:

Abbildung 2: Eine Zeitauswahl in einem benutzerdefinierten Dialogfeld.

Weitere Informationen

• Leitfaden für die Zeitauswahl
• Material Design – Zeitauswahl