Texto 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 →

Saiba mais sobre tipos de dispositivos XR →

No Glimmer do Jetpack Compose, o Text componente permite definir várias propriedades de texto, como cor, tamanho, estilo, peso, família, espaçamento entre letras e alinhamento.

O texto do Glimmer do Jetpack Compose é exclusivo porque gerencia de forma inteligente a correspondência de cores. Por exemplo, se nenhuma substituição de cor for especificada, o texto será definido como a cor do conteúdo fornecida pela superfície mais próxima.

Exemplo: criar um título de texto em uma caixa

@Composable
fun TextSample() {
    Text(
        text = "Hello Glimmer",
        style = GlimmerTheme.typography.titleLarge
    )
}
TextSample.kt

Pontos principais sobre o código

• Como nenhuma cor é especificada, esse texto procura a superfície mais próxima para escolher a melhor cor legível (geralmente branca).

Dimensionamento

A escala tipográfica no Glimmer do Jetpack Compose é significativamente maior do que o Material Design padrão para dispositivos móveis. Estilos como TitleLarge e BodyLarge são 30.sp, e a legenda é 18.sp:

Usar o Google Sans Flex

Google Sans Flex é uma fonte variável escolhida especificamente para óculos de IA e fornecida como parte do Glimmer do Jetpack Compose. Os cantos arredondados e os eixos ajustáveis da fonte permitem o dimensionamento óptico ideal, garantindo que o texto permaneça visível e legível. Se possível, para melhorar a consistência entre o app e o sistema, use o Google Sans Flex para todo o texto mostrado nos óculos com tela virtual.

Para usar o Google Sans Flex, adicione a biblioteca glimmer-google-fonts às dependências do app e aplique a fonte globalmente ao GlimmerTheme:

@Composable
fun GoogleSansFlexTypographySample() {
    val typography = createGoogleSansFlexTypography()
    GlimmerTheme(typography = typography) {
        Text("Hello World", style = GlimmerTheme.typography.titleLarge)
    }
}