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

【问题标题】：How we can we format Text as superscript or subscript in Android Jetpack Compose UI?我们如何在 Android Jetpack Compose UI 中将文本格式化为上标或下标？
【发布时间】：2020-01-05 18:17:53
【问题描述】：

我正在研究一个使用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>

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

【问题讨论】：

标签： android android-jetpack android-jetpack-compose

【解决方案1】：

使用BaselineShift，我们可以将Span用于Text小部件，它允许将文本装饰为下标或上标。

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

    @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)
            }
        }
      }
    }

输出：

【讨论】：

【解决方案2】：

使用1.0.0-beta03，您可以使用BaselineShift.Superscript 和BaselineShift.Subscript 定义SpanStyle。

类似：

    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")
            }
        }
    )

【讨论】：