Dialogfelder für die Zeitauswahl

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

Weitere Informationen zu Dialogen im Allgemeinen, einschließlich der Verwendung des Status der Uhrzeitauswahl, finden Sie im Leitfaden zur Uhrzeitauswahl.

Einfaches Beispiel

Am einfachsten erstellen Sie ein Dialogfeld für die Zeitauswahl, indem Sie eine zusammensetzbare Funktion erstellen, die AlertDialog implementiert. Das folgende Snippet zeigt 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. Das DialWithDialogExample-Element umschließt TimePicker in einem Dialogfeld.
2. TimePickerDialog ist ein benutzerdefiniertes Composeable, mit dem eine AlertDialog mit den folgenden Parametern erstellt wird:
   • onDismiss: Eine Funktion, die aufgerufen wird, wenn der Nutzer den Dialog schließt (über die Schaltfläche „Schließen“ oder durch Zurückgehen).
   • onConfirm: Eine Funktion, die aufgerufen wird, wenn der Nutzer auf „OK“ klickt. Schaltfläche.
   • content: Ein Composeable, in dem die Uhrzeitauswahl im Dialogfeld angezeigt wird.
3. AlertDialog enthält:
   • Eine Schaltfläche zum Schließen mit der Beschriftung „Schließen“.
   • Eine Bestätigungsschaltfläche mit der Bezeichnung „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

In diesem Snippet wird eine erweiterte Implementierung eines anpassbaren Dialogfelds für die Uhrzeitauswahl in Jetpack Compose veranschaulicht.

@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. Es verwendet ein Dialog-kompositbares Element, das flexibler ist 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. Das Column- und das Row-Layout 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 Uhrzeitauswahl in einem benutzerdefinierten Dialogfeld.

Weitere Informationen

• Leitfaden für Zeitauswahl
• Material Design – Zeitauswahl