es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Alinea dos textos según la altura de la fuente en lugar de la línea base en Jetpack Compose.

Alinea dos textos según la altura de la fuente en lugar de la línea base en Jetpack Compose.

29 Jul, 2023 Programación

Sé cómo alinear el texto en Jetpack Compose a la línea base.

Pero ahora necesitaría alinear dos textos de tamaños diferentes que se encuentran uno tras otro en una Row según el ascenso de la fuente más grande de esos dos textos. Me gustaría pensar en esto como alinear dos textos “por la línea de base superior”, si eso tiene sentido. Modifier.align(Alignment.Top) no funciona porque no alinea según el ascenso, sino según la parte superior del diseño y luego los textos no están alineados correctamente en la parte superior.

He intentado buscar cómo hacer esto, pero parece que no hay una función o modificador predefinido para esto. Ni siquiera encontré una manera de acceder a la propiedad de ascenso del Texto, etc., en Compose. Entonces, ¿no estoy seguro de cómo sería posible?

¡Gracias por cualquier pista! 🙂

Editar: Esto es cómo se ve cuando se utiliza Alignment.Top. Pero me gustaría que los dos textos se alineen en la parte superior.

enter image description here

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para alinear dos textos de diferentes tamaños que se siguen en una Row por la ascendencia de la fuente más grande en Jetpack Compose, podemos usar el modificador onGloballyPositioned en el elemento Text más grande para obtener su ascendencia y luego usarla para alinear el elemento Text más pequeño en la parte superior del más grande. Aquí tienes un ejemplo:

    Row(verticalAlignment = Alignment.Top) {
    Text(
        text = "Texto más grande",
        fontSize = 24.sp,
        onGloballyPositioned { layoutCoordinates ->
            val ascendencia = layoutCoordinates.localToRoot(LayoutCoordinates(0f, 0f)).bounds.top

            // Establecer la ascendencia como una etiqueta en el elemento Text para acceder a ella más tarde
            it.setTag(ascendencia)
        }
    )
    Text(
        text = "Texto más pequeño",
        fontSize = 16.sp,
        modifier = Modifier.alignByBaseline(
            // Obtener la etiqueta de la ascendencia del elemento Text más grande y usarla para alinear el texto más pequeño en la parte superior
            alignmentLine = TextUnitType.Custom,
            baseline = AlignmentLine.Bottom,
            offset = (-it.getTag<float>()) // Negar la ascendencia para alinear en la parte superior
        )
    )
}

    En este ejemplo, usamos el modificador onGloballyPositioned en el elemento Text más grande para obtener su ascendencia, que es la distancia desde la línea de base hasta la parte superior de la fuente. Luego, establecemos la ascendencia como una etiqueta en el elemento Text para poder acceder a ella más tarde.

    En el modifier del elemento Text más pequeño, usamos la función alignByBaseline para alinear el elemento Text en la parte superior. Pasamos la alignmentLine como un TextUnitType personalizado y la baseline como AlignmentLine.Bottom (ya que queremos alinear la parte superior del elemento Text con la parte superior de la fuente más grande), y lo desplazamos por la ascendencia negada del elemento Text más grande para alinearlo en la parte superior.

    Esto debería alinear los dos textos a través de la línea de base superior de la fuente más grande en Jetpack Compose.

Comments are closed.