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

Question

如何对齐 Row 中的元素由基线。我的问题是我想要一个 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)
                    )
                }
            }
        }
    }
}

这是代码的渲染 View :

Answer 1

在 Jetpack 中撰写 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)
    )
}