Zeitauswahl

Über die Zeitauswahl können Nutzer eine Zeit auswählen. Sie können die zusammensetzbaren Funktionen TimePicker und TimeInput verwenden, um eine Uhrzeit zu implementieren in Ihrer App auswählen.

Typen

Es gibt zwei Arten der Zeitauswahl:

  • Wählen: Damit können Nutzer eine Uhrzeit festlegen, indem sie einen Ziehpunkt um ein Zifferblatt bewegen.
  • Eingabe: Damit können Nutzer eine Uhrzeit über die Tastatur festlegen.

In der folgenden Abbildung sehen Sie links ein Beispiel für eine Einwahlzeitauswahl. eine Eingabezeitauswahl rechts:

Ein Wählrad und eine Auswahl für die Eingabezeit
Abbildung 1: Ein Wählrad und eine Zeitauswahl für die Eingabe

API-Oberfläche

Verwende zum Implementieren einer Zeitauswahl entweder TimePicker oder TimeInput zusammensetzbar:

  • TimePicker: Implementiert eine Einwahlzeitauswahl.
  • TimeInput: Implementiert eine Eingabezeitauswahl.

Bundesland

Für TimePicker und TimeInput müssen Sie außerdem eine TimePickerState Hier können Sie die standardmäßig ausgewählte Zeit festlegen, die angezeigt wird. in der Auswahl. Außerdem wird die Zeit erfasst, die der Nutzer Auswahl.

Dialogfeld

Die Zeitauswahl wird in Dialogfeldern angezeigt. In den Beispielen in diesem Leitfaden werden keine Dialogfelder verwendet. Beispiele, in denen Dialogfelder verwendet werden, finden Sie im Leitfaden Dialogfelder für die Zeitauswahl.

Wahlzeitauswahl

Dieses Snippet veranschaulicht, wie eine einfache Einwahlzeitauswahl implementiert wird.

@Composable
fun DialExample(
    onConfirm: () -> Unit,
    onDismiss: () -> Unit,
) {
    val currentTime = Calendar.getInstance()

    val timePickerState = rememberTimePickerState(
        initialHour = currentTime.get(Calendar.HOUR_OF_DAY),
        initialMinute = currentTime.get(Calendar.MINUTE),
        is24Hour = true,
    )

    Column {
        TimePicker(
            state = timePickerState,
        )
        Button(onClick = onDismiss) {
            Text("Dismiss picker")
        }
        Button(onClick = onConfirm) {
            Text("Confirm selection")
        }
    }
}
TimePickers.kt

Betrachten Sie in diesem Snippet Folgendes:

  • Calendar.getInstance() initialisiert den TimePickerState mit dem aktuellen .
  • Die zusammensetzbare Funktion TimePicker zeigt die Zeitauswahl an und timePickerState als Parameter verwenden.
  • Die Implementierung umfasst zwei Schaltflächen: eine zur Bestätigung der Auswahl und um die Auswahl zu schließen.

Diese Implementierung sieht so aus:

Eine Einwahlzeitauswahl. Der Nutzer kann über den Ring eine Uhrzeit auswählen.
Abbildung 2: Eine Einwahloption.

Eingabezeitauswahl

Dieses Snippet veranschaulicht, wie eine einfache Eingabestil-Zeitauswahl implementiert wird.

@Composable
fun InputExample(
    onConfirm: () -> Unit,
    onDismiss: () -> Unit,
) {
    val currentTime = Calendar.getInstance()

    val timePickerState = rememberTimePickerState(
        initialHour = currentTime.get(Calendar.HOUR_OF_DAY),
        initialMinute = currentTime.get(Calendar.MINUTE),
        is24Hour = true,
    )

    Column {
        TimeInput(
            state = timePickerState,
        )
        Button(onClick = onDismiss) {
            Text("Dismiss picker")
        }
        Button(onClick = onConfirm) {
            Text("Confirm selection")
        }
    }
}
TimePickers.kt

Wichtige Punkte, die bei dieser Implementierung zu beachten sind:

  • Die Struktur ist im Wesentlichen die gleiche wie die Wahlzeitauswahl, nur der Hauptteil Unterschied besteht in der Verwendung von TimeInput statt TimePicker.
  • Der Parameter is24Hour für timePickerState ist explizit auf true festgelegt. Der Standardwert ist false.

Diese Implementierung sieht so aus:

Eine Eingabezeitauswahl. Der Nutzer kann in Textfeldern eine Uhrzeit eingeben.
Abbildung 3: Eine Zeitauswahl für die Eingabe

Status verwenden

Übergeben Sie den Parameter TimePickerState zu Ihrer onConfirm-Funktion hinzufügen. Das übergeordnete Element zusammensetzbare Funktion kann dann über TimePickerState.hour auf die ausgewählte Zeit zugreifen und TimePickerState.minute.

Das folgende Snippet veranschaulicht, wie dies funktioniert:

@Composable
fun DialUseStateExample(
    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,
    )

    Column {
        TimePicker(
            state = timePickerState,
        )
        Button(onClick = onDismiss) {
            Text("Dismiss picker")
        }
        Button(onClick = { onConfirm(timePickerState) }) {
            Text("Confirm selection")
        }
    }
}
TimePickers.kt

Sie könnten die zusammensetzbare Funktion dann wie folgt aufrufen:

var selectedTime: TimePickerState? by remember { mutableStateOf(null) }

// ...

DialUseStateExample(
    onDismiss = {
        showDialExample = false
    },
    onConfirm = {
            time ->
        selectedTime = time
        showDialExample = false
    },
)

// ...

if (selectedTime != null) {
    val cal = Calendar.getInstance()
    cal.set(Calendar.HOUR_OF_DAY, selectedTime!!.hour)
    cal.set(Calendar.MINUTE, selectedTime!!.minute)
    cal.isLenient = false
    Text("Selected time = ${formatter.format(cal.time)}")
} else {
    Text("No time selected.")
}

Weitere Informationen finden Sie im Abschnitt zur vollständigen Implementierung in den Snippets. App.

Weitere Informationen