Dialogfelder für die Zeitauswahl

Uhrzeitauswahlen werden häufig in Dialogfeldern angezeigt. Sie können eine relativ allgemeine 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 einen Dialog für die Uhrzeitauswahl, indem Sie ein Composeable mit AlertDialog erstellen. 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 die Schaltfläche „OK“ klickt.
   • 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 Parameter text übergeben wird.
4. Die DialWithDialogExample initialisiert die TimePickerState mit der aktuellen Uhrzeit und übergibt sie sowohl an die TimePicker- als auch an die onConfirm-Funktion.

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. Mit dem AdvancedTimePickerExample-Kompositelement wird ein anpassbares Dialogfeld für die Zeitauswahl erstellt.
2. Es verwendet ein Dialog-kompositbares Element, das flexibler ist als AlertDialog.
3. Das Dialogfeld enthält einen benutzerdefinierbaren Titel und eine Ein-/Aus-Schaltfläche, mit der Sie zwischen dem Wähl- und dem Eingabemodus wechseln können.
4. Mit Surface werden dem Dialogfeld Form und Höhe zugewiesen. IntrinsicSize.Min gibt dabei sowohl die Breite als auch die Höhe an.
5. Das Column- und das Row-Layout stellen die Strukturkomponenten des Dialogfelds bereit.
6. Im Beispiel wird der Auswahlmodus mit showDial überwacht.
   • Mit einem IconButton können Sie zwischen den Modi wechseln. Das Symbol wird entsprechend aktualisiert.
   • Der Dialoginhalt wechselt je nach showDial-Status zwischen TimePicker und TimeInput.

Diese erweiterte Implementierung bietet ein äußerst anpassbares und wiederverwendbares Dialogfeld für die Uhrzeitauswahl, das sich an verschiedene Anwendungsfälle in Ihrer App anpassen lässt.

Diese Implementierung sieht so aus:

Weitere Informationen

• Leitfaden für Zeitauswahl
• Material Design – Zeitauswahl