Ícones no Jetpack Compose Glimmer

Dispositivos XR relevantes
Estas orientações ajudam você a criar experiências para esses tipos de dispositivos XR.
Saiba mais sobre tipos de dispositivos XR →
Óculos de exibição
Saiba mais sobre tipos de dispositivos XR →

No Glimmer do Jetpack Compose, o Icon componente é um elemento da interface para renderizar ícones de uma única cor. Os ícones processam a tonalidade e o dimensionamento de maneira inteligente para que permaneçam legíveis e visualmente consistentes com o GlimmerTheme.

Tamanhos

Embora os ícones sejam definidos como o tamanho fornecido por LocalIconSize, também é possível usar os três tamanhos de ícones fornecidos para definir um tamanho específico. Esses tamanhos também são usados por padrão nos seguintes contextos:

Token de tamanho Uso padrão

small

Para itens de lista padrão ou chips pequenos.

medium

Para ícones independentes e chips de título.

large

Para componentes de alta ênfase, como cards.

Origens de ícones

Os ícones podem aceitar ImageVector, ImageBitmap ou Painter como origem. Ao definir seus próprios ícones, use ImageVector sempre que possível para promover a renderização nítida em qualquer escala nos óculos com tela virtual.

Cor e tonalidade

  • Tonalidade automática: o ícone resolve a cor com base no LocalContentColor fornecido pela superfície pai LocalContentColor fornecido pela superfície pai, como uma surface ou Button.
  • Tonalidade manual: use o parâmetro tint para aplicar uma cor específica.
  • Recursos multicoloridos: para ícones que não devem ser coloridos (como logotipos de marcas multicoloridas), defina tint = Color.Unspecified.
  • Imagens genéricas: para fotografias ou imagens genéricas que não seguem as regras de dimensionamento e tonalidade de ícones, use o androidx.compose.foundation.Image padrão.

Exemplo: ícone básico

O código a seguir cria um ícone básico:

@Composable
fun IconSample() {
    Icon(FavoriteIcon, contentDescription = "Localized description")
}

Exemplo: ícones com cor

O código a seguir cria um ícone colorido usando a cor principal do tema:

@Composable
fun ColoredIconSample() {
    Icon(
        FavoriteIcon,
        tint = GlimmerTheme.colors.primary,
        contentDescription = "Localized description",
    )
}

Exemplo: ícones com tamanhos diferentes

O código a seguir cria um ícone modificado para ter um tamanho específico:

@Composable
fun SizedIconSample() {
    Icon(
        FavoriteIcon,
        contentDescription = "Localized description",
        modifier = Modifier.size(GlimmerTheme.iconSizes.large),
    )
}

Principais pontos sobre o código

  • O tamanho do ícone é personalizado usando GlimmerTheme.iconSizes com um modificador. Para ícones, o valor padrão é GlimmerTheme.iconSizes.medium. Use esses tamanhos em vez de valores codificados para manter a consistência na interface.
  • Fornece uma contentDescription localizada para o ícone. Sempre forneça essas descrições, a menos que o ícone seja puramente decorativo.