Selettori
Mantieni tutto organizzato con le raccolte
Salva e classifica i contenuti in base alle tue preferenze.
Il selettore aiuta gli utenti a selezionare e impostare dati specifici.
Selettore
I selettori devono essere utilizzati per consentire agli utenti di scegliere tra un numero finito di elementi.
Per impostazione predefinita, gli elementi verranno ripetuti all'infinito in entrambe le direzioni. Valuta la possibilità di disattivare questo comportamento se l'ordine nell'elenco è importante o per consentire agli utenti di raggiungere il primo e l'ultimo elemento con un rapido scorrimento.
Anatomia
Anatomia
A. Colonna inattiva
B. Interruttore a due punti
C. Colonna selettore
D. Contenuti principali
E. Contenuti intermedi
F. Contenuti in basso
Larghezza e altezza
Il gruppo di selettori riempie l'altezza e la larghezza disponibili. Esistono quattro opzioni di layout per le colonne del selettore. Ogni layout è centrato e riempie l'altezza disponibile. Le larghezze delle colonne sono definite dalla larghezza necessaria per accogliere il numero di cifre necessarie nel carattere. L'eccezione è il selettore della data, che riempie lo schermo orizzontalmente e esce dal bordo.
Ad esempio, i numeri calcolano la larghezza di "00" e poi impostano la larghezza. Per i campi di testo, ad esempio il campo del mese, verrà calcolata la larghezza di "MMM" (la lettera più larga dell'alfabeto latino). La larghezza e l'altezza (ovvero l'altezza della riga dello stile di carattere utilizzato) saranno quindi influenzate dal carattere utilizzato.
Le dimensioni degli elementi del selettore variano in base al punto di interruzione.
Utilizzo
Vedi i seguenti esempi di selettori di data e ora
Per un'implementazione predefinita del selettore di date e ore, consulta la libreria Horologist su GitHub.
Se vuoi creare un'esperienza simile, in cui gli utenti scelgono un valore composto da più parti in più selettori, utilizza il componente PickerGroup integrato. Questo oggetto utilizza un oggetto coordinatore dell'attenzione per assegnare lo stato attivo all'elemento selettore corretto.
Layout adattivi
TimePicker 24 ore
TimePicker 12H
Selettore della data
Comportamento reattivo
Aumento delle dimensioni del testo
Oltre il punto di interruzione di 225, le dimensioni del carattere dell'elemento selettore cambiano. Il testo superiore e inferiore all'interno della colonna con scorrimento lento viene modificato (A), così come il testo centrale. Di seguito sono riportati alcuni esempi:
Layout a due colonne
Al di sotto del punto di interruzione di 225 dp
Carattere: Display 2
Punto di interruzione superiore a 225 dp
Carattere: Display 1
Layout a tre colonne
Al di sotto del punto di interruzione di 225 dp
Carattere: Display 3
Sopra il punto di interruzione di 225 dp
Carattere: Display 2
Aumento delle dimensioni della sfumatura
Il gradiente nella colonna del selettore è definito in altezza dallo spazio disponibile. Sia i gradienti superiore che inferiore sono impostati su un terzo (33%) dell'altezza disponibile. Ciò significa che, a ogni dimensione dello schermo disponibile, il gradiente viene scalato proporzionalmente. Indipendentemente dal layout delle colonne.
Al di sotto del punto di interruzione di 225 dp
Dimensioni: 33% dell'altezza della colonna
Sopra il punto di interruzione di 225 dp
Dimensioni: 33% dell'altezza della colonna
Aumento della spaziatura delle colonne
La spaziatura delle colonne aumenta oltre il punto di interruzione superiore a 225, partendo da 2 dp o 4 dp e arrivando a 6 dp. Dipende dal layout selezionato: 2 o 3 colonne
Layout a due colonne
Al di sotto del punto di interruzione di 225 dp
Spazio tra le colonne di 4 dp
Sopra il punto di interruzione di 225 dp
Spazio tra le colonne di 6 dp
Layout a tre colonne
Al di sotto del punto di interruzione di 225 dp
Spazio tra le colonne di 2 dp
Sopra il punto di interruzione di 225 dp
Spazio tra le colonne di 6 dp
I campioni di contenuti e codice in questa pagina sono soggetti alle licenze descritte nella Licenza per i contenuti. Java e OpenJDK sono marchi o marchi registrati di Oracle e/o delle sue società consociate.
Ultimo aggiornamento 2025-07-27 UTC.
[[["Facile da capire","easyToUnderstand","thumb-up"],["Il problema è stato risolto","solvedMyProblem","thumb-up"],["Altra","otherUp","thumb-up"]],[["Mancano le informazioni di cui ho bisogno","missingTheInformationINeed","thumb-down"],["Troppo complicato/troppi passaggi","tooComplicatedTooManySteps","thumb-down"],["Obsoleti","outOfDate","thumb-down"],["Problema di traduzione","translationIssue","thumb-down"],["Problema relativo a esempi/codice","samplesCodeIssue","thumb-down"],["Altra","otherDown","thumb-down"]],["Ultimo aggiornamento 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"]]
