Как выровнять элементы строки в Jetpack Compose

Question

Как выровнять элементы внутри строки по базовой линии. Моя проблема в том, что я хочу иметь элемент Row с несколькими элементами Text, и каждый из элементов Text будет иметь разный шрифт и размер. По умолчанию они выровнены сверху. Мне нужно, чтобы они были выровнены по дну. Это код.

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        var avenirFontBlack = Font("avenir_black.ttf")

        setContent {
            MaterialTheme {
                Row {
                    Text(text = "abrakadabra", style = TextStyle(fontSize = 22.sp, fontWeight = FontWeight.Bold, fontFamily = FontFamily(avenirFontBlack)))
                    Text(text = "abrakadabra", style = TextStyle(fontSize = 14.sp, fontWeight = FontWeight.Bold, fontFamily = FontFamily(avenirFontBlack)))
                }
            }
        }
    }
}

Вот представление кода

ОБНОВЛЕНО

Модификатор = LayoutAlign.Bottom

Answer 1

Добавьте следующий модификатор к обоим составным текстам, и это должно позаботиться об этом. Вот код для вашей справки

Text(...,  modifier = LayoutGravity.RelativeToSiblings(alignmentLine = FirstBaseline))
Text(...,  modifier = LayoutGravity.RelativeToSiblings(alignmentLine = FirstBaseline))

Снимок экрана

Answer 2

Передать LayoutAlign.Bottom в качестве параметра modifier для каждого из Text компонентов:

Text(modifier = LayoutAlign.Bottom, ...)

Примечание: это не будет присутствовать в более ранних версиях Compose Пользовательский интерфейс, поэтому вам, возможно, придется убедиться, что вы используете последнюю версию зависимостей Compose.