Alinea dos textos según la altura de la fuente en lugar de la línea base en Jetpack Compose.
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.
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 modificadoronGloballyPositioned
en el elementoText
más grande para obtener su ascendencia y luego usarla para alinear el elementoText
más pequeño en la parte superior del más grande. Aquí tienes un ejemplo:En este ejemplo, usamos el modificador
onGloballyPositioned
en el elementoText
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 elementoText
para poder acceder a ella más tarde.En el
modifier
del elementoText
más pequeño, usamos la funciónalignByBaseline
para alinear el elementoText
en la parte superior. Pasamos laalignmentLine
como unTextUnitType
personalizado y labaseline
comoAlignmentLine.Bottom
(ya que queremos alinear la parte superior del elementoText
con la parte superior de la fuente más grande), y lo desplazamos por la ascendencia negada del elementoText
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.