Ícones no Jetpack Compose Glimmer

Dispositivos XR aplicáveis

Estas orientações ajudam você a criar experiências para esses tipos de dispositivos de XR.

Saiba mais sobre os tipos de dispositivos XR →

Saiba mais sobre os tipos de dispositivos XR →

No Glimmer do Jetpack Compose, o componente Icon foi projetado especificamente para renderizar ícones de uma única cor. Icon pode aceitar ImageVector, ImageBitmap ou Painter como origem. O Icon, semelhante ao Text, pode aplicar uma cor de forma inteligente com base no tema da interface ao redor. Embora o tamanho padrão seja fornecido pelo LocalIconSize, também é possível definir tamanhos personalizados.

Exemplo: criar uma caixa com um ícone de estrela grande

@Composable
fun GlimmerIconSample() {
    GlimmerTheme {
        Box(
            modifier = Modifier.fillMaxSize(),
            contentAlignment = Alignment.Center
        ) {
            Column(horizontalAlignment = Alignment.CenterHorizontally) {
                Icon(
                    painter = painterResource(id = R.drawable.ic_star),
                    contentDescription = "A star icon from Google Symbols",
                    modifier = Modifier.size(GlimmerTheme.iconSizes.large),
                    tint = GlimmerTheme.colors.primary
                )
            }
        }
    }
}

Pontos principais sobre o código

• A origem do ícone carrega um drawable vetorial XML local (R.drawable.ic_star) usando painterResource, demonstrando a abordagem recomendada para integrar ícones a uma interface do Glimmer do Jetpack Compose sem sobrecarga de biblioteca externa.
• O tamanho do ícone é personalizado definindo GlimmerTheme.iconSizes.large com um modificador, demonstrando como substituir o dimensionamento predefinido do Glimmer do Jetpack Compose.
• A cor de matiz do ícone é personalizada definindo GlimmerTheme.colors.primary usando o parâmetro de matiz, aplicando matiz de ícone de cor única para consistência visual.