Auswahlelemente
Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Mit der Auswahl können Nutzer bestimmte Daten auswählen und festlegen.
Auswahl
Auswahlfelder sollten verwendet werden, um Nutzern die Auswahl aus einer begrenzten Anzahl von Elementen zu ermöglichen.
Standardmäßig werden die Elemente in beiden Richtungen endlos wiederholt. Deaktivieren Sie dieses Verhalten, wenn die Reihenfolge in der Liste wichtig ist, oder damit Nutzer mit einem schnellen Wischen das erste und das letzte Element erreichen können.
Anatomie
Anatomie
A. Inaktive Spalte
B. Doppelpunkt
C. Auswahlspalte
D. Beliebteste Inhalte
E. Mittelinhalt
F. Inhalt unten
Breiten und Höhen
Die Auswahlgruppe füllt die verfügbare Höhe und Breite aus. Für die Auswahlspalten gibt es vier Layoutoptionen. Jedes Layout ist zentriert und füllt die verfügbare Höhe aus. Die Spaltenbreite wird durch die Breite bestimmt, die für die Anzahl der Ziffern in der Schrift erforderlich ist. Die Datumsauswahl ist die Ausnahme: Sie füllt horizontal das Display aus und geht über den Rand hinaus.
Bei Zahlen wird beispielsweise die Breite von „00“ berechnet und dann festgelegt. Bei Textfeldern wird die Breite beispielsweise für das Monatsfeld anhand von „MMM“ berechnet, dem breitesten Buchstaben im lateinischen Alphabet. Die Breite und Höhe (d. h. die Zeilenhöhe des verwendeten Schriftstils) werden daher von der verwendeten Schriftart beeinflusst.
Die Größe der Auswahlelemente variiert je nach Breakpoint.
Nutzung
Die folgenden Beispiele für Datums- und Uhrzeitauswahlen
Eine vorgefertigte Implementierung der Datums- und Uhrzeitauswahl finden Sie in der Horologist Library auf GitHub.
Wenn Sie eine ähnliche Funktion erstellen möchten, bei der Nutzer einen mehrteiligen Wert über mehrere Auswahlen auswählen, verwenden Sie die integrierte Komponente PickerGroup. Dieses Objekt verwendet ein Fokuskoordinatorobjekt, um dem richtigen Auswahlelement den Fokus zuzuweisen.
Adaptive Layouts
Zeitauswahl – 24 Stunden
Zeitauswahl – 12 Stunden
Datumsauswahl
Responsives Verhalten
Textgröße erhöht
Überschreitet der Wert 225, ändert sich die Schriftgröße des Auswahlelements. Der Text oben und unten in der Spalte mit dem Lazy-Scrolling wird angepasst (A), ebenso wie der Text in der Mitte. Hier einige Beispiele:
Zweispaltiges Layout
Unter dem 225-dp-Bruchpunkt
Schriftart: Display 2
Über 225 dp-Bruchstelle
Schriftart: Display 1
Dreispaltiges Layout
Unter dem 225-dp-Bruchpunkt
Schriftart: Display 3
Über dem 225-dp-Bruchpunkt
Schriftart: Display 2
Erhöhung der Farbverlaufsgröße
Die Höhe des Farbverlaufs in der Auswahlspalte wird durch den verfügbaren Platz bestimmt. Sowohl der obere als auch der untere Farbverlauf sind auf ein Drittel (33%) der verfügbaren Höhe festgelegt. Das bedeutet, dass der Farbverlauf bei jeder verfügbaren Bildschirmgröße proportional skaliert wird. Sie sind unabhängig vom Spaltenlayout.
Unter dem 225-dp-Bruchpunkt
Größe: 33% der Spaltenhöhe
Über dem 225-dp-Bruchpunkt
Größe: 33% der Spaltenhöhe
Spaltenabstand vergrößern
Der Spaltenabstand wird über den 225 Pixel umfassenden Wendepunkt hinaus skaliert. Er beginnt entweder bei 2 dp oder 4 dp und wächst auf 6 dp. Das hängt davon ab, welches Layout Sie ausgewählt haben: entweder ein Layout mit zwei oder drei Spalten.
Zweispaltiges Layout
Unter dem 225-dp-Bruchpunkt
Spaltenabstand von 4 dp
Über dem 225-dp-Bruchpunkt
Spaltenabstand von 6 dp
Dreispaltiges Layout
Unter dem 225-dp-Bruchpunkt
Spaltenabstand von 2 dp
Über dem 225-dp-Bruchpunkt
Spaltenabstand von 6 dp
Alle Inhalte und Codebeispiele auf dieser Seite unterliegen den Lizenzen wie im Abschnitt Inhaltslizenz beschrieben. Java und OpenJDK sind Marken oder eingetragene Marken von Oracle und/oder seinen Tochtergesellschaften.
Zuletzt aktualisiert: 2025-07-27 (UTC).
[[["Leicht verständlich","easyToUnderstand","thumb-up"],["Mein Problem wurde gelöst","solvedMyProblem","thumb-up"],["Sonstiges","otherUp","thumb-up"]],[["Benötigte Informationen nicht gefunden","missingTheInformationINeed","thumb-down"],["Zu umständlich/zu viele Schritte","tooComplicatedTooManySteps","thumb-down"],["Nicht mehr aktuell","outOfDate","thumb-down"],["Problem mit der Übersetzung","translationIssue","thumb-down"],["Problem mit Beispielen/Code","samplesCodeIssue","thumb-down"],["Sonstiges","otherDown","thumb-down"]],["Zuletzt aktualisiert: 2025-07-27 (UTC)."],[],[],null,["# Pickers\n\nThe [Picker](/reference/kotlin/androidx/wear/compose/material/package-summary#Picker(androidx.wear.compose.material.PickerState,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function1,androidx.wear.compose.material.ScalingParams,androidx.compose.ui.unit.Dp,kotlin.Float,androidx.compose.ui.graphics.Color,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Function2)) helps users select and set specific data. \n**Picker**\n\nPickers should be used to let users choose amongst a finite number of items. \n\nBy default items will be looped infinitely in both directions. Consider disabling this behaviour if order in the list is important, or to allow users to reach the first and last element with a quick swipe.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nAnatomy\n-------\n\n**Anatomy**\n\nA. Inactive Column \n\nB. Colon Breaker \n\nC. Picker Column \n\nD. Top Content \n\nE. Middle Content \n\nF. Bottom Content\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Widths and heights**\n\nThe Picker Group fills the available height and width. There are four layout options for the picker columns. Each layout is centred and fills the available height. Column widths are defined by the width needed to accommodate the number of digits needed in the font, Date-picker is the exception, horizontally it fills the screen and bleeds off the edge.\n\nFor example numbers will work out width of '00' is and then set the width. For text fields, for the month field for example, will be worked out as the width of 'MMM' (which is the widest letter in the latin alphabet). The width and height (which is the line height of that type style used) will therefore be affected by the font used.\n\nPicker items vary in size across the breakpoint.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nUsage\n-----\n\nSee the following examples of Date and Time Pickers\n\nFor a prebuilt date and time picker implementation, check out the [Horologist Library](https://github.com/google/horologist#-composables) on GitHub. \n\n\nIf you want to create a similar experience, where users choose a multi-part value across multiple pickers, use the built-in [PickerGroup](/reference/kotlin/androidx/wear/compose/material/package-summary#PickerGroup(kotlin.Array,androidx.compose.ui.Modifier,androidx.wear.compose.material.PickerGroupState,kotlin.Function1,kotlin.Boolean,kotlin.Boolean,androidx.wear.compose.material.TouchExplorationStateProvider,kotlin.Function1)) component. This object uses a focus coordinator object to assign focus to the correct Picker element.\n\nAdaptive layouts\n----------------\n\n**TimePicker 24H**\n\n**TimePicker 12H**\n\n**Date Picker**\n\n**Responsive behavior**\n-----------------------\n\n### **Text size increase**\n\nPast the 225+ Breakpoint, the Picker element's font size changes. Top and Bottom copy within the lazy scrolling column adjusts (A), as does the Middle copy. Below are some examples of this:\n\n**Two column layout** \n**Below the 225 dp breakpoint**\n\nFont: Display 2 \n**Above 225 dp breakpoint**\n\nFont: Display 1\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Three column layout** \n**Below the 225 dp breakpoint**\n\nFont: Display 3 \n**Above the 225 dp breakpoint**\n\nFont: Display 2\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Gradient size increase**\n--------------------------\n\nThe gradient on the Picker column is defined in height by the available space. Both Top and Bottom Gradients are set at a third (33%) of the available height. This means at each available screen size, the gradient scales proportionally. Sitting independent of the column layout. \n**Below the 225 dp breakpoint**\n\nSize: 33% of column height \n**Above the 225 dp breakpoint**\n\nSize: 33% of column height\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Column spacing increase**\n---------------------------\n\nColumn spacing scales past the 225+ Breakpoint, either starting at 2 dp or 4 dp and growing to 6 dp. This depends on which layout you've selected; either 2 or 3 column layouts\n\n**Two column layout** \n**Below the 225 dp breakpoint**\n\n4 dp column gap \n**Above the 225 dp breakpoint**\n\n6 dp column gap\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n### **Three column layout**\n\n**Below the 225 dp breakpoint**\n\n2 dp column gap \n**Above the 225 dp breakpoint**\n\n6 dp column gap\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e"]]
