Estilo do parágrafo

Esta página descreve como você pode estilizar o texto para seus parágrafo. Para definir o estilo no nível do parágrafo, configure parâmetros como textAlign e lineHeight ou defina seu próprio ParagraphStyle.

Definir o alinhamento do texto

O parâmetro textAlign permite definir a horizontal alinhamento dos em uma área de superfície combinável Text.

Por padrão, o Text seleciona o alinhamento natural do texto, dependendo do valor do conteúdo:

• Borda esquerda do contêiner Text para alfabetos que seguem o sentido da esquerda para a direita, como latino, cirílico ou hangul
• Borda direita do contêiner Text para alfabetos que seguem o sentido da direita para a esquerda, como árabe ou hebraico

@Composable
fun CenterText() {
    Text(
        "Hello World", textAlign = TextAlign.Center, modifier = Modifier.width(150.dp)
    )
}
TextSnippets.kt

Se você quiser definir manualmente o alinhamento do texto de um elemento combinável Text, prefira usando TextAlign.Start e TextAlign.End em vez de TextAlign.Left e TextAlign.Right, respectivamente, conforme vão para a borda direita do Text. combinável, dependendo da orientação de texto da linguagem preferida. Por exemplo, TextAlign.End fica alinhado à direita para textos em francês e à esquerda para textos em árabe, mas TextAlign.Right alinha o texto à direita independente do alfabeto usado.

Adicionar vários estilos em um parágrafo

Para adicionar vários estilos a um parágrafo, você pode usar ParagraphStyle em uma AnnotatedString, que pode receber estilos de anotações arbitrárias. Quando uma parte do seu texto é marcada com um ParagraphStyle, ela é separado do texto restante, como se tivesse feeds de linha no início e fim.

Para mais informações sobre como adicionar vários estilos a um texto, consulte Adicionar vários estilos ao texto.

AnnotatedString tem um tipo seguro builder para facilitar a criação: buildAnnotatedString. O snippet a seguir usa buildAnnotatedString para definir ParagraphStyle:

@Composable
fun ParagraphStyle() {
    Text(
        buildAnnotatedString {
            withStyle(style = ParagraphStyle(lineHeight = 30.sp)) {
                withStyle(style = SpanStyle(color = Color.Blue)) {
                    append("Hello\n")
                }
                withStyle(
                    style = SpanStyle(
                        fontWeight = FontWeight.Bold, color = Color.Red
                    )
                ) {
                    append("World\n")
                }
                append("Compose")
            }
        }
    )
}
TextSnippets.kt

Ajustar a altura e o padding da linha

includeFontPadding é uma propriedade legada que adiciona padding extra com base nas métricas de fonte na parte de cima da primeira linha e na parte de baixo da última linha de um texto. A partir da versão 2024.01.01 da BoM do Compose, o includeFontPadding foi definido. para false por padrão, o que deixa o layout de texto padrão mais alinhado com ferramentas de design comuns.

A capacidade de configurar a lineHeight não é nova e está disponível desde o Android Q. É possível configurar lineHeight para Text usando o parâmetro lineHeight, que distribui a altura da linha em cada linha do texto. Em seguida, é possível usar a nova LineHeightStyle API para configurar melhor como o texto é alinhado no espaço e remover espaços em branco.

Para melhorar a precisão, ajuste lineHeight usando a unidade "em" (tamanho relativo da fonte) em vez de "sp" (pixels dimensionados). Para mais informações sobre selecionando um bloco de texto adequado, consulte TextUnit.

Text(
    text = text,
    style = LocalTextStyle.current.merge(
        TextStyle(
            lineHeight = 2.5.em,
            platformStyle = PlatformTextStyle(
                includeFontPadding = false
            ),
            lineHeightStyle = LineHeightStyle(
                alignment = LineHeightStyle.Alignment.Center,
                trim = LineHeightStyle.Trim.None
            )
        )
    )
)
TextSnippets.kt

Além de ajustar lineHeight, agora você pode centralizar ainda mais e estilizar o texto usando configurações com a API experimental LineHeightStyle: LineHeightStyle.Alignment e LineHeightStyle.Trim (includeFontPadding precisa ser definido como false para Cortar para funcionar). "Alignment" e "Trim" usam o espaço medido entre linhas de texto para distribuí-lo de maneira mais adequada para todas as linhas, incluindo uma única linha de texto e a linha na parte de cima de um bloco de texto.

LineHeightStyle.Alignment define como alinhar a linha no espaço fornecido pela altura da linha. Em cada linha, é possível alinhar o texto à parte de cima, de baixo, no centro ou proporcionalmente. LineHeightStyle.Trim permite que você deixe ou remova o espaço extra na parte de cima da primeira linha e na parte de baixo da última linha do texto, gerado usando qualquer ajuste de lineHeight e alinhamento. Os exemplos a seguir mostram a aparência de um texto de várias linhas com várias configurações de LineHeightStyle.Trim quando o alinhamento é centralizado (LineHeightStyle.Alignment.Center).

LineHeightStyle.Trim.None	LineHeightStyle.Trim.Both
LineHeightStyle.Trim.FirstLineTop	LineHeightStyle.Trim.LastLineBottom

Consulte a postagem do blog Como corrigir o padding da fonte no texto do Compose para saber mais. mais sobre o contexto dessa mudança, como includeFontPadding funcionou na visualização e as mudanças feitas no Compose e no novo LineHeightStyle APIs de terceiros.

Inserir quebras de linha

A API LineBreak define os critérios pelos quais o texto é dividido várias linhas. Você pode especificar o tipo de quebra de linha desejado no TextStyle do elemento combinável Text. Os tipos predefinidos de quebra de linha incluem o seguinte:

• Simple: quebra de linha rápida e básica. Recomendado para campos de entrada de texto.
• Heading: quebra de linha com regras de quebra mais soltas. Recomendado para abreviar como títulos.
• Paragraph: quebra de linha mais lenta e de maior qualidade para melhorar a legibilidade. Recomendado para grandes quantidades de texto, como parágrafos.

O snippet a seguir usa Simple e Paragraph para especificar comportamento de quebra de linha em um bloco longo de texto:

TextSample(
    samples = mapOf(
        "Simple" to {
            Text(
                text = SAMPLE_LONG_TEXT,
                modifier = Modifier
                    .width(130.dp)
                    .border(BorderStroke(1.dp, Color.Gray)),
                fontSize = 14.sp,
                style = TextStyle.Default.copy(
                    lineBreak = LineBreak.Simple
                )
            )
        },
        "Paragraph" to {
            Text(
                text = SAMPLE_LONG_TEXT,
                modifier = Modifier
                    .width(130.dp)
                    .border(BorderStroke(1.dp, Color.Gray)),
                fontSize = 14.sp,
                style = TextStyle.Default.copy(
                    lineBreak = LineBreak.Paragraph
                )
            )
        }
    )
)
TextSnippets.kt

Na saída acima, observe que o comportamento de quebra de linha Paragraph produz um resultado visualmente mais equilibrado do que a quebra de linha Simple.

Personalizar quebras de linha

Você também pode criar sua própria configuração de LineBreak com o Strategy. . O Strategy pode ser qualquer um destes:

• Balanced: tenta equilibrar os comprimentos de linha do texto, aplicando também hifenização automática, se ativada. Recomendado para telas pequenas, como relógios, para maximizar a quantidade de texto exibida.
• HighQuality: otimiza um parágrafo para oferecer texto mais legível, incluindo hifenização, se ativada. (Deve ser um padrão para tudo que não é Balanced ou Simple.
• Simple: estratégia básica e rápida. Se ativada, a hifenização é feita apenas para palavras que não cabem em uma linha inteira sozinha. Útil para editar texto para evitar mudanças de posição durante a digitação.

O snippet a seguir mostra a diferença entre um parágrafo com configurações padrão e um parágrafo otimizado para telas pequenas com a quebra de linha Balanced estratégia:

TextSample(
    samples = mapOf(
        "Balanced" to {
            val smallScreenAdaptedParagraph =
                LineBreak.Paragraph.copy(strategy = LineBreak.Strategy.Balanced)
            Text(
                text = SAMPLE_LONG_TEXT,
                modifier = Modifier
                    .width(200.dp)
                    .border(BorderStroke(1.dp, Color.Gray)),
                fontSize = 14.sp,
                style = TextStyle.Default.copy(
                    lineBreak = smallScreenAdaptedParagraph
                )
            )
        },
        "Default" to {
            Text(
                text = SAMPLE_LONG_TEXT,
                modifier = Modifier
                    .width(200.dp)
                    .border(BorderStroke(1.dp, Color.Gray)),
                fontSize = 14.sp,
                style = TextStyle.Default
            )
        }
    )
)
TextSnippets.kt

Considerações sobre a CJK

Também é possível personalizar LineBreak com os Strictness e APIs WordBreak, que foram projetadas especificamente para as linguagens CJK. Talvez você nem sempre veja os efeitos dessas APIs em linguagens diferentes do CJK. Em geral, as regras de quebra de linha são definidas com base na localidade.

Strictness descreve a rigidez da quebra de linha com o seguinte: propriedades:

• Default: regras interruptivas padrão para a localidade. Pode corresponder a Normal ou Strict.
• Loose: as regras menos restritivas. Adequado para linhas curtas.
• Normal: as regras mais comuns para quebra de linha.
• Strict: as regras mais rigorosas para quebra de linha.

WordBreak define como as quebras de linha devem ser inseridas em palavras com o propriedades a seguir:

• Default: regras interruptivas padrão para a localidade.
• Phrase: a quebra de linha é baseada em frases.

O snippet a seguir usa uma rigidez de Strict e uma quebra de palavra em Phrase. para um texto em japonês:

val customTitleLineBreak = LineBreak(
    strategy = LineBreak.Strategy.HighQuality,
    strictness = LineBreak.Strictness.Strict,
    wordBreak = LineBreak.WordBreak.Phrase
)
Text(
    text = "あなたに寄り添う最先端のテクノロジー。",
    modifier = Modifier.width(250.dp),
    fontSize = 14.sp,
    style = TextStyle.Default.copy(
        lineBreak = customTitleLineBreak
    )
)
TextSnippets.kt

Usar hifenização para texto dividido em linhas

A API Hyphens permite que você adicione suporte a hifenização ao seu app. Hifenação refere-se à inserção de um sinal de pontuação semelhante a um traço para indicar que um é dividida em linhas de texto. Quando ativada, a hifenização é adicionada entre as sílabas de uma palavra nos pontos de hifenização apropriados.

Por padrão, a hifenização não está ativada. Para ativar a hifenização, adicione Hyphens.Auto como parâmetro em um bloco TextStyle:

TextSample(
    samples = mapOf(
        "Hyphens - None" to {
            Text(
                text = SAMPLE_LONG_TEXT,
                modifier = Modifier
                    .width(130.dp)
                    .border(BorderStroke(1.dp, Color.Gray)),
                fontSize = 14.sp,
                style = TextStyle.Default.copy(
                    lineBreak = LineBreak.Paragraph,
                    hyphens = Hyphens.None
                )
            )
        },
        "Hyphens - Auto" to {
            Text(
                text = SAMPLE_LONG_TEXT,
                modifier = Modifier
                    .width(130.dp)
                    .border(BorderStroke(1.dp, Color.Gray)),
                fontSize = 14.sp,
                style = TextStyle.Default.copy(
                    lineBreak = LineBreak.Paragraph,
                    hyphens = Hyphens.Auto
                )
            )
        }
    )
)
TextSnippets.kt

Quando ativada, a hifenização só ocorre nas seguintes condições:

• Uma palavra não cabe em uma linha. Se você usar uma estratégia de quebra de linha Simple, a hifenização de uma palavra ocorre somente se a linha for menor que a palavra.
• A localidade apropriada foi definida no seu dispositivo. A hifenização adequada é são determinados por dicionários presentes no sistema.

Recomendados para você

• Observação: o texto do link aparece quando o JavaScript está desativado.
• Estilizar texto
• Conceitos básicos de layout do Compose
• Medições intrínsecas em layouts do Compose