我们如何在 Android Jetpack Compose UI 中将文本格式化为上标或下标？

Question

我正在使用 Android Jetpack Compose 处理一个示例，其中我显示了一些文本方程式，如下所示：

<html>
<body>

<!-- Superscript-->
<p> E = mc<sup>2</sup></p>

<!--Subscript-->
<p> CH<sub>4</sub> + H<sub>2</sub>O = CO + 3H<sub>2</sub></p>
</body>
</html>

是否存在任何可用于实现相同输出的文本修饰或样式机制？

Answer 1

使用 BaselineShift, we can use Span 作为文本小部件，允许将文本装饰为下标或上标。

下面是实现上述输出的工作代码：

    @Composable
    fun Equations(name: String) {
    val defaultStyle = TextStyle(fontSize = 20.sp,
            color = Color.White)
    val scriptStyleSuper = TextStyle(
            baselineShift = BaselineShift.Superscript,
            fontSize = 12.sp,
            color = Color.Green)
    val scriptStyleSub = TextStyle(
            baselineShift = BaselineShift.Subscript,
            fontSize = 12.sp,
            color = Color.Green)
    Text {
        Span(text = "E = mc", style = defaultStyle) {
            Span(
                    text = "2",
                    style =scriptStyleSuper
            ) {
                Span(text = "\n")
                Span(text = "CH", style = defaultStyle)
                Span(text = "4 ",style = scriptStyleSub)
                Span(text = "+ H", style = defaultStyle)
                Span(text = "2",style = scriptStyleSub)
                Span(text = "O = CO + 3H", style = defaultStyle)
                Span(text = "2",style = scriptStyleSub)
            }
        }
      }
    }

输出：

查看更多信息：https://developer.android.com/reference/kotlin/androidx/compose/ui/text/style/package-summary

Answer 2

使用 1.0.0-beta03 你可以定义一个 SpanStyle using the BaselineShift.Superscript and BaselineShift.Subscript.

类似于：

    val superscript = SpanStyle(
        baselineShift = BaselineShift.Superscript,
        fontSize = 16.sp,
        color = Color.Red
    )
    val subscript = SpanStyle(
        baselineShift = BaselineShift.Subscript,
        fontSize = 16.sp,
        color = Color.Blue
    )

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

类似于：

Text(
    fontSize = 20.sp,
    text = buildAnnotatedString {
        append("E = mc")
        withStyle( superscript) {
            append("2")
        }
    }
)

和

    Text(
        fontSize = 20.sp,
        text = buildAnnotatedString {
            append("CH")
            withStyle( subscript) {
                append("4")
            }
            append(" + H")
            withStyle( subscript) {
                append("2")
            }
            append("O = CO + 3H")
            withStyle( subscript) {
                append("2")
            }
        }
    )

我们如何在 Android Jetpack Compose UI 中将文本格式化为上标或下标？

How we can we format Text as superscript or subscript in Android Jetpack Compose UI?

android

android-jetpack

android-jetpack-compose