android - 如何在jetpack compose中删除文本基线下方的空格？

Question

目前我得到这个：

但我想要这样的东西：

但“50”和“min”中的文本也应该与顶部对齐。

我的代码：

Row(verticalAlignment = Alignment.Bottom) {
    Text(
        text = "18",
        color = MaterialTheme.colors.primaryVariant,
        fontSize = 60.sp,
        modifier = Modifier
            .weight(1f).height(62.dp),
        textAlign = TextAlign.End,
    )
    Text(
        text = "hrs",
        modifier = Modifier.weight(1f).height(16.dp),
    )
}
Row(verticalAlignment = Alignment.Top) {
    Text(
        text = "50",
        color = MaterialTheme.colors.primaryVariant,
        fontSize = 28.sp,
        modifier = Modifier.weight(1f).height(30.dp).align(Alignment.Top),
        textAlign = TextAlign.End,
    )
    Text("min", modifier = Modifier.weight(1f))
}

正如您在我的代码中看到的那样，我目前通过使用 height 属性解决了这个问题。但它对 align top 不起作用，感觉有点不对劲。有没有更好的方法让它工作？

标签： androidkotlinandroid-jetpackandroid-jetpack-compose

Answer 1

您可以使用AnnotatedString来显示具有多种样式的文本。

就像是：

Row() {
    Text(
        text = buildAnnotatedString {
        withStyle(style = SpanStyle(
            color = MaterialTheme.colors.primaryVariant,
            fontSize = 60.sp)) {
            append("18")
        }
        append(" hrs ")
    })
}

对于第二种情况，您可以将 aBaselineShift应用于min文本：

Row() {
    Text(
        text = buildAnnotatedString {
            withStyle(style = SpanStyle(
                color = MaterialTheme.colors.primaryVariant,
                fontSize = 28.sp)) {
                append("50")
            }
            withStyle(style = SpanStyle(
                baselineShift = BaselineShift(+0.65f))) {
                append(" min ")
            }

        })
}