Seletores
Mantenha tudo organizado com as coleções
Salve e categorize o conteúdo com base nas suas preferências.
O Picker ajuda os usuários a selecionar e definir dados específicos.
Seletor
Os seletores devem ser usados para permitir que os usuários escolham entre um número finito de itens.
Por padrão, os itens são repetidos infinitamente nas duas direções. Desative esse comportamento se a ordem na lista for importante ou permita que os usuários acessem o primeiro e o último elemento com um gesto rápido de deslizar.
Anatomia
Anatomia
A. Coluna inativa
B. Colon Breaker
C. Coluna do seletor
D. Conteúdo principal
E. Conteúdo do meio
F. Conteúdo da parte de baixo
Larguras e alturas
O grupo de seletor preenche a altura e a largura disponíveis. Há quatro opções de layout para as colunas do seletor. Cada layout é centralizado e preenche a altura disponível. As larguras das colunas são definidas pela largura necessária para acomodar o número de dígitos necessários na fonte. O seletor de data é a exceção. Horizontalmente, ele preenche a tela e ultrapassa a borda.
Por exemplo, os números vão determinar a largura de "00" e, em seguida, definir a largura. Para campos de texto, por exemplo, o campo de mês será calculado como a largura de "MMM" (que é a letra mais larga do alfabeto latino). Portanto, a largura e a altura (que é a altura da linha desse estilo de tipo) serão afetadas pela fonte usada.
O tamanho dos itens do seletor varia de acordo com o ponto de interrupção.
Uso
Confira os exemplos a seguir de seletores de data e hora.
Para conferir uma implementação pré-criada de um seletor de data e hora, confira a biblioteca Horologist no GitHub.
Se você quiser criar uma experiência semelhante, em que os usuários escolhem um valor de várias partes em vários seletores, use o componente PickerGroup integrado. Esse objeto usa um objeto de coordenador de foco para atribuir o foco ao elemento correto do seletor.
Layouts adaptáveis
TimePicker 24H
TimePicker 12H
Seletor de data
Comportamento responsivo
Aumento do tamanho do texto
Depois do ponto de interrupção 225+, o tamanho da fonte do elemento do seletor muda. A cópia de cima e de baixo na coluna de rolagem lenta é ajustada (A), assim como a cópia do meio. Confira alguns exemplos:
Layout de duas colunas
Abaixo do ponto de interrupção de 225 dp
Fonte: Display 2
Ponto de interrupção acima de 225 dp
Fonte: Display 1
Layout de três colunas
Abaixo do ponto de interrupção de 225 dp
Fonte: Display 3
Acima do ponto de interrupção de 225 dp
Fonte: tela 2
Aumento do tamanho do gradiente
O gradiente na coluna do seletor é definido em altura pelo espaço disponível. Os gradientes de cima e de baixo são definidos em um terço (33%) da altura disponível. Isso significa que, em cada tamanho de tela disponível, o gradiente é dimensionado proporcionalmente. Independente do layout da coluna.
Abaixo do ponto de interrupção de 225 dp
Tamanho: 33% da altura da coluna
Acima do ponto de interrupção de 225 dp
Tamanho: 33% da altura da coluna
Aumento do espaçamento entre colunas
O espaçamento das colunas é dimensionado além do ponto de interrupção de 225+, começando em 2 dp ou 4 dp e aumentando para 6 dp. Isso depende do layout selecionado: dois ou três.
Layout de duas colunas
Abaixo do ponto de interrupção de 225 dp
Intervalo de 4 dp entre colunas
Acima do ponto de interrupção de 225 dp
Intervalo de 6 dp entre colunas
Layout de três colunas
Abaixo do ponto de interrupção de 225 dp
Intervalo de 2 dp entre colunas
Acima do ponto de interrupção de 225 dp
Intervalo de 6 dp entre colunas
O conteúdo e os exemplos de código nesta página estão sujeitos às licenças descritas na Licença de conteúdo. Java e OpenJDK são marcas registradas da Oracle e/ou suas afiliadas.
Última atualização 2025-07-27 UTC.
[[["Fácil de entender","easyToUnderstand","thumb-up"],["Meu problema foi resolvido","solvedMyProblem","thumb-up"],["Outro","otherUp","thumb-up"]],[["Não contém as informações de que eu preciso","missingTheInformationINeed","thumb-down"],["Muito complicado / etapas demais","tooComplicatedTooManySteps","thumb-down"],["Desatualizado","outOfDate","thumb-down"],["Problema na tradução","translationIssue","thumb-down"],["Problema com as amostras / o código","samplesCodeIssue","thumb-down"],["Outro","otherDown","thumb-down"]],["Última atualização 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"]]
