如何在 Jetpack Compose 中按基线对齐行元素

Question

如何Row按基线对齐 a 内的元素。我的问题是我想要一个Row包含多个Text元素的元素，并且每个Text元素都有不同的字体和大小。默认情况下，它们在顶部对齐。我需要它们在底部对齐。这是代码：

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

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

这是代码的渲染视图：

Answer 1

在 Jetpack Compose 中1.0.0，可以通过以下方式完成：

Row {
    Text(
        text = "One",
        fontSize = 20.sp,
        modifier = Modifier.alignByBaseline()
    )

    Text(
        text = "Two",
        fontSize = 12.sp,
        modifier = Modifier.alignByBaseline()
    )
}

结果：

如果有人想在使用多行时将文本与最后一个基线对齐Text，可以使用Modifier.alignBy(LastBaseline)

Row {
    Text(
        text = "Line 1\nLine 2",
        fontSize = 20.sp,
        modifier = Modifier.alignBy(LastBaseline)
    )

    Text(
        text = "Line 3",
        fontSize = 12.sp,
        modifier = Modifier.alignBy(LastBaseline)
    )
}